JQuery图片切换 Win8 Metro风格Banner
2013-03-24 13:40
267 查看
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片切换 - 合肥网站建设www.an56.net</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
.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%; }
</style>
</head>
<body>
<!-- FINE HEADER -->
<div class="container bg_area">
<div id="hs_container" class="hs_container">
<div class="hs_area hs_area1">
<img class="hs_visible" src="/images/bn-1.jpg" alt=""/>
<img src="/images/bn-2.jpg" alt=""/>
<img src="/images/bn-3.jpg" alt=""/>
</div>
<div class="hs_area hs_area2">
<img class="hs_visible" src="/images/bn-4.jpg" alt=""/>
<img src="/images/bn-5.jpg" alt=""/>
<img src="/images/bn-6.jpg" alt=""/>
</div>
<div class="hs_area hs_area3">
<img class="hs_visible" src="/images/bn-1.jpg" alt=""/>
<img src="/images/bn-2.jpg" alt=""/>
<img src="/images/bn-3.jpg" alt=""/>
</div>
<div class="hs_area hs_area4">
<img class="hs_visible" src="/images/bn-4.jpg" alt=""/>
<img src="/images/bn-5.jpg" alt=""/>
<img src="/images/bn-6.jpg" alt=""/>
</div>
<div class="hs_area hs_area5">
<img class="hs_visible" src="/images/bn-1.jpg" alt=""/>
<img src="/images/bn-2.jpg" alt=""/>
<img src="/images/bn-3.jpg" alt=""/>
</div>
</div>
<script type="text/javascript">
$(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);
$('<img/>').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'));
});
});
</script>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery简单实现banner图片切换
- jquery淡化版banner异步图片文字效果切换图片特效
- Win8 Metro风格的开始界面显示桌面背景图片方法
- 30款jQuery常用网页焦点图banner图片切换
- jquery制作banner图片左右上下切换滚动特效
- jquery简单的大背景banner图片全屏切换
- 30款jQuery常用网页焦点图banner图片切换 下载
- 30款jQuery常用网页焦点图banner图片切换 下载 （转）
- 30款jQuery常用网页焦点图banner图片切换 下载
- 运用jQuery定时器的原理实现banner图片切换
- jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发
- 用jQuery实现banner图片切换
- 运用jQuery定时器的原理实现banner图片切换
- Jquery仿支付宝首页Banner图片切换效果
- VC/Wince 实现仿Win8 Metro风格界面2——页面滑动切换（附效果图）
- 30款jQuery常用网页焦点图banner图片切换
- 6种非常酷炫的jquery banner焦点图片幻灯片切换
- jquery banner广告图片左右切换,模仿实现支付宝广告效果
- 30款jQuery常用网页焦点图banner图片切换
- jquery淡化版banner异步图片文字效果切换图片特效