迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
本文实例为大家分享了jquery实现百叶窗效果的具体代码,供大家参考,具体内容如下 大概思路:一个div(宽度为800px),里面包含ul和li,li的宽高分别设置为560px,300px(li里的图片也是这个宽高)。li设置绝对定位,div设置相对定位。 代码:<!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> 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。 |
请发表评论