JQuery图片切换 Win8 Metro风格Banner

9404803

图片切换 - 合肥网站建设www.an56.net


.bg_area { padding-top:30px; padding-bottom:30px }
.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; margin:0 auto; }
.hs_container .hs_area { position:absolute; overflow:hidden; }
.hs_area img { width:calc(100% - 2px); *width:100%; width:100%\0/; min-height:100%; position:absolute; top:0px; left:0px; display:none; }
.hs_area img.hs_visible { display:block; z-index:50; }
.hs_area1, .hs_area4 { border-right:2px solid #fff; }
.hs_area4, .hs_area5 { border-top:2px solid #fff; }
.hs_area3 { border-top:2px solid #fff; }
.hs_area1 { width:50%; height:66.666%; top:0px; left:0px; }
.hs_area2 { width:50%; height:33.333%; top:0px; right:0; }
.hs_area3 { width:50%; height:33.333%; max-height:calc(33.33% - 2px); top:33.333%; right:0; }
.hs_area4 { width:25%; height:33.333%; top:66.666%; left:0px; }
.hs_area5 { width:75%; height:33.333%; top:66.666%; right:0; }
.hs_area2 img,.hs_area3 img,.hs_area5 img { width:100%; }

































$(function()
{
//custom animations to use
//in the transitions
var animations = ['right', 'left', 'top', 'bottom', 'rightFade', 'leftFade', 'topFade', 'bottomFade'];
var total_anim = animations.length;
//just change this to one of your choice
var easeType = 'swing';
//the speed of each transition
var animSpeed = 450;
//caching
var $hs_container = $('#hs_container');
var $hs_areas = $hs_container.find('.hs_area');
//first preload all img
  $hs_img = $hs_container.find('img');
var total_img = $hs_img.length;
var cnt = 0;
$hs_img.each(function () {
var $this = $(this);
$('').load(function () {
++cnt;
if (cnt == total_img) {
$hs_areas.each(function () {
var $area = $(this);
//when the mouse enters the area we animate the current
//image (random animation from array animations),
//so that the next one gets visible.
//"over" is a flag indicating if we can animate
//an area or not (we don't want 2 animations
//at the same time for each area)
          $area.data('over', true).bind('mouseenter', function () {
if ($area.data('over')) {
$area.data('over', false);
//how many img in this area?
var total = $area.children().length;
//visible image
var $current = $area.find('img:visible');
//index of visible image
var idx_current = $current.index();
//the next image that's going to be displayed.
//either the next one, or the first one if the current is the last
var $next = (idx_current == total - 1) ? $area.children(':first') : $current.next();
//show next one (not yet visible)
      $next.show();
//get a random animation
var anim = animations[Math.floor(Math.random() * total_anim)];
switch (anim) {
//current slides out from the right  
case 'right':
$current.animate({
'left': $current.width() + 'px'
},
animSpeed,
easeType,
function () {
$current.hide().css({
'z-index': '1',
'left': '0px'
});
$next.css('z-index', '50');
$area.data('over', true);
});
break;
//current slides out from the left  
case 'left':
$current.animate({
'left': -$current.width() + 'px'
},
animSpeed,
easeType,
function () {
$current.hide().css({
'z-index': '1',
'left': '0px'
});
$next.css('z-index', '50');
$area.data('over', true);
});
break;
//current slides out from the top   
case 'top':
$current.animate({
'top': -$current.height() + 'px'
},
animSpeed,
easeType,
function () {
$current.hide().css({
'z-index': '1',
'top': '0px'
});
$next.css('z-index', '50');
$area.data('over', true);
});
break;
//current slides out from the bottom   
case 'bottom':
$current.animate({
'top': $current.height() + 'px'
},
animSpeed,
easeType,
function () {
$current.hide().css({
'z-index': '1',
'top': '0px'
});
$next.css('z-index', '50');
$area.data('over', true);
});
break;
//current slides out from the right  and fades out  
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', '50');
$area.data('over', true);
});
break;
//current slides out from the left and fades out   
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', '50');
$area.data('over', true);
});
break;
//current slides out from the top and fades out   
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', '50');
$area.data('over', true);
});
break;
//current slides out from the bottom and fades out   
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', '50');
$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', '50');
$area.data('over', true);
});
break;
}
}
});
});
//when clicking the hs_container all areas get slided
//(just for fun...you would probably want to enter the site
//or something similar)
        $hs_container.bind('click', function () {
$hs_areas.trigger('mouseenter');
});
}
}).attr('src', $this.attr('src'));
});
});