Как-то путешествуя со страницы на страницу попал на один немецкий сайт,
на котором нашел интересный скрипт, который демонстрировал плавный
переход между текстом и плавно сменял картинки. Скрипт стоил $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 данный
эффект работать не будет.
|
Копирование материалов разрешено,