jquery 王者荣耀手风琴

1）基础原理

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

2）代码实现

<!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 {
             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;
             69px;
            height: 69px;
            margin-right: 10px;
        }
        .king li.current {
             224px;
        }
        .king li.current .big {
            display: block;
        }

        .king li.current .small {
            display: none;
        }
        .big {
             224px;
            display: none;
        }
        .small {
            position: absolute;
            top: 0;
            left: 0;
             69px;
            height: 69px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<script src="jquery.min.js"></script>
<div class="king">
    <ul>
        <li class="current">
            <a href="#">
                <img src="images/m1.jpg" alt="" class="small">
                <img src="images/m.png" alt="" class="big">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/l1.jpg" alt="" class="small">
                <img src="images/l.png" alt="" class="big">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/c1.jpg" alt="" class="small">
                <img src="images/c.png" alt="" class="big">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/w1.jpg" alt="" class="small">
                <img src="images/w.png" alt="" class="big">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/z1.jpg" alt="" class="small">
                <img src="images/z.png" alt="" class="big">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/h1.jpg" alt="" class="small">
                <img src="images/h.png" alt="" class="big">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/t1.jpg" alt="" class="small">
                <img src="images/t.png" alt="" class="big">
            </a>
        </li>
    </ul>
</div>
<script>
   $(".king li").mouseover(function () {
       //1 当前小li宽度变为224px 同时里面 小图片谈出 大图片淡入
       // $(this).stop().animate({244},200);
       // $(this).find('.small').stop().fadeOut();
       // $(this).find('.big').stop().fadeIn();

       //链式调用
       $(this).stop().animate({ 224},200).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();

       //2 其余兄弟小li宽度变69px 小图片淡入 大图片淡出
       // $(this).siblings().stop().animate({69},200);
       // $(this).siblings().find('.small').stop().fadeIn();
       // $(this).siblings().find('.big').stop().fadeOut();

       //链式调用
       $(this).siblings("li").stop().animate({ 69},200).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
   });
</script>
</body>
</html>

相关阅读:
经典算法排序——希尔排序
 查找算法总结
 Anddroid HttpService
经典排序算法——直接选择排序
 [置顶] 获取Android手机上音乐播放器状态
 经典排序算法——归并排序
 Android锁屏未读短信，未接电话
 经典排序算法——冒泡排序
 经典排序算法——快速排序
 linux下同时存在当静态库和动态库同名
原文地址：https://www.cnblogs.com/fuyunlin/p/14494303.html