抽屜式動效
阿新 • • 發佈：2018-03-09
posit head his https ul li git height set type
今天幫一個朋友做了一個小效果 記錄一下 鼓勵自己嘍 加油！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
background：rgba(0,0,0,0.7)
}
#banner{
position: relative;
width:1116px;
height: 400px;
background: dodgerblue;
margin:200px auto;
}
#banner ul li{
position: absolute;
left:0;
top:0;
}
.line{
position: absolute;
top:0;
left:0;
width: 16px;
height:260px;
/*line-height: 400px;*/
padding: 140px 12px 0;
background: rgba(0,0,0,0.6);
border-left: 1px solid #fff;
color: #fff;
}
</style>
<body>
<div id="banner">
<ul>
<li>
<img src="img/1.jpg" width="956" height="400"/>
<div class="line">愛新鮮</div>
</li>
<li>
<img src="img/2.jpg" width="956" height="400"/>
<div class="line">一衣多穿</div>
</li>
<li>
<img src="img/3.jpg" width="956" height="400"/>
<div class="line">評測擂臺</div>
</li>
<li>
<img src="img/4.jpg" width="956" height="400"/>
<div class="line">達人心情</div>
</li>
<li>
<img src="img/5.jpg" width="956" height="400"/>
<div class="line">大咖賣場</div>
</li>
</ul>
</div>
</body>
<script src="js/jquery-1.11.2.js"></script>
<script>
let arr = [];
$("li").each(function(i){
let index = $(this).index();
arr[i] = index * 41;
$(this).css("left",index*40 + "px")
})
$(".line").on("click",function(){
let index=$(this).parents().index();
console.log(index)
$(".line").each(function(i){
console.log(i)
console.log(arr)
if(i <= index){
$(this).parents("li").animate({"left":arr[i] + "px"})
}else{
$(this).parents("li").animate({"left":arr[i]+ 915 + "px"})
}
})
})
</script>
</html>
連接路徑 點擊https://zhouxiao632292.github.io/dress/
抽屜式動效