jQuery实现王者荣耀手风琴效果

更新时间：2020-09-30 11:18:01 作者：startmvc

效果思路分析:1.鼠标经过某个小li有两步操作：2.当前小li宽度变为224px，同时里面的小图片

效果

思路分析:

1.鼠标经过某个小li 有两步操作： 2.当前小li 宽度变为 224px，同时里面的小图片淡出，大图片淡入 3.其余兄弟小li宽度变为69px，小图片淡入，大图片淡出

代码实现略。(详情参考源代码)


<!doctype html>
<html>

<head>
 <meta charset="utf-8">
 <title>手风琴案例</title>

 <style type="text/css">
 * {
 margin: 0;
 padding: 0;
 }
 
 img {
 display: block;
 }
 
 ul {
 list-style: none;
 }
 
 .king {
 width: 852px;
 margin: 100px auto;
 background: url(images/bg.png) no-repeat;
 overflow: hidden;
 padding: 10px;
 }
 
 .king ul {
 overflow: hidden;
 }
 
 .king li {
 position: relative;
 float: left;
 width: 69px;
 height: 69px;
 margin-right: 10px;
 }
 
 .king li.current {
 width: 224px;
 }
 
 .king li.current .big {
 display: block;
 }
 
 .king li.current .small {
 display: none;
 }
 
 .big {
 width: 224px;
 display: none;
 }
 
 .small {
 position: absolute;
 top: 0;
 left: 0;
 width: 69px;
 height: 69px;
 border-radius: 5px;
 }
 </style>

</head>

<body>
 <script src="js/jquery.min.js"></script>
 <script type="text/javascript">
 $(function() {
 // 鼠标经过某个小li 有两步操作：
 $(".king li").mouseenter(function() {
 // 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
 // 不能写成find('.small').stop().fadeOut().siblings().find('.big').stop
 $(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>
 <div class="king">
 <ul>
 <li class="current">
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <img src="images/m1.jpg" alt="" class="small">
 <img src="images/m.png" alt="" class="big">
 </a>
 </li>
 <li>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <img src="images/l1.jpg" alt="" class="small">
 <img src="images/l.png" alt="" class="big">
 </a>
 </li>
 <li>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <img src="images/c1.jpg" alt="" class="small">
 <img src="images/c.png" alt="" class="big">
 </a>
 </li>
 <li>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <img src="images/w1.jpg" alt="" class="small">
 <img src="images/w.png" alt="" class="big">
 </a>
 </li>
 <li>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <img src="images/z1.jpg" alt="" class="small">
 <img src="images/z.png" alt="" class="big">
 </a>
 </li>
 <li>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <img src="images/h1.jpg" alt="" class="small">
 <img src="images/h.png" alt="" class="big">
 </a>
 </li>
 <li>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <img src="images/t1.jpg" alt="" class="small">
 <img src="images/t.png" alt="" class="big">
 </a>
 </li>
 </ul>

 </div>
</body>

</html>