Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Смена изображений по событию с обратным эффектом

Автор: PROhvost 29.1.2009, 17:13

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

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

Автор: Padonak 29.1.2009, 17:34

я чота не въеду это ты задание выдал штолле? user posted image

Автор: PROhvost 29.1.2009, 18:10

Больной мозг родил такой вариант:

Код


<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 30.1.2009, 15:19

Ну что ни у кого идей нет?

Автор: Aliance 30.1.2009, 15:24

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

Автор: PROhvost 30.1.2009, 16:04

Aliance, Спасибо, попробую.

Автор: krundetz 31.1.2009, 12:13

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

Автор: ksnk 31.1.2009, 12:24

Цитата

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

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

Код


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

Автор: PROhvost 3.2.2009, 21:39

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

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

Автор: ksnk 4.2.2009, 09:08

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

Автор: PROhvost 5.2.2009, 19:44

Картинки с 1 по 16.

Автор: ksnk 5.2.2009, 20:14

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

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

Автор: PROhvost 6.2.2009, 22:30

Если делать этот эффект с помощью каких либо библиотек, к примеру jQuery, в процессе увеличения, картинка теряет свое качество в разы, это не приемлемо.