главная

Теги:


Эффект при наведении с помощью jQuery

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

Давайте начнем...

Разметка

Для HTML структуры мы создадим элемент div с классом и id “hs_container”. Внутри мы разместим разные поля для изображений с разными картинками. У первой картинки будет класс “hs_visible”, который позволит ей отображаться поверх остальных.

Давайте посмотрим на стили.

CSS

В нашей таблице стилей мы определим площади и их уровни. Поскольку они будут абсолютно позиционированы, мы также присвоим им координаты (позицию). Начнем с главного контейнера:

.hs_container{
  position:relative;
  width:902px;
  height:471px;
  overflow:hidden;
  clear:both;
  border:2px solid #fff;
  cursor:pointer;
  -moz-box-shadow:1px 1px 3px #222;
  -webkit-box-shadow:1px 1px 3px #222;
  box-shadow:1px 1px 3px #222;
  }

Важно обязатльно указать overflow:hidden, так как мы не хотим чтобы выезжающие изображения показывались вне данного контейнера.

Каждая отдельная площадь будет также иметь overflow:hidden и абсолютное позиционирование:

.hs_container .hs_area{
  position:absolute;
  overflow:hidden;
  }

Мы позиционируем изображения внутри нашей площади и делаем их видимыми:

.hs_area img{
  position:absolute;
  top:0px;
  left:0px;
  display:none;
  }

Первое изображение будет видимым и поэтому мы ему придаем класс:

.hs_area img.hs_visible{
  display:block;
  z-index:9999;
  }

А теперь мы определим границы и позиции каждого поля:

.hs_area1{
  border-right:2px solid #fff;
  }
  .hs_area4, .hs_area5{
  border-top:2px solid #fff;
  }
  .hs_area4{
  border-right:2px solid #fff;
  }
  .hs_area3{
  border-top:2px solid #fff;
  }
  .hs_area1{
  width:449px;
  height:334px;
  top:0px;
  left:0px;
  }
  .hs_area2{
  width:451px;
  height:165px;
  top:0px;
  left:451px;
  }
  .hs_area3{
  width:451px;
  height:167px;
  top:165px;
  left:451px;
  }
  .hs_area4{
  width:192px;
  height:135px;
  top:334px;
  left:0px;
  }
  .hs_area5{
  width:708px;
  height:135px;
  top:334px;
  left:194px;
  }

Со стилями покончено. Давайте перейдем к JavaScript!

JavaScript

Для эффекта смены слайдов мы будем использовать классный плагин jQuery Easing Plugin. Не забудьте его подключить вверху страницы.
Для начала давайте определим некоторые переменные.

//пользовательская анимация
  //смена слайдов
  var animations		= ['right','left','top','bottom','rightFade',
   'leftFade','topFade','bottomFade'];
  var total_anim		= animations.length;
  //смените опции ниже на любую возможную из плагина easing 
  var easeType		= 'swing';
  //скорость смены
  var animSpeed		= 450;
  //кеширование
  var $hs_container	= $('#hs_container');
  var $hs_areas		= $hs_container.find('.hs_area');

Когда мы мышкой наводим на определенную площадь с изображением происходит одна из анимаций из нашего массива выше, и появляется следующая картинка. Мы будем использовать метку "over" для того, чтобы знать можем ли мы применять анимацию на определенной площади, так как мы не хотим ситуации, когда несколько анимаций будут происходит одновременно.

У нас будет сюжет для каждой анимации и мы четко определим ее поведение.

