JQuery图片切换 Win8 Metro风格Banner
生活随笔
收集整理的這篇文章主要介紹了
JQuery图片切换 Win8 Metro风格Banner
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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 transitionsvar animations = ['right', 'left', 'top', 'bottom', 'rightFade', 'leftFade', 'topFade', 'bottomFade'];var total_anim = animations.length;//just change this to one of your choicevar easeType = 'swing';//the speed of each transitionvar animSpeed = 450;//cachingvar $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 imagevar $current = $area.find('img:visible');//index of visible imagevar 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 lastvar $next = (idx_current == total - 1) ? $area.children(':first') : $current.next();//show next one (not yet visible)
$next.show();//get a random animationvar 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>
?
轉載于:https://www.cnblogs.com/al-one/archive/2013/03/24/2978483.html
總結
以上是生活随笔為你收集整理的JQuery图片切换 Win8 Metro风格Banner的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [转]游戏中各种性能优化方法（不断更新）
- 下一篇： hadoop大数据开发基础_Java大数