jquery實現百葉窗效果(利用li的定位)
阿新 • • 發佈:2021-10-20
本文例項為大家分享了實現百葉窗效果的具體程式碼,供大家參考,具體內容如下
大概思路:
一個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
程式碼:
<!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="jquery實現百葉窗效果(利用li的定位)"> </li> <li class="no1"> <img src="img/1.jpg" alt="jquery實現百葉窗效果(利用li的定位)"> </li> <li class="no2"> <img src="img/2.jpg" alt="jquery實現百葉窗效果(利用li的定位)"> </li> <li class="no3"> <img src="img/3.jpg" alt="jquery實現百葉窗效果(利用li的定位)"> </li> <li class="no4"> <img src="img/4.jpg" alt="jquery實現百葉窗效果(利用li的定位)"> </li> </ul> </div> <script src="/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(){ www.cppcns.com$lis.stop(true); $lis.eq(1).animate({left:60},1000); $lis.eq(2).animate({left:120},1000); }); $lis.eq(3).mouseenter(function(){ $lis.stop(true); $lis.eq(1).animate({left:60},1000); $lis.eq(3).animate({left:180},1000); }); $lis.eq(4).mouseenter(function(){ $lis.stop(trwjQPCbcKue); $lis.eq(1).animate({left:60},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="jquery實現百葉窗效果(利用li的定位)"> </li>
<li class="no1"> <img src="img/1.jpg" alt="jquery實現百葉窗效果(利用li的定位)"> </li>
<li class="no2"> <img src="img/2.jpg" alt="jquery實現百葉窗效果(利用li的定位)"> </li>
<li class="no3"> <img src="img/3.jpg" alt="jquery實現百葉窗效果(利用li的定位)"> </li>
<li class="no4"> <img src="img/4.jpg" alt="jquery實現百葉窗效果(利用li的定位)"> </li>
</ul>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
// 最初的位置 0 160 320 480 640
// 最左邊的位置 0 60 120 18http://www.cppcns.com0 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>
以上就是本文的全部內容,希望對大家www.cppcns.com的學習有所幫助,也希望大家多多支援我們。