基本原理：利⽤float：left来布局，通过改变图⽚的宽来实现⼿风琴效果
代码及简单注释如下（因为过多的注释会影响记忆和独⽴思考，所以今后将注释关键点）jquery代码（3.3.1版）：
$(function () {
// ⿏标离开事件（所有的li的宽变为默认值，恢复原样）
$('.menu').bind('mouseleave', function () {
$(this).children('li').each(function () {
// 两种⽅法判断如何让恢复原样，第⼀种需要在变长的同时添加⼀个属性⽤来判断当前变长的那个li            // 第⼆种简单粗暴，直接到不为初值li，变为初值即可（注意css值为带px，需转化）
// console.log($(this).css("width"));
if(parseInt($(this).css("width"))>100){
$(this).animate({
width:100
},300,function(){
});
}
// if ($(this).prop('data-show')) {
//    $(this).animate({
//        width: 100
//    }, 300);
// }
})
// ⿏标进⼊事件，图⽚展开，注意消除快速切换的bug，利⽤stop()，先停再执⾏
}).children("li").each(function () {
$(this).bind("mouseenter", function () {
$(this).prop("data-show", true);
$(this).stop().animate({
width: 500
}, 300).siblings().stop().animate({
width: 100
}, 300, function () {
$(this).removeAttr('data-show');
})
})
})
});
基本代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>⼿风琴动画</title>
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./jscount/index.js"></script>
<style>
body{
padding: 0;
margin: 0;
}
.menu li{
list-style: none;
float: left;
width: 100px;
height: 300px;
overflow: hidden;
}
.menu li>span{
position: absolute;
width: 100px;
height: 300px;
line-height: 300px;
color: rgb(43, 37, 37);
background-color: rgba(0, 0, 0, 0.103)
}
.menu li>img{
width: 500px;
height: 300px;jquery翻书效果
}
</style>
</head>
<body>
<ul class="menu">
<li><span>风景</span><img src="./image/1.jpg" alt=""></li>
<li><span>风景</span><img src="./image/2.jpg" alt=""></li>
<li><span>风景</span><img src="./image/3.jpg" alt=""></li>
<li><span>风景</span><img src="./image/4.jpg" alt=""></li>
<li><span>风景</span><img src="./image/5.jpg" alt=""></li>
<li><span>风景</span><img src="./image/6.jpg" alt=""></li>
</ul>
</body>
</html>
欢迎留⾔交流，必回！！！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。