В этой статье я постараюсь доступным языком объяснить, как при помощи JavaScript
можно сделать эффект плавного затемнения и осветления изображений. Для примера
наведите курсором на изображения цветов, расположенных выше. Необходимо заметить,
что данный эффект будет работать только под браузером Internet Explorer и его надстройками.
Таким образом задача сводится к следующему: необходимо создать эффект плавного перехода
от полуяркой к четкой картинки при наведении на нее курсором. При этом необходимо
создать эффект возврата в исходную позицию.
Текст кода на JavaScript для создания эффекта света выглядит следующим образом:
<script language=JavaScript>
var opac = new Array(30, 30, 30, 30);
var pict = new Array('al1', 'al2', 'al3', 'al4');
var tt = new Array();
var tt2 = new Array();
function light(q) {
opac[q]+=2;
document.getElementById(pict[q]).style.filter="alpha(opacity="+opac[q]+")";
tt[q] = setTimeout("light("+q+")",30);
if (opac[q]==100) clearTimeout(tt[q]);
};
function unlight(q) {
if (opac[q]!=30) opac[q]-=2;
document.getElementById(pict[q]).style.filter="alpha(opacity="+opac[q]+")";
tt2[q] = setTimeout("unlight("+q+")",30);
if (opac[q]==30) clearTimeout(tt2[q]);
};
</script>
Разберем дословно каждую строку кода. Во-первых, для изменения яркости объекта (
рисунка) мы используем фильтр alpha(opacity=n),
где n - процентное значение яркости объекта (при n=100 рисунок отображается как есть).
opac - массив, содержащий текущие значения параметров n для
фильтра для каждого объекта.
pict - массив, содержащий идентификаторы (имена) рисунков
(т.е. параметр свойства <img name='имя русунка'...).
Нетрудно дагадаться, что количество элементов в массивах opac и
pict должно совпадать с количеством рисунков.
Массивы tt и tt2 будут содержать
идентификаторы таймеров, о которых мы поговорим ниже.
<img src='dahlia.jpg' onmouseover='clearTimeout(tt2[0]); light(0)'
onmouseout='clearTimeout(tt[0]); unlight(0)' name=al1 style='filter: alpha(opacity=30)'>
<img src='scabious.jpg' onmouseover='clearTimeout(tt2[1]); light(1)'
onmouseout='clearTimeout(tt[1]); unlight(1)' name=al2 style='filter: alpha(opacity=30)'>
<img src='canna.jpg' onmouseover='clearTimeout(tt2[2]); light(2)'
onmouseout='clearTimeout(tt[2]); unlight(2)' name=al3 style='filter: alpha(opacity=30)'>
<img src='orange.jpg' onmouseover='clearTimeout(tt2[3]); light(3)'
onmouseout='clearTimeout(tt[3]); unlight(3)' name=al4 style='filter: alpha(opacity=30)'>
При наведении указателя мыши на картинку вызывается обработчик
событий OnMouseOver и выполняются следующие действия: прекращается
работа таймера и выполняется функция Light(q),
где q - порядковый номер картинки. Рассмотрим подробно данную функцию.
opac[q]+=2
указывает, что яркость картинки по данному порядковому номеру увеличивается
на 2.
document.getElementById(pict[q]).style.filter="alpha(opacity="+opac[q]+")"
непосредственно
изменяет яркость картинки в зависимости от ее порядкового номера (q) и значения ее яркости (opac[q]).
tt[q] = setTimeout("light("+q+")",30)
создает таймер, который будет выполнять процедуру Light[q] с частотов в 0,03 секунды.
if (opac[q]==100) clearTimeout(tt[q])
проверят, достигло ли значение яркости картинки 100%, если да, то прекращает
выполнение процедуры (уничтожает таймер).
Если убрать указатель мыши с картинки, то будет выполнен обработчик событий OnMouseOut.
Данный обработчик запускает на выполнение процедуру Unlight(q).
Данная функция выполняет аналогичные действия, что и функция Light(q),
но в отличие от нее не повышает, а понижает яркость картинки:
opac[q]-=2
а также создает таймер, который будет вызывать данную функцию, пока яркость картинки не
понизится до первоначальных 30%:
if (opac[q]==30) clearTimeout(tt2[q])
Вы можете по своему усмотрению изменять, с какой частотой будут выполнятся функции, на сколько
процентов будут увеличиваться или уменьшаться яркость картинки. Однако для создании плавного эффекта
необходимо что бы функции выполнялись в пределах 0,02-0,05 секундах, а значение яркости изменялось
в границах 2-5 процентов.
|
На главную
