jquery实现百叶窗效果(利用li的定位)
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)