-jQuery图片九宫格样式鼠标悬停图片滑动切换效果

最近写的jquery实例--jQuery图片九宫格样式鼠标悬停图片滑动切换效果

         有兴趣的同学可以参考一下,这幅效果,个人觉得挺不错的

[html]  view plain copy print ?
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. >  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
  7. <title>Insert title heretitle>  
  8.   
  9. <script src="http://code.jquery.com/jquery-1.10.1.min.js">script>  
  10. <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js">script>  
  11.   
  12. <style type="text/css">  
  13.     *{margin:0;padding:0;list-style-type:none;}  
  14.     a,img{border:0;}  
  15.     body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:#fff;}  
  16.     .content{width:900px;position:relative;margin:20px auto 0px auto;}  
  17.     .content h2{color:#333;font-size:22px;text-align:center;height:40px;}  
  18.     /* hs_container */  
  19.     .hs_container{width:902px;height:471px;overflow:hidden;clear:both;border:2px solid #ddd;cursor:pointer;padding:3px;}  
  20.     .hs_container .hs_area{float:left;position:relative;overflow:hidden;}  
  21.     .hs_area img{position:absolute;top:0px;left:0px;display:none;}  
  22.     .hs_area img.hs_visible{display:block;z-index:9999;}  
  23.     .hs_area1{border-right:2px solid #fff;}  
  24.     .hs_area4, .hs_area5{border-top:2px solid #fff;}  
  25.     .hs_area4{border-right:2px solid #fff;}  
  26.     .hs_area3{border-top:2px solid #fff;}  
  27.     .hs_area1{width:449px;height:334px;}  
  28.     .hs_area2{width:451px;height:165px;}  
  29.     .hs_area3{width:451px;height:167px;}  
  30.     .hs_area4{width:192px;height:135px;}  
  31.     .hs_area5{width:708px;height:135px;}  
  32. style>  
  33.   
  34.   
  35.   
  36.   
  37. head>  
  38.   
  39. <body>  
  40.    <p>this is a index pagep>  
  41.      
  42.      
  43.           
  44. <div class="content">  
  45.     <h2>jQuery图片九宫格样式鼠标悬停图片滑动切换效果(<font color="#ff0000">点击图片试试font>)h2>  
  46.       
  47.     <div id="hs_container" class="hs_container">  
  48.         <div class="hs_area hs_area1">  
  49.             <img class="hs_visible" src="images/area1/1.jpg" alt="xixi"/>  
  50.             <img src="images/area1/31.jpg" alt=""/>  
  51.         div>  
  52.         <div class="hs_area hs_area2">  
  53.             <img class="hs_visible" src="images/area2/1.jpg" alt=""/>  
  54.             <img src="images/area2/32.jpg" alt=""/>  
  55.         div>  
  56.         <div class="hs_area hs_area3">  
  57.             <img class="hs_visible" src="images/area3/1.jpg" alt=""/>  
  58.             <img src="images/area3/33.jpg" alt=""/>  
  59.         div>  
  60.         <div class="hs_area hs_area4">  
  61.             <img class="hs_visible" src="images/area4/1.jpg" alt=""/>  
  62.             <img src="images/area4/34.jpg" alt=""/>  
  63.         div>  
  64.         <div class="hs_area hs_area5">  
  65.             <img class="hs_visible" src="images/area5/1.jpg" alt=""/>  
  66.             <img src="images/area5/35.jpg" alt=""/>  
  67.         div>  
  68.     div>  
  69.   
  70. div>  
  71.           
  72.   
  73.   
  74. <script type="text/javascript">  
  75. $(function(){  
  76.     //使用自定义动画  
  77.     //过渡效果  
  78.     var animations      = ['right','left','top','bottom','rightFade','leftFade','topFade','bottomFade'];  
  79.     var total_anim      = animations.length;  
  80.     //设置选择效果  
  81.     var easeType        = 'swing';  
  82.     //每个转换的速度  
  83.     var animSpeed       = 450;  
  84.     //缓存  
  85.     var $hs_container   = $('#hs_container');  
  86.     var $hs_areas       = $hs_container.find('.hs_area');  
  87.       
  88.     //第一预加载的所有图像  
  89.     $hs_images          = $hs_container.find('img');  
  90.     var total_images    = $hs_images.length;  
  91.     var cnt             = 0;  
  92.     $hs_images.each(function(){  
  93.         var $this = $(this);  
  94.         $('<img/>').load(function(){  
  95.             ++cnt;  
  96.             if(cnt == total_images){  
  97.                 $hs_areas.each(function(){  
  98.                     var $area       = $(this);  
  99.                     //当鼠标进入该区域时,我们制作动画的电流  
  100.                     //图像(随机阵列动画)  
  101.                     //使下一个得到可见。  
  102.                     //"over" 是一个标志,如果我们可以动画   
  103.                     //一个地区或没有(我们不希望2动画  
  104.                     //为每个区域在同一时间)  
  105.                     $area.data('over',true).bind('mouseenter',function(){  
  106.                         if($area.data('over')){  
  107.                             $area.data('over',false);  
  108.                             //在这方面多少图像?  
  109.                             var total       = $area.children().length;  
  110.                             //可见光图像  
  111.                             var $current    = $area.find('img:visible');  
  112.                             //可见光图像的索引  
  113.                             var idx_current = $current.index();  
  114.                             //的将被显示的下一个图像。  
  115.                             //无论是下一个,或第一个如果当前是最后  
  116.                             var $next       = (idx_current == total-1) ? $area.children(':first') : $current.next();  
  117.                             //显示下一个(不可见)  
  118.                             $next.show();  
  119.                             //得到一个随机的动画  
  120.                             var anim        = animations[Math.floor(Math.random()*total_anim)];  
  121.                             switch(anim){  
  122.                                 //从当前幻灯片的权利  
  123.                                 case 'right':  
  124.                                 $current.animate({'left':$current.width()+'px'},animSpeed,easeType,function(){  
  125.                                     $current.hide().css({'z-index':'1','left':'0px'});  
  126.                                     $next.css('z-index','9999');  
  127.                                     $area.data('over',true);  
  128.                                 });  
  129.                                 break;  
  130.                                 //从左边滑动  
  131.                                 case 'left':  
  132.                                 $current.animate({'left':-$current.width()+'px'},animSpeed,easeType,function(){  
  133.                                     $current.hide().css({'z-index':'1','left':'0px'});  
  134.                                     $next.css('z-index','9999');  
  135.                                     $area.data('over',true);  
  136.                                 });  
  137.                                 break;  
  138.                                 //从顶部的幻灯片  
  139.                                 case 'top':  
  140.                                 $current.animate({'top':-$current.height()+'px'},animSpeed,easeType,function(){  
  141.                                     $current.hide().css({'z-index':'1','top':'0px'});  
  142.                                     $next.css('z-index','9999');  
  143.                                     $area.data('over',true);  
  144.                                 });  
  145.                                 break;  
  146.                                 //从底部滑动  
  147.                                 case 'bottom':  
  148.                                 $current.animate({'top':$current.height()+'px'},animSpeed,easeType,function(){  
  149.                                     $current.hide().css({'z-index':'1','top':'0px'});  
  150.                                     $next.css('z-index','9999');  
  151.                                     $area.data('over',true);  
  152.                                 });  
  153.                                 break;  
  154.                                 //从当前幻灯片的右侧和淡出  
  155.                                 case 'rightFade':  
  156.                                 $current.animate({'left':$current.width()+'px','opacity':'0'},animSpeed,easeType,function(){  
  157.                                     $current.hide().css({'z-index':'1','left':'0px','opacity':'1'});  
  158.                                     $next.css('z-index','9999');  
  159.                                     $area.data('over',true);  
  160.                                 });  
  161.                                 break;  
  162.                                 //从当前幻灯片的左侧和淡出  
  163.                                 case 'leftFade':  
  164.                                 $current.animate({'left':-$current.width()+'px','opacity':'0'},animSpeed,easeType,function(){  
  165.                                     $current.hide().css({'z-index':'1','left':'0px','opacity':'1'});  
  166.                                     $next.css('z-index','9999');  
  167.                                     $area.data('over',true);  
  168.                                 });  
  169.                                 break;  
  170.                                 //从当前幻灯片的顶部和淡出  
  171.                                 case 'topFade':  
  172.                                 $current.animate({'top':-$current.height()+'px','opacity':'0'},animSpeed,easeType,function(){  
  173.                                     $current.hide().css({'z-index':'1','top':'0px','opacity':'1'});  
  174.                                     $next.css('z-index','9999');  
  175.                                     $area.data('over',true);  
  176.                                 });  
  177.                                 break;  
  178.                                 //当前幻灯片,从底部淡出  
  179.                                 case 'bottomFade':  
  180.                                 $current.animate({'top':$current.height()+'px','opacity':'0'},animSpeed,easeType,function(){  
  181.                                     $current.hide().css({'z-index':'1','top':'0px','opacity':'1'});  
  182.                                     $next.css('z-index','9999');  
  183.                                     $area.data('over',true);  
  184.                                 });  
  185.                                 break;        
  186.                                 default:  
  187.                                 $current.animate({'left':-$current.width()+'px'},animSpeed,easeType,function(){  
  188.                                     $current.hide().css({'z-index':'1','left':'0px'});  
  189.                                     $next.css('z-index','9999');  
  190.                                     $area.data('over',true);  
  191.                                 });  
  192.                                 break;  
  193.                             }     
  194.                         }  
  195.                     });  
  196.                 });  
  197.   
  198.                 //当点击hs_container各个领域得到滑动  
  199.                 $hs_container.bind('click',function(){  
  200.                     $hs_areas.trigger('mouseenter');  
  201.                 });  
  202.                   
  203.             }  
  204.   
  205.         }).attr('src',$this.attr('src'));  
  206.   
  207.     });   
  208.       
  209. });  
  210. script>  
  211.      
  212.      
  213.      
  214. body>  
  215. html>  

运行效果:

-jQuery图片九宫格样式鼠标悬停图片滑动切换效果_第1张图片



图片效果2:


-jQuery图片九宫格样式鼠标悬停图片滑动切换效果_第2张图片

你可能感兴趣的:(Jquery,Jquery,图片切换效果)