Посмотреть пример
можно тут.
Скачать
можно тут.
Для
HTML структуры мы создадим элемент div с классом и id “hs_container”. Внутри мы разместим разные поля для изображений с разными картинками. У первой картинки будет класс “hs_visible”, который позволит ей отображаться поверх остальных.
<div id="hs_container" class="hs_container">
<div class="hs_area hs_area1">
<img class="hs_visible" src="images/area1/1.jpg" alt=""/>
<img src="images/area1/2.jpg" alt=""/>
<img src="images/area1/3.jpg" alt=""/>
</div>
<div class="hs_area hs_area2">
<img class="hs_visible" src="images/area2/1.jpg" alt=""/>
<img src="images/area2/2.jpg" alt=""/>
<img src="images/area2/3.jpg" alt=""/>
</div>
<div class="hs_area hs_area3">
<img class="hs_visible" src="images/area3/1.jpg" alt=""/>
<img src="images/area3/2.jpg" alt=""/>
<img src="images/area3/3.jpg" alt=""/>
</div>
<div class="hs_area hs_area4">
<img sclass="hs_visible" src="images/area4/1.jpg" alt=""/>
<img src="images/area4/2.jpg" alt=""/>
<img src="images/area4/3.jpg" alt=""/>
</div>
<div class="hs_area hs_area5">
<img class="hs_visible" src="images/area5/1.jpg" alt=""/>
<img src="images/area5/2.jpg" alt=""/>
<img src="images/area5/3.jpg" alt=""/>
</div>
</div>
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
Для эффекта смены слайдов мы будем использовать классный плагин 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);
$('<img>').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'));
});