//для начала загрузить все изображения
  $hs_images          = $hs_container.find('img');
  var total_images    = $hs_images.length;
  var cnt             = 0;
  $hs_images.each(function(){
  var $this = $(this);
  $('').load(function(){
  ++cnt;
  if(cnt == total_images){
  $hs_areas.each(function(){
  var $area 		= $(this);
  //Когда мышка переходит границу площади мы анимируем
  //изображение (случайная анимация из массива),
  //так, чтобы появилась следующая картинка.
  //"over" метка которая указывает на то, можем ли мы анимировать
  //площадь или нет
  $area.data('over',true).bind('mouseenter',function(){
  if($area.data('over')){
  $area.data('over',false);
  //Сколько изображений в этой площади?
  var total		= $area.children().length;
  //видимые изображения
  var $current 	= $area.find('img:visible');
  //индекс видимых изображений
  var idx_current = $current.index();
  //следующее изображение для показа
  var $next		= (idx_current == total-1) ? $area.children(':first') : $current.next();
  //показать следующее (пока еще не видимое)
  $next.show();
  //выбрать случайную анимацию
  var anim		= animations[Math.floor(Math.random()*total_anim)];
  switch(anim){
  //выезд справа
  case 'right':
  $current.animate({
  'left':$current.width()+'px'
  },
  animSpeed,
  easeType,
  function(){
  $current.hide().css({
  'z-index'	: '1',
  'left'		: '0px'
  });
  $next.css('z-index','9999');
  $area.data('over',true);
  });
  break;
  //теперь слева
  case 'left':
  $current.animate({
  'left':-$current.width()+'px'
  },
  animSpeed,
  easeType,
  function(){
  $current.hide().css({
  'z-index'	: '1',
  'left'		: '0px'
  });
  $next.css('z-index','9999');
  $area.data('over',true);
  });
  break;
  //...сверху
  case 'top':
  $current.animate({
  'top':-$current.height()+'px'
  },
  animSpeed,
  easeType,
  function(){
  $current.hide().css({
  'z-index'	: '1',
  'top'		: '0px'
  });
  $next.css('z-index','9999');
  $area.data('over',true);
  });
  break;
  //... снизу
  case 'bottom':
  $current.animate({
  'top':$current.height()+'px'
  },
  animSpeed,
  easeType,
  function(){
  $current.hide().css({
  'z-index'	: '1',
  'top'		: '0px'
  });
  $next.css('z-index','9999');
  $area.data('over',true);
  });
  break;
  //справа и расстворение
  case 'rightFade':
  $current.animate({
  'left':$current.width()+'px',
  'opacity':'0'
  },
  animSpeed,
  easeType,
  function(){
  $current.hide().css({
  'z-index'	: '1',
  'left'		: '0px',
  'opacity'	: '1'
  });
  $next.css('z-index','9999');
  $area.data('over',true);
  });
  break;
  //слева и расстворение
  case 'leftFade':
  $current.animate({
  'left':-$current.width()+'px','opacity':'0'
  },
  animSpeed,
  easeType,
  function(){
  $current.hide().css({
  'z-index'	: '1',
  'left'		: '0px',
  'opacity'	: '1'
  });
  $next.css('z-index','9999');
  $area.data('over',true);
  });
  break;
  //сверху и расстворение
  case 'topFade':
  $current.animate({
  'top':-$current.height()+'px',
  'opacity':'0'
  },
  animSpeed,
  easeType,
  function(){
  $current.hide().css({
  'z-index'	: '1',
  'top'		: '0px',
  'opacity'	: '1'
  });
  $next.css('z-index','9999');
  $area.data('over',true);
  });
  break;
  //снизу и расстворение
  case 'bottomFade':
  $current.animate({
  'top':$current.height()+'px',
  'opacity':'0'
  },
  animSpeed,
  easeType,
  function(){
  $current.hide().css({
  'z-index'	: '1',
  'top'		: '0px',
  'opacity'	: '1'
  });
  $next.css('z-index','9999');
  $area.data('over',true);
  });
  break;
  default:
  $current.animate({
  'left':-$current.width()+'px'
  },
  animSpeed,
  easeType,
  function(){
  $current.hide().css({
  'z-index'	: '1',
  'left'		: '0px'
  });
  $next.css('z-index','9999');
  $area.data('over',true);
  });
  break;
  }
  }
  });
  });
  //При нажатии в любом месте происходит смена на всех площадях
 
  $hs_container.bind('click',function(){
  $hs_areas.trigger('mouseenter');
  });
  }
  }).attr('src',$this.attr('src'));
  }); 

Вот и все! Вышло неплохо! Спасибо всем за внимание!

Источник урока: www.tympanus.net/codrops/2010/11/16/hover-slide-effect/

Урок Создан:2011-02-09 Просмотров:3922

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


Copyright© 2009 Hosted by Zhost