百葉窗教程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.box {
width: 1000px;
height: 400px;
border: 3px solid pink;
margin: 100px auto;
overflow: hidden;
position: relative;
}
img {
position: absolute;
width: 580px;
height: 400px;
}
#pic0 {
left: 0px;
}
#pic1 {
left: 125px;
}
#pic2 {
left: 250px;
}
#pic3 {
left: 375px;
}
#pic4 {
left: 500px;
}
#pic5 {
left: 625px;
}
#pic6 {
left: 750px;
}
#pic7 {
left: 875px;
}
</style>
</head>
<body>
<div class="box">
<img src="http://pic1.win4000.com/wallpaper/b/57a2a1f417dab.jpg" alt="" id="pic0">
<img src="https://img2.baidu.com/it/u=3331543825,980995998&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" alt=""
id="pic1">
<img src="https://lmg.jj20.com/up/allimg/4k/s/02/21092423014IX6-0-lp.jpg" alt="" id="pic2">
<img src="https://img0.baidu.com/it/u=243773542,4241029315&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt=""
id="pic3">
<img src="https://up.enterdesk.com/edpic_source/fe/45/4f/fe454f712e99395ec427ed57ad54f553.jpg" alt="" id="pic4">
<img src="https://img2.baidu.com/it/u=1969968235,4288354655&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" alt=""
id="pic5">
<img src="https://img2.baidu.com/it/u=714355440,2996093416&fm=253&fmt=auto&app=138&f=JPEG?w=782&h=500" alt=""
id="pic6">
<img src="https://img0.baidu.com/it/u=3903743570,2513796686&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""
id="pic7">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
var $img = $('img');
$img.mouseenter(function () {
$img.stop(true)
var index = $(this).index()
console.log(index, "index");
// box 1000 img 580 420
$img.each(function (i) {
if (i <= index) {
$img.eq(i).animate({
left: 60 * i
}, 1000)
} else {
$img.eq(i).animate({
left: 580 + 60 * (i - 1)
}, 1000)
}
})
})
$('.box').mouseleave(function () {
$img.stop(true)
$img.each(function (i) {
$img.eq(i).animate({
left: 125 * i
}, 1000)
})
})
</script>
</body>
</html>
