Jquery 王者荣耀手风琴案例制作

http://pvp.qq.com/strategy/     原来的案例 ，这里用的是opacity 和添加active类来完成的

下面是我的

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    </head>
    <style>
     .hero-box{width:732px;padding:8px 20px 0;color:#a6afbc;}
     .hero-list{margin-top:8px;}
     .hero-list li{float:left;display:inline;position:relative;margin-right:10px;width:69px; overflow: hidden;}
     .hero-list a{display:block;position:relative; width: 69px;height: 69px;}
     .hero-list img{border-radius:5px; opacity: 1; position: absolute; left: 0; top: 0;}
    .hero-list li.active{width: 224px;}
     .hero-list li.active a{width: 224px;}
     /* .hero-list li.active .small{opacity: 0;} */
     .hero-list li.active .large{display: block;}
     .hero-list li .large{display: none;}
    </style>
    <body>
        <div>
            <ul id="FreeHeros-Cont" class="hero-list clearfix">
                <li class="active">    
                <a href="//pvp.qq.com/web201605/herodetail/105.shtml" target="_blank" onclick="PTTSendClick('header','freeHero-0','周免英雄');">        
                <img class="small" data-id="105" src="//game.gtimg.cn/images/yxzj/img201606/heroimg/105/105.jpg" width="69" height="69">        
                <img class="large" data-id="105" src="//game.gtimg.cn/images/yxzj/img201606/heroimg/105/105-freehover.png" width="224" height="69">    </a>
                </li><li class="">    
                <a href="//pvp.qq.com/web201605/herodetail/112.shtml" target="_blank" onclick="PTTSendClick('header','freeHero-1','周免英雄');">        
                <img class="small" data-id="112" src="//game.gtimg.cn/images/yxzj/img201606/heroimg/112/112.jpg" width="69" height="69">        
                <img class="large" data-id="112" src="//game.gtimg.cn/images/yxzj/img201606/heroimg/112/112-freehover.png" width="224" height="69">    </a></li><li class="">    <a href="//pvp.qq.com/web201605/herodetail/113.shtml" target="_blank" onclick="PTTSendClick('header','freeHero-2','周免英雄');">        <img class="small" data-id="113" src="//game.gtimg.cn/images/yxzj/img201606/heroimg/113/113.jpg" width="69" height="69">        <img class="large" data-id="113" src="//game.gtimg.cn/images/yxzj/img201606/heroimg/113/113-freehover.png" width="224" height="69">    </a></li><li class="">    <a href="//pvp.qq.com/web201605/herodetail/124.shtml" target="_blank" onclick="PTTSendClick('header','freeHero-3','周免英雄');">        <img class="small" data-id="124" src="//game.gtimg.cn/images/yxzj/img201606/heroimg/124/124.jpg" width="69" height="69">        <img class="large" data-id="124" src="//game.gtimg.cn/images/yxzj/img201606/heroimg/124/124-freehover.png" width="224" height="69">    </a></li><li class="">    <a href="//pvp.qq.com/web201605/herodetail/531.shtml" target="_blank" onclick="PTTSendClick('header','freeHero-4','周免英雄');">        <img class="small" data-id="531" src="//game.gtimg.cn/images/yxzj/img201606/heroimg/531/531.jpg" width="69" height="69">        <img class="large" data-id="531" src="//game.gtimg.cn/images/yxzj/img201606/heroimg/531/531-freehover.png" width="224" height="69">    </a></li><li class="">    <a href="//pvp.qq.com/web201605/herodetail/528.shtml" target="_blank" onclick="PTTSendClick('header','freeHero-5','周免英雄');">        <img class="small" data-id="528" src="//game.gtimg.cn/images/yxzj/img201606/heroimg/528/528.jpg" width="69" height="69">        <img class="large" data-id="528" src="//game.gtimg.cn/images/yxzj/img201606/heroimg/528/528-freehover.png" width="224" height="69">    </a></li><li class="">    <a href="//pvp.qq.com/web201605/herodetail/538.shtml" target="_blank" onclick="PTTSendClick('header','freeHero-6','周免英雄');">        <img class="small" data-id="538" src="//game.gtimg.cn/images/yxzj/img201606/heroimg/538/538.jpg" width="69" height="69">        <img class="large" data-id="538" src="//game.gtimg.cn/images/yxzj/img201606/heroimg/538/538-freehover.png" width="224" height="69">    </a></li></ul>
        </div>
        <script type="text/javascript">
            $(function(){
                //鼠标经过某个li，有两步操作
                $(".hero-list li").mouseenter(function(){
                    //1.当前小li，宽度变成224px。同时里面的小图淡出，大图淡入
                    $(this).stop().animate({
                        width:224
                    }).find(".small").stop().fadeOut().siblings(".large").stop().fadeIn();
                    //2.其余兄弟小li宽度变成69px,小图淡入，大图片淡出
                    $(this).siblings("li").stop().animate({
                        width:69
                    }).find(".small").stop().fadeIn().siblings(".large").stop().fadeOut();
                })
                
            })
        </script>
    </body>
</html>

 

posted @ 2021-10-21 23:00  漫漫长路</>  阅读(112)  评论(0)    收藏  举报