Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Смена изображений по событию с обратным эффектом, смена картинок при наведении на ссылку 
:(
    Опции темы
PROhvost
Дата 29.1.2009, 17:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 42
Регистрация: 16.2.2006

Репутация: нет
Всего: нет
Есть 10 изображений, задача сделать так, чтобы при onmouseover на ссылку начиналась смена картинок с 1 по 10, а при onmouseout начинался обратный эффект. При этом нужно что бы смена изображений в обратном порядке начиналась с той картинки, на которой закончилась.

Как можно реализовать или может быть есть похожие решения, на форуме вроде не нашел.

Это сообщение отредактировал(а) PROhvost - 29.1.2009, 18:11
PM MAIL   Вверх
Padonak
Дата 29.1.2009, 17:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 63
Регистрация: 29.5.2008
Где: Ростов-на-Дону

Репутация: 2
Всего: 2
я чота не въеду это ты задание выдал штолле? user posted image
PM MAIL WWW ICQ   Вверх
PROhvost
Дата 29.1.2009, 18:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 42
Регистрация: 16.2.2006

Репутация: нет
Всего: нет
Больной мозг родил такой вариант:

Код

<html>
<head>
<script language="JavaScript" type="text/javascript">
imgSrcP = new Array('i/1.png','i/2.png','i/3.png','i/4.png','i/5.png','i/6.png','i/7.png','i/8.png','i/9.png','i/10.png','i/11.png','i/12.png','i/13.png','i/14.png','i/15.png','i/16.png');
imgSrcM = new Array('i/16.png','i/15.png','i/14.png','i/13.png','i/12.png','i/11.png','i/10.png','i/9.png','i/8.png','i/7.png','i/6.png','i/5.png','i/4.png','i/3.png','i/2.png','i/1.png');
function setImgPlus(i){
    document.getElementById("pic").src = imgSrcP[i];
    ++i;
    if (i < imgSrcP.length)
    setTimeout("setImgPlus("+i+")", 10);
}
function setImgMin(i){
    document.getElementById("pic").src = imgSrcM[i];
    ++i;
    if (i < imgSrcM.length)
    setTimeout("setImgMin("+i+")", 10);
}
</script>
</head>
<body>

<img onmouseover="setImgPlus(0)" onmouseout="setImgMin(0)" id="pic" src="i/1.png" />

</body>
</html>


 он в принципе работает, но есть глюк если убрать курсор с изображения раньше чем скрипт доберется до последнего изображения, картинка дернется, т.е. начнет с другого конца, а не с того изображения на котором остановилась, как победить, подскажите.

Это сообщение отредактировал(а) PROhvost - 29.1.2009, 22:15
PM MAIL   Вверх
PROhvost
Дата 30.1.2009, 15:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 42
Регистрация: 16.2.2006

Репутация: нет
Всего: нет
Ну что ни у кого идей нет?
PM MAIL   Вверх
Aliance
Дата 30.1.2009, 15:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137
Используй библиотеку jQuery - там есть такая вещь как queue - цепочка выполнения комманд.


--------------------
• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript
PM MAIL WWW ICQ Skype   Вверх
PROhvost
Дата 30.1.2009, 16:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 42
Регистрация: 16.2.2006

Репутация: нет
Всего: нет
Aliance, Спасибо, попробую.
PM MAIL   Вверх
krundetz
Дата 31.1.2009, 12:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Вечный странник
***


Профиль
Группа: Завсегдатай
Сообщений: 1400
Регистрация: 14.6.2007
Где: НН(Сормово)

Репутация: 1
Всего: 69
PROhvost, в твоем случае нужно две вещи массив id картинок, и номер текушего элемента массива, имея то и другое сделать то что тебе надо легко. Надеюсь понятно что я имею в виду если нет то пиши приведу пример.


--------------------
!цензоры - Хранитель стратегической жидкости
Группа ТГВ
Группа Нижний Новгород
user posted image
PM MAIL   Вверх
ksnk
Дата 31.1.2009, 12:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386
Цитата

 он в принципе работает, но есть глюк если убрать курсор ...

глюк можно убрать, если научится очищать таймауты.
Код

var timeout;
function setImgPlus(i){
   clearTimeout(timeout);
...
   timeout=setTimeout(...
}
function setImgMin(i){
   clearTimeout(timeout);
...
   timeout=setTimeout(...
}




--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
PROhvost
Дата 3.2.2009, 21:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 42
Регистрация: 16.2.2006

Репутация: нет
Всего: нет
krundetz, я примерно понимаю как считывая массив id картинок и имея номер текущей картики получить требуемый результат, но для реализации не хватает знаний.

ksnk, да так получилось лучше и плавнее смена проходит, но при резком проходе курсора все равно картинка дергается.

Это сообщение отредактировал(а) PROhvost - 3.2.2009, 21:45
PM MAIL   Вверх
ksnk
Дата 4.2.2009, 09:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386
PROhvost, Сбросил бы хоть картинки 1.png-16.png. А то самому мультики рисовать как-то ломает, а отладка методом "изучения кода" имеет свои ограничения  smile 


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
PROhvost
Дата 5.2.2009, 19:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 42
Регистрация: 16.2.2006

Репутация: нет
Всего: нет
Картинки с 1 по 16.

Присоединённый файл ( Кол-во скачиваний: 4 )
Присоединённый файл  img.rar 175,59 Kb
PM MAIL   Вверх
ksnk
Дата 5.2.2009, 20:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386
Дык, понятно, что по mouseover все начинается с картинки, которая соответствует самому"маленькому" изображению, а по mouseout - самому "большому". Вот и дергается...

Кстати, обычно такой "наезд камеры" делается простым уменьшением-увеличением размера картинки.


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
PROhvost
Дата 6.2.2009, 22:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 42
Регистрация: 16.2.2006

Репутация: нет
Всего: нет
Если делать этот эффект с помощью каких либо библиотек, к примеру jQuery, в процессе увеличения, картинка теряет свое качество в разы, это не приемлемо.
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.1506 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.