一、案例效果
![请添加图片描述](https://i-blog.csdnimg.cn/blog_migrate/8678e8e06ead87a8f2c0a7c5c6db18f5.gif)
二、案例完整代码
<!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>王者手风琴</title>
<script src="./js/jQuery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#content {
padding: 40px;
}
ul {
width: 700px;
overflow: hidden;
background-color: aqua;
padding: 10px;
}
ul li {
list-style: none;
float: left;
margin-right: 10px;
}
ul li:last-child {
margin-right: 0;
}
ul li.active {
width: 224px;
}
ul li.active .small {
display: none;
}
ul li.active .big {
display: block;
}
ul li a {
display: block;
position: relative;
width: 69px;
height: 69px;
}
.small {
position: absolute;
left: 0;
top: 0;
width: 69px;
height: 69px;
border-radius: 5px;
}
.big {
width: 224px;
display: none;
}
</style>
</head>
<body>
<div id="content">
<ul id="sfq">
<li class="active">
<a href="#">
<img src="./img/sfq/small1.webp" class="small" />
<img src="./img/sfq/big1.png" class="big" />
</a>
</li>
<li>
<a href="#">
<img src="./img/sfq/small2.webp" class="small" />
<img src="./img/sfq/big2.png" class="big" />
</a>
</li>
<li>
<a href="#">
<img src="./img/sfq/small3.webp" class="small" />
<img src="./img/sfq/big4.png" class="big" />
</a>
</li>
<li>
<a href="#">
<img src="./img/sfq/small4.webp" class="small" />
<img src="./img/sfq/big4.png" class="big" />
</a>
</li>
<li>
<a href="#">
<img src="./img/sfq/small5.webp" class="small" />
<img src="./img/sfq/big5.png" class="big" />
</a>
</li>
<li>
<a href="#">
<img src="./img/sfq/small6.webp" class="small" />
<img src="./img/sfq/big6.png" class="big" />
</a>
</li>
<li>
<a href="#">
<img src="./img/sfq/small7.webp" class="small" />
<img src="./img/sfq/big7.png" class="big" />
</a>
</li>
</ul>
</div>
<script>
$(function() {
$('#sfq li').mouseover(function() {
$(this).stop().animate({
width: 224
}).find('.small').stop().fadeOut(100).siblings('.big').stop().fadeIn(100);
$(this).siblings().stop().animate({
width: 69
}).find('.small').stop().fadeIn(100).siblings('.big').stop().fadeOut(100);
});
});
</script>
</body>
</html>