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

最新推荐文章于 2020-09-28 08:05:34 发布
SHIZHONGYUO
最新推荐文章于 2020-09-28 08:05:34 发布
阅读量1.9k
点赞数
分类专栏： Jquery 文章标签： Jquery 图片切换效果
Jquery 专栏收录该内容
1 篇文章 0 订阅
订阅专栏
最近写的jquery实例--jQuery图片九宫格样式鼠标悬停图片滑动切换效果
有兴趣的同学可以参考一下，这幅效果，个人觉得挺不错的
[html]view plaincopyprint? 
   
 <%@ page language="java" contentType="text/html; charset=UTF-8"  
     pageEncoding="UTF-8"%>  
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
 <title>Insert title here</title>  
   
 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>  
 <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>  
   
 <style type="text/css">  
     *{margin:0;padding:0;list-style-type:none;}  
     a,img{border:0;}  
     body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:#fff;}  
     .content{width:900px;position:relative;margin:20px auto 0px auto;}  
     .content h2{color:#333;font-size:22px;text-align:center;height:40px;}  
     /* hs_container */  
     .hs_container{width:902px;height:471px;overflow:hidden;clear:both;border:2px solid #ddd;cursor:pointer;padding:3px;}  
     .hs_container .hs_area{float:left;position:relative;overflow:hidden;}  
     .hs_area img{position:absolute;top:0px;left:0px;display:none;}  
     .hs_area img.hs_visible{display:block;z-index:9999;}  
     .hs_area1{border-right:2px solid #fff;}  
     .hs_area4, .hs_area5{border-top:2px solid #fff;}  
     .hs_area4{border-right:2px solid #fff;}  
     .hs_area3{border-top:2px solid #fff;}  
     .hs_area1{width:449px;height:334px;}  
     .hs_area2{width:451px;height:165px;}  
     .hs_area3{width:451px;height:167px;}  
     .hs_area4{width:192px;height:135px;}  
     .hs_area5{width:708px;height:135px;}  
 </style>  
   
   
   
   
 </head>  
   
 <body>  
    <p>this is a index page</p>  
      
      
           
 <div class="content">  
     <h2>jQuery图片九宫格样式鼠标悬停图片滑动切换效果(<font color="#ff0000">点击图片试试</font>)</h2>  
       
     <div id="hs_container" class="hs_container">  
         <div class="hs_area hs_area1">  
             <img class="hs_visible" src="images/area1/1.jpg" alt="xixi"/>  
             <img src="images/area1/31.jpg" alt=""/>  
         </div>  
         <div class="hs_area hs_area2">  
             <img class="hs_visible" src="images/area2/1.jpg" alt=""/>  
             <img src="images/area2/32.jpg" alt=""/>  
         </div>  
         <div class="hs_area hs_area3">  
             <img class="hs_visible" src="images/area3/1.jpg" alt=""/>  
             <img src="images/area3/33.jpg" alt=""/>  
         </div>  
         <div class="hs_area hs_area4">  
             <img class="hs_visible" src="images/area4/1.jpg" alt=""/>  
             <img src="images/area4/34.jpg" alt=""/>  
         </div>  
         <div class="hs_area hs_area5">  
             <img class="hs_visible" src="images/area5/1.jpg" alt=""/>  
             <img src="images/area5/35.jpg" alt=""/>  
         </div>  
     </div>  
   
 </div>  
           
 <!-- The JavaScript -->  
   
 <script type="text/javascript">  
 $(function(){  
     //使用自定义动画  
     //过渡效果  
     var animations      = ['right','left','top','bottom','rightFade','leftFade','topFade','bottomFade'];  
     var total_anim      = animations.length;  
     //设置选择效果  
     var easeType        = 'swing';  
     //每个转换的速度  
     var animSpeed       = 450;  
     //缓存  
     var $hs_container   = $('#hs_container');  
     var $hs_areas       = $hs_container.find('.hs_area');  
       
     //第一预加载的所有图像  
     $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);  
                     //当鼠标进入该区域时，我们制作动画的电流  
                     //图像（随机阵列动画）  
                     //使下一个得到可见。  
                     //"over" 是一个标志，如果我们可以动画   
                     //一个地区或没有（我们不希望2动画  
                     //为每个区域在同一时间）  
                     $area.data('over',true).bind('mouseenter',function(){  
                         if($area.data('over')){  
                             $area.data('over',false);  
                             //在这方面多少图像？  
                             var total       = $area.children().length;  
                             //可见光图像  
                             var $current    = $area.find('img:visible');  
                             //可见光图像的索引  
                             var idx_current = $current.index();  
                             //的将被显示的下一个图像。  
                             //无论是下一个，或第一个如果当前是最后  
                             var $next       = (idx_current == total-1) ? $area.children(':first') : $current.next();  
                             //显示下一个（不可见）  
                             $next.show();  
                             //得到一个随机的动画  
                             var anim        = animations[Math.floor(Math.random()*total_anim)];  
                             switch(anim){  
                                 //从当前幻灯片的权利  
                                 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;  
                                 //从左边滑动  
                                 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;  
                                 //从顶部的幻灯片  
                                 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;  
                                 //从底部滑动  
                                 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;  
                                 //从当前幻灯片的右侧和淡出  
                                 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;  
                                 //从当前幻灯片的左侧和淡出  
                                 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;  
                                 //从当前幻灯片的顶部和淡出  
                                 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;  
                                 //当前幻灯片，从底部淡出  
                                 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;  
                             }     
                         }  
                     });  
                 });  
   
                 //当点击hs_container各个领域得到滑动  
                 $hs_container.bind('click',function(){  
                     $hs_areas.trigger('mouseenter');  
                 });  
                   
             }  
   
         }).attr('src',$this.attr('src'));  
   
     });   
       
 });  
 </script>  
      
      
      
 </body>  
 </html>  
运行效果：
图片效果2：
SHIZHONGYUO
关注
0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
-jQuery图片九宫格样式鼠标悬停图片滑动切换效果

最近写的jquery实例--jQuery图片九宫格样式鼠标悬停图片滑动切换效果有兴趣的同学可以参考一下，这幅效果，个人觉得挺不错的[html] view plaincopyprint?%@ page language="java" contentType="text/html; charset=UTF-8"
复制链接

扫一扫