Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.96/47: Рейтинг темы: голосов - 47, средняя оценка - 4.96
 Аватар для Dimarik__
21 / 21 / 3
Регистрация: 29.04.2010
Сообщений: 444

перемещение картинки

15.08.2010, 22:27. Показов 9284. Ответов 11
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
необходимосделать так, чтобы при клике по картинке, она переместилась в центр окна и расположилась как бы над всей страницей. Причём структура страницы не должна измениться. Как это можно сделать?
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
15.08.2010, 22:27
Ответы с готовыми решениями:

Перемещение картинки по странице
Как сделать возможным перемещение картинки по странице html как на рабочем столе файл. Ты берешь цепляешь мышкой картинку и перетаскиваешь

Перемещение картинки(события)
Есть картинка. По клику в поле картинка перемещается в точку клика. По нажатию на кнопку - перемещается в исходящую позицию. ...

Перемещение картинки в указанную точку
Добрый день, помогите сделать срипт, который изменял положение картинки в зависимости от положения курсора пользователя. Так, при щелчке...

11
 Аватар для Dimedrol
2378 / 941 / 129
Регистрация: 25.04.2009
Сообщений: 2,635
Записей в блоге: 4
15.08.2010, 22:34
Вы о модальном окне?
0
 Аватар для Dimarik__
21 / 21 / 3
Регистрация: 29.04.2010
Сообщений: 444
17.08.2010, 15:41  [ТС]
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function PhotoCenter(N, width, height, path)
    {
        N = parseInt(N);
        width = parseInt(width);
        height = parseInt(height);
        document.getElementById(N).width = width;
        document.getElementById(N).src = path;
        document.getElementById(N).style.position = 'absolute';
        document.getElementById(N).style.top = '50%';
        document.getElementById(N).style.right = '50%';
        document.getElementById(N).style.marginLeft = width / 2;
        document.getElementById(N).style.marginTio  = height / 2;
        document.getElementById(N).onclick = function (){
               this.parentNode.removeChild(this);
           }
           document.appendChild(document.getElementById(N));
 
    }
Проблемы:
1. фотография помещяется не по центру. Она скраю справа. Даже черезчур справа (появилась горизонтальная полоса прокрутки даже)
2. при щелчке на фотографию, полученную с помощью функции PhotoCenter, фотография не помещаятся на предыдущее место, а исчезает.
3. В IE вообще некорректно работает. То есть. При щелчке на фотографию функция PhotoCenter работает так, что фотка вообще исчезает.
На всякий случай ещё раз поясню задачу. Имеется фотография. При щелчке на неё она должна переместиться в центр экрана (причём дизайн страницы не должен измениться). она должна оказаться как бы над страницей. Потом при щелчке на эту фотку, которая над страницей, она должна вернуться на своё прежнее место. функцию написал может и криво... javascript совсем недавно учить начал.. подскажите кто чем может.. любой совет окажется полезным

Добавлено через 18 часов 51 минуту
и ещё. как сделать так чтобы увеличение картинки происходило ПЛАВНО???
и ещё. если мы кликнули по картинке №1, то она должна увеличиться. Если сразу после этого кликнули по картинке №2, то картинка №1 должна уменьшиться до первоначальных размеров, а картинка №2 увеличиться. А если кликнули в свободную область, то картинка №2 должна уменьшиться???
0
 Аватар для Dimedrol
2378 / 941 / 129
Регистрация: 25.04.2009
Сообщений: 2,635
Записей в блоге: 4
18.08.2010, 13:39
Цитата Сообщение от Dimarik__ Посмотреть сообщение
и ещё. как сделать так чтобы увеличение картинки происходило ПЛАВНО???
JQuery .animate();
Чтобы не мучиться, можно скачать вот этот архив:
modal_windows.rar
1
БТР - мой друг
 Аватар для Hagrael
333 / 277 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
18.08.2010, 17:12
и ещё. как сделать так чтобы увеличение картинки происходило ПЛАВНО???
JQuery .animate();
NO!!!! jQuery броузер будет долго грузить и обрабатывать. Напишите свой скрипт лучше, используя setTimeout.
1
 Аватар для Dimedrol
2378 / 941 / 129
Регистрация: 25.04.2009
Сообщений: 2,635
Записей в блоге: 4
18.08.2010, 17:16
Цитата Сообщение от Hagrael Посмотреть сообщение
jQuery броузер будет долго грузить и обрабатывать.
Откуда вы такие глупости берете?
0
БТР - мой друг
 Аватар для Hagrael
333 / 277 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
18.08.2010, 17:23
Dimedrol, просто по-моему jQuery - не лучший вариант.
0
 Аватар для Dimarik__
21 / 21 / 3
Регистрация: 29.04.2010
Сообщений: 444
18.08.2010, 17:42  [ТС]
Dimedrol, а мне лично очень понравилось. только если не трудно, подскажите как убрать надписи под фотографией? чтобы их не было
0
 Аватар для Dimedrol
