[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - программирование / Java Script /

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




Комментарии

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - программирование / Java Script /

Живые меню или Как сделать красиво с помощью CSS и JavaScript
14-03-2009   

Наверное, никто не сможет поспорить с утверждением, что главное в любой web-страничке - удобство для пользователя. После того, как мы выложили наше творение в сеть, мы сразу начинаем предпринимать массу усилий для того, чтобы привлечь на свой сайт максимум посетителей... подробнее

Кол. просмотров: общее - 3602 сегодня - 0

Локальная баннерная система
14-03-2009   

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

Кол. просмотров: общее - 3297 сегодня - 0

Локальная реклама
14-03-2009   

В Internet Zone-154 была небольшая заметка Локальная баннерная система. Автор - Вадим Беляков (http://tuta.da.ru) предлагал поставить на страничку баннер, используя небольшой javascript. Я прочитал этот номер лишь в середине апреля. Мне сразу же пришло в голову использовать его для текстовой рекламы... подробнее

Кол. просмотров: общее - 3417 сегодня - 1

Использование JS для создания «умных» форм
14-03-2009   

JS, или JavaScript язык сценариев, которые выполняются на стороне клиента и не требует перезагрузки страницы. JavaScript был разработан компанией Netscape в 1995 году... подробнее

Кол. просмотров: общее - 3414 сегодня - 0

Обманщик спам-роботов
14-03-2009   

Как известно, бичом современного Интернета является спам - непрошенная рассылка рекламных и прочих сообщений. По данным некоторых аналитиков, он составляет более 50% всех сообщений в Сети... подробнее

Кол. просмотров: общее - 3559 сегодня - 0



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects