| 本文实例为大家分享了jquery实现百叶窗效果的具体代码，供大家参考，具体内容如下 大概思路：一个div（宽度为800px），里面包含ul和li，li的宽高分别设置为560px，300px（li里的图片也是这个宽高）。li设置绝对定位，div设置相对定位。
.no0{ left:0; }
.no1{ left:160px; }
.no2{ left:320px; }
.no3{ left:480px; }
.no4{ left: 640px; }
不动画的时候，每个li宽高为160px。（800/5=160 div的宽度/图片个数）
动画的时候，被鼠标进入的li宽高为560px，300px，把图片完全显示出来。其他未被鼠标进入的图片，宽度为（800-560）/4=160px
当鼠标出去box框的话，各个图片回复最初的位置。 代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> *{ margin:0; padding:0; overflow: hidden; } .box{ width:800px; height:300px; border:5px solid gray; margin:100px auto; position: relative; } li{ list-style: none; float: left; position:absolute; /*width:160px;*/ height:300px; width:560px; } .no0{ left:0; } .no1{ left:160px; } .no2{ left:320px; } .no3{ left:480px; } .no4{ left: 640px; } img{ width:560px; height:300px; }</style><body><div class="box"> <ul> <li class="no0"> <img src="img/0.jpg" alt=""> </li> <li class="no1"> <img src="img/1.jpg" alt=""> </li> <li class="no2"> <img src="img/2.jpg" alt=""> </li> <li class="no3"> <img src="img/3.jpg" alt=""> </li> <li class="no4"> <img src="img/4.jpg" alt=""> </li> </ul></div><script src="js/jquery-1.12.3.min.js"> </script><script> // 最初的位置 0 160 320 480 640// 最左边的位置 0 60 120 180 240//最右边位置：0 560 620 680 740$lis = $("li");//当鼠标进入图1的时候，图1到图4往右边动画 $lis.eq(0).mouseenter(function(){ $lis.stop(true); $lis.eq(1).animate({left:560},1000); $lis.eq(2).animate({left:620},1000); $lis.eq(3).animate({left:680},1000); $lis.eq(4).animate({left:740},1000); });//当鼠标进入图2的时候，图2往左边动画，图3到图4往右边动画$lis.eq(1).mouseenter(function(){ $lis.stop(true); $lis.eq(1).animate({left:60},1000); $lis.eq(2).animate({left:620},1000); $lis.eq(3).animate({left:680},1000); $lis.eq(4).animate({left:740},1000);});$lis.eq(2).mouseenter(function(){ $lis.stop(true); $lis.eq(1).animate({left:60},1000); $lis.eq(2).animate({left:120},1000); $lis.eq(3).animate({left:680},1000); $lis.eq(4).animate({left:740},1000);});$lis.eq(3).mouseenter(function(){ $lis.stop(true); $lis.eq(1).animate({left:60},1000); $lis.eq(2).animate({left:120},1000); $lis.eq(3).animate({left:180},1000); $lis.eq(4).animate({left:740},1000);});$lis.eq(4).mouseenter(function(){ $lis.stop(true); $lis.eq(1).animate({left:60},1000); $lis.eq(2).animate({left:120},1000); $lis.eq(3).animate({left:180},1000); $lis.eq(4).animate({left:240},1000);});//鼠标离开box的时候，各个图片返回原来的位置 $(".box").mouseleave(function(){ $lis.stop(true); $lis.eq(1).animate({left:160},1000); $lis.eq(2).animate({left:320},1000); $lis.eq(3).animate({left:480},1000); $lis.eq(4).animate({left:640},1000); })</script></body></html>运行结果： 
代码简化： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> *{ margin:0; padding:0; overflow: hidden; } .box{ width:800px; height:300px; border:5px solid gray; margin:100px auto; position: relative; } li{ list-style: none; float: left; position:absolute; width:560px; height:300px; } .no0{ left:0; } .no1{ left:160px; } .no2{ left:320px; } .no3{ left:480px; } .no4{ left: 640px; } img{ width:560px; height:300px; }</style><body><div class="box"> <ul> <li class="no0"> <img src="img/0.jpg" alt=""> </li> <li class="no1"> <img src="img/1.jpg" alt=""> </li> <li class="no2"> <img src="img/2.jpg" alt=""> </li> <li class="no3"> <img src="img/3.jpg" alt=""> </li> <li class="no4"> <img src="img/4.jpg" alt=""> </li> </ul></div><script src="js/jquery-1.12.3.min.js"></script><script>// 最初的位置 0 160 320 480 640// 最左边的位置 0 60 120 180 240//最右边位置：0 560 620 680 740 $lis = $("li"); $lis.mouseenter(function(){ $lis.stop(true); console.log( $(this).index()); var index = $(this).index();// 当图片在被鼠标进入图片的左侧的时候，往左边动画。在右边是，往右边动画 $lis.each(function(i){ if(i <= index){ $(this).animate({left:60*i},1000); }else{ $(this).animate({left:560+60*(i-1)},1000); } }) })//鼠标离开box的时候，各个图片返回原来的位置 $(".box").mouseleave(function(){ $lis.stop(true); $lis.each( function(i){ $(this).animate({left:160*i},1000); });});</script></body></html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
jquery实现呼吸轮播效果
JavaScript制作楼层导航效果流程详解 |
