jQuery实现王者荣耀手风琴效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>手风琴</title>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" type="text/css" href="css/king.css"/>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="shou">
<ul>
<li class="current">
<a href="#">
<img src="images/11.jpg" class="small">
<img src="images/12.png" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/21.jpg" class="small">
<img src="images/22.png" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/31.jpg" class="small">
<img src="images/32.png" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/41.jpg" class="small">
<img src="images/42.png" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/51.jpg" class="small">
<img src="images/52.png" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/61.jpg" class="small">
<img src="images/62.png" class="big">
</a>
</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
// 鼠标经过某个li节点 有两步操作：
$(".shou li").mouseenter(function() {
// 1.当前li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
$(this).stop().animate({
width: 224,
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
// 2.其余兄弟节点li宽度变为69px， 小图片淡入， 大图片淡出
$(this).siblings("li").stop().animate({
width: 69,
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
});
</script>
</body>
</html>