Главная страница статей --> Хитрости при программировании php, заметки по базам данных

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

Источник: realcoding.net

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



Похожие статьи:
- Все о мета тегах
- Собираем Apache + PHP + XML для Linux.
- Третий тип XSS: Межсайтовый скриптинг через DOM
- Предзагрузка картинок
- Загрузка файлов на FTP
- Некоторые критерии выбора хостинга
- Защита от автоматической регистрации при помощи картинки
- Правила хорошего поведения при обмене ссылками
- Логи в Apache
- Подсветка ссылки
- Шрифты и CSS
- Микроформаты
- Дело Macromedia живет


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |

Контакты
Редакция:
[0.011]