Эффект плавного перехода на JavaScript

Как-то путешествуя со страницы на страницу попал на один немецкий сайт, на котором нашел интересный скрипт, который демонстрировал плавный переход между текстом и плавно сменял картинки. Скрипт стоил $249. Сообразив, что за такую сумму, это должен быть самый лучший скрипт на JavaScript в мире, я написал собственный скрипт, работающий ничуть не хуже.

Эффект плавного перехода заключается в том, что один блок плавно сменяет другой, при этом один затухает, а другой наоборот плавно появляется, все это происходит одновременно и производит довольно красивое впечатление. Причем не важно, что будет в этих блоках, текст, форма или картинка.

Для создания данного эффекта нам естественно понадобится более одного блока :)
Нам необходимо решить следующие задачи:

1. Разместить два блока в одной позиции. В качестве блоков используем компонент div. Свойство position: absolute позволяет размещать блок в любом месте экрана с указанием координат left и top.

2. Разместить ссылку, которая будет вызывать процедуру плавной смены блоков next() (реализуем эту ссылку так же в виде компоненты div).

Текст кода на JavaScript выглядит достаточно просто:

<script language=JavaScript>
var m = new Array(0,100);
var t = new Array();
function next() {
m[0]+=1;
m[1]-=1;
document.getElementById("a2").style.filter="alpha(opacity="+m[0]+")";
document.getElementById("a1").style.filter="alpha(opacity="+m[1]+")";
t[0] = setTimeout("next()",5);
if (m[0]>99) clearTimeout(t[0]);
}
</script>

HTML код:

<div id=a1 style='position: absolute; top: 100px; left: 100px'>
<img src=1.jpg>
</div>
<div id=a2 style='position: absolute; top: 100px; left: 100px; filter: alpha(opacity=0)'>
<img src=2.jpg>
</div>
<div onclick='next()' style='cursor: hand;'>
Посмотреть эффект
</div>

Пример работы скрипты:

Посмотреть эффект

Повтор эффект

Необходимо заметить, что данный эффект основан на применении фильтров в IE, поэтому в Opera или Mozilla данный эффект работать не будет.

webobzor.net

-=FreeMan=-  30.09.2006  22:36 Вот Лёха, оставил людей без хлеба… Уважаемые товарищи немцы, сушите сухари!!!

lexa   30.09.2006  22:39 Я вредный, еще и комментарий им добавил на эту статью, пусть заходят :P

SHARIK    08.10.2006  00:39 Прикольно, вот если бы как то автоматизировать поцесс. Чтоб на ссылки е нажимать для получения эффекта

lexa   09.10.2006  00:34 Легко, кидаешь событие OnLoad на body и автоматизируешь. Хотя тут конечно все зависит от того, что именно ты хочешь сделать

GG   13.12.2006  11:29 Что-то этот скприпт не работает в Опере:(

lexa   13.12.2006  13:34 И не будет, он использует стандартніе IEшные фильтры

lexa   13.12.2006  23:03 Тут пример что бы и в Opere и в Mozilla работало http://www.art.webobzor.net/art/87.php

Колян  13.03.2007  17:37 Лёха, огромный респ тебе!

lexa   19.03.2007  16:38 ;)

Kiosuki  01.06.2007  11:20 Бля... Баянисты. А как же FF и Опера? Это вам не фигли-мигли.

lexa  02.06.2007  15:32 Комменты читай, я давал ссылку на рабочий вариант под любыми браузерами.

w0rtex   08.07.2007  16:58 Класс, только как разместить два блока в таблице? не зная точные координаты top i left?

SlatCh  01.04.2008  23:20 а что если фотографий оч много, тогда код не очень удобен... лучше ли сделать функцию next() с параметрами? и как можно оптимально это сделать?

lexa  02.04.2008  14:27 w0rtex поконкретней, что ты хочешь сделать

lexa  02.04.2008  14:28 SlatCh, ничего сложного, просто сначала массив вбивается со всеми фотками, а потом поочереди отображаются. Если что то конкретное, на форум.

ППР   01.06.2008  22:17 Отличный скрипт!!! Обязательно воспользуюсь

ооо  28.06.2008  20:39 Класно. Но работает только на IE

lexa  28.06.2008  22:38 ищи новую статью, там скрипт под всеми браузерами работает...

hahol  26.11.2008  21:05 спасибо

* Ник:
E-mail:
Сайт:
* Комментарий:
* Введите число:	545