Главная » Полезные статьи » Язык JavaScript » Эффект плавного перехода на JavaScript
Распечатать статью

Эффект плавного перехода на 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 данный эффект работать не будет.

Источник:  internet-technologies.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи