特效介绍
局部切换和整体切换的jquery图片切换效果:鼠标移动到任意一张图片,该区域的图片就会切换成别的图片,当鼠标点击任意一张图片时,所有图片都会进行切换。
使用方法
1、在head里面引入下面的css样式和js文件:<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/> <script src="js/cufon-yui.js" type="text/javascript"></script>2、在您的html需要使用这种jQuery特效的容器内放入下面的代码:
<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 class="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> <!-- The JavaScript --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <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 images $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); //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 images 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','9999'); $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','9999'); $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','9999'); $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','9999'); $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','9999'); $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','9999'); $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','9999'); $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','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; } } }); }); //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>3、请将需要切换的一组照片放在一个文件夹,然后修改类似下面的代码:
<img class="hs_visible" src="images/area5/1.jpg" alt=""/> <img src="images/area5/2.jpg" alt=""/> <img src="images/area5/3.jpg" alt=""/>第一张为载入时显示的图片,后面两张为每次切换的图片。
部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!