Создание визуальных эффектов

JavaScript является интерпретируемым языком программирования с объектно-ориентированными возможностями, это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента.

Основная идея JavaScript состоит в возможности изменения значений атрибутов HTML-контейнеров и свойств среды отображения в процессе просмотра HTML-страницы пользователем. При этом перезагрузки страницы не происходит.

На практике это выражается в том, что можно, например, изменить цвет фона страницы или интегрированную в документ картинку, открыть новое окно или выдать предупреждение[6].

На данном сайте реализовано множество различных сценариев, добавляющих различные визуальные эффекты, рассмотрим некоторые из них.

Пример 1. Анимация главного меню: при наведении становится видимой картинка, название вкладки помещается в серый контейнер, выплывает подменю.

Для использования функций плавности используется библиотека jQuery Easing Plugin. Функция плавности (easing) определяет скорость течения анимации, делая её более реалистичной.

Реальные вещи не начинают двигаться мгновенно и с постоянной скоростью.

$(function () {.

$('#sdt_menu > li').bind ('mouseenter', function (){.

/*обработка события при наведении курсора*/.

var $elem = $(this);

$elem.find ('img') /*поиск элементов img*/.

stop (true).

animate ({ /*анимация элемента до заданных параметров*/.

'width':'170px',.

'height':'170px',.

'left':'0px'.

}, 400,'easeOutBack')/*функция плавности анимации*/.

andSelf ()/* возвращение дочернего элемента вместе с родителем*/.

find ('.sdt_wrap').

stop (true).

animate ({'top':'140px'}, 500,'easeOutBack').

andSelf ().

find ('.sdt_active').

stop (true).

animate ({'height':'170px'}, 300, function (){.

var $sub_menu = $elem.find ('.sdt_box');

if ($sub_menu.length){.

var left = '170px';

if ($elem.parent ().children ().length == $elem.index ()+1).

left = '-170px';$sub_menu.show ().animate ({'left':left}, 200);

}.

});

}).bind ('mouseleave', function (){.

/*обработка события при отведении курсора*/.

var $elem = $(this);

var $sub_menu = $elem.find ('.sdt_box');

if ($sub_menu.length).

$sub_menu.hide ().css ('left','0px');

$elem.find ('.sdt_active').

stop (true).

animate ({'height':'0px'}, 300).

andSelf ().find ('img').

stop (true).

animate ({.

'width':'0px',.

'height':'0px',.

'left':'85px'}, 400).

andSelf ().

find ('.sdt_wrap').

stop (true).

animate ({'top':'25px'}, 500);

});

});

Пример 2. По нажатию кнопки раскрывается блок с контентом.

$(document).ready (function (){.

$('.example2').hide ().before ('Показать новость');/* Скрывает каждый из совпавших элементов набора, если они были видимыми. Вставляет контент перед каждым элементом набора. */.

$('a#toggle-example2').click (function () {/* обработка собятия при нажатии*/.

$('.example2').slideToggle (1000);/* Переключает видимость всех совпавших элементов набора, используя эффект изменения высоты элементов. */.

return false;

}); });