2378 / 941 / 129
Регистрация: 25.04.2009
Сообщений: 2,635
Записей в блоге: 4
18.08.2010, 17:46
Dimarik__, тайтл уберите
HTML5
1
<a class="gallery" rel="group" title="......" href="vodopad.jpg"><img src="vodopad.jpg" height="100px" width="125px" /></a>
1
 Аватар для Dimarik__
21 / 21 / 3
Регистрация: 29.04.2010
Сообщений: 444
18.08.2010, 19:21  [ТС]
спасибо! офигенную штуку посеветовали! супер работает!

Добавлено через 1 час 11 минут
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head>
<title>example-15-1-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="jquery.fancybox-1.2.1/jquery.fancybox.css" rel="stylesheet" />
<script src="jquery.fancybox-1.2.1/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.fancybox-1.2.1/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="jquery.fancybox-1.2.1/jquery.fancybox-1.2.1.pack.js" type="text/javascript"></script>
<style type="text/css">
img { border: none; }
</style>
<script type="text/javascript">
$(function(){
  $("td.demo").fancybox({
    "zoomOpacity": true,
    "zoomSpeedIn": 2500,
    "zoomSpeedOut": 1500,
    "overlayOpacity": 0.7,
    "easingIn": "easeOutBack",
    "easingOut": "easeInBack",
    "hideOnContentClick": false
  });
});
</script>
</head>
<body>
<table>
<td class="demo" rel="group" title="" href="1.jpg"><img src="3.jpg" alt=""/></td>
</table>
</body>
</html>
не работает
0
18.08.2010, 19:22

Не по теме:

Цитата Сообщение от Hagrael Посмотреть сообщение
jQuery броузер будет долго грузить и обрабатывать.
Это смотря как писать. Если постоянно делать одни и те же запросы
JavaScript
1
2
3
$('foo.bar').что_нибудь();
$('foo.bar').еще_что_нибудь();
...
Вместо
JavaScript
1
$('foo.bar').что_нибудь().еще_что_нибудь()...;
или вместо
JavaScript
1
2
3
4
var tmp = $('foo.bar');
tmp.что_нибудь();
tmp.еще_что_нибудь();
...
То тогда, естественно, на каждый запрос $('foo.bar') будет вновь тратиться N времени.

0
 Аватар для Dimarik__
21 / 21 / 3
Регистрация: 29.04.2010
Сообщений: 444
18.08.2010, 19:22  [ТС]
а вот такой работает. ПОЧЕМУ?
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
<title>example-15-1-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="jquery.fancybox-1.2.1/jquery.fancybox.css" rel="stylesheet" />
<script src="jquery.fancybox-1.2.1/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.fancybox-1.2.1/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="jquery.fancybox-1.2.1/jquery.fancybox-1.2.1.pack.js" type="text/javascript"></script>
<style type="text/css">
img { border: none; }
</style>
<script type="text/javascript">
$(function(){
  $("a.demo").fancybox({
    "zoomOpacity": true,
    "zoomSpeedIn": 2500,
    "zoomSpeedOut": 1500,
    "overlayOpacity": 0.7,
    "easingIn": "easeOutBack",
    "easingOut": "easeInBack",
    "hideOnContentClick": false
  });
});
</script>
</head>
<body>
<a class="demo" rel="group" title="" href="1.jpg"><img src="3.jpg" alt=""/></a>
</body>
</html>
Добавлено через 36 секунд
тут проблема в дескрипторах. подскажите плиз
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
18.08.2010, 19:22
Помогаю со студенческими работами здесь

Перемещение картинки по вертикали с изменением скролла
Как можно реализовать перемещение картинки по вертикали с изменением скролла? Например, как реализовано тут: https://callbackkiller.ru/

Перемещение картинки в ячейку таблицы по нажатию на кнопку
&lt;html&gt; &lt;head&gt; &lt;script language=&quot;JavaScript&quot;&gt; function TestFunc(f) { for(i=0; i&lt;f.id.length; i++) ...

Как сформировать цикличное перемещение картинки по странице сайта?
Всем привет. Необходим скриптик, чтобы картинка перемещалась по сайту циклично слева-направо. Т. е. перемещается, к примеру, по...

Перемещение картинки из одной ячейки таблицы в другую при двойном щелчке мыши
Здравствуйте! Обращаюсь сюда за помощью, так как у меня не получается справиться с этой задачей. У меня по умолчанию в первой ячейке...

Картинки в КСС//при навождении курсора, не картинки меняются
Добрый вечер. Подскажите плз, как сделать, чтобы при навождении (не нажатии) курсора мишки на картинку, картинка менялась на другую??...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
Новые блоги и статьи
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru