王者荣耀手风琴

明确完成的效果，同时准备好相应的图片后，应该按照以下三个步骤进行。 1、写 html。 本案例中，首先有一个大盒子（大盒子背景为图片，在css样式中进行书写），盒子里面装着几个样式相同的小盒子（所以用Ul下面的 li 表示）；然后，小li里面应该装有两张图片（一张大图片，一张小图片，小图片定位到大图片左边）；最后，这些图片都可以点击，应该是链接，所以用链接将两张图片包裹起来。

2、写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;
        }
    

3、书写交互效果，jQ

 
    
    
    
        $(function() {
            // 鼠标经过某个小li 有两步操作：
            $(".king 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();
            })
        })
    

完整代码见资源，可直接下载使用