Немного о jQuery

Опубликовано Опубликовано в рубрике HTML, JavaScript, jQuery, Моим ученикам

По просьбе моих учеников сегодня я расскажу об анимации при помощи JavaScript и его фреймворка jQuery.

Демо-пример
Демо-пример

Дабы не растекаться мыслью по древу, перейду сразу к делу.

Рассмотрим применение языка JavaScript на примере анимированного меню. В статье про спрайты рассказывается о самом примитивном способе анимации ссылок. Мы используем псевдоклассы css для отслеживания состояний. По ситуации каждого из них описываем стиль ссылки при помощи sprite-изображения. Оно состоит из двух «склеенных» изображений. При жёстких размерах объектах мы видим только одну нужную часть этого изображения, наподобие слайда в диафильме. По состоянию hover мы просто сдвигаем его и видим другой «кадр».

При помощи JavaScript можно сделать анимацию плавной и более интересной.

Для начала нам необходимо произвести предварительные действия — подключить файл с библиотекой jquery к нашей странице. Её можно взять с outsource ресурсов google (ссылку всегда можно найти в поисковиках) или скачать для локального использования. Код будет выглядеть так:

После этого можно приступать непосредственно к написанию кода.

Определимся с разметкой меню. Она будет основываться на ненумерованном списке.


        В примере я намерено оставляю пробелы в ссылках — мы будем анимировать только бэкграунд, а ссылки будут в виде картинок. Если же потребуются текстовые ссылки, то для Вас не составит труда на примере этой статьи создать анимацию для текста. Напишем css для анимации. Это нужно сделать обязательно. Если у пользователя отключен JavaScript, то анимация всё равно останется, пусть и топорная. Это всё же лучше, чем «съехавшая» вёрстка. В целях экономии времени напишу css для одного класса. Остальные будут выглядеть идентично.

.anim1
{
	background : url('изображение-спрайт') no-repeat 0 -38px;
	height: 60px;

}

.anim1:hover
{
	background-position: 0 0;
}

В качестве изображения-спрайта будем использовать что-то наподобие вот этого

Размеры у него 100*60 пикселей. Соответственно, в css я задаю активную область ссылки в 60 пикселей, и изначально картинка смещена вверх на 38 пикселей, чтобы вначале была видна только надпись «Авиабилеты». При наведении мышки на ссылку картинка будет появляться полностью.

Также надо написать код для самого списка

#nvg
{
	list-style-type: none;
	min-width: 650px;
	width: 100%;
	float: left;
	padding-left: 0!important;
	-webkit-padding-start: 0px!important;
	margin-bottom: 0px!important;
        height: 40px!important;
	margin-top: 10px;
}

#nvg a
{
	text-decoration: none;
	display: block;
	width: 100px!important;
	height: 85px;
}

#nvg li
{
	display: block;
	float: left;
	width: 16%;
}

Код даёт строчное отображение списка без маркеров с минимальной шириной в 650 пикселей (чтобы не скакал).

Теперь будем анимировать! Поключим ещё два файла

Содержимое первого файла напишем вместе чуть ниже, а второй скрипт можно скачать здесь.

Пишем скрипт menu.js. Снова для одного примера:

$(function(){
		$('.anim1')
			.css( {backgroundPosition: "0 -38px"} )
			.mouseover(function(){
				$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
			})
			.mouseout(function(){
				$(this).stop().animate({backgroundPosition:"(0 -38px)"}, {duration:300, complete:function(){
					$(this).css({backgroundPosition: "0 -38px"})
				}})
			})
		});

Свойство .css устанавливает зависимость стилей не от файла стилей, а от скрипта. Смещение всё то же — 38 пикселей. Теперь .mouseover — это аналог псевдокласса hover. Здесь по событию наведённой мыши происходит действие .animate, которое меняет позицию бэкграунда, показывая нам всю картинку за время (duration) 500 мс. Ситуация .mouseout — полная противоположность. И по итогам всех действий возвращаем всё к начальному значению (четвёртая строка с конца).

Вот и всё! Можем проверять на работоспособность!

Примечание: в статье достаточно грубо использовано понятие изображения-спрайта. На самом деле — это несколько изображений, объединенных в одно. Каждая из частей видна в определённый момент или ситуацию ролика.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *