手风琴图片切换效果

来源：互联网发布：淘宝网天猫运动鞋编辑：程序博客网时间：2024/05/16 08:50
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>手风琴</title>    <style type="text/css">        *{margin: 0;padding: 0;}        ul li,ul ol{list-style: none;}        i,b,em,strong{font-style: normal;}        body{font-family: '微软雅黑';background: #222;}        img{display: block;}        .dh ul{position: relative;overflow: hidden;width: 910px;height: 306px;margin: 60px auto 0;}        .dh ul li{float: left;width: 108px;overflow: hidden;height: 100%;position: relative;cursor: pointer;}        .dh ul li a{display: block;width: 100%;height: 100%;}        .dh ul li .layer{position: absolute;bottom: 0;left: 0;width: 100%;background:rgba(27,29,36,0.75);height: 100%;}        .dh ul li .layer .p1{position: absolute;bottom: 5px;left: 10px;}        .dh ul li .layer .p2{position: absolute;bottom: 5px;right: -200%;}        .dh ul li .layer .p2 b,.dh ul li .layer .p2 span{display: block;font-weight: bold;font-size: 20px;}        .dh ul li .layer .p1 b,.dh ul li .layer .p1 span{display: block;font-weight: bold;font-size: 14px;}        .dh ul li.curr{}        /* .dh ul li.curr .layer .p1{left: -200%;}        .dh ul li.curr .layer .p2{left: 10px;} */        .col1{color: #00A39A;}        .col2{color: #fff;}    </style></head><body>    <div class="dh sfq">        <ul>            <li class="curr">                <a href="javascript:;"><img src="http://static.m3guo.com/m3guo/v2/images/heros/tskill/DH13.jpg" alt=""></a>                <div class="layer">                    <p class="p1"><b class="col1">胜率</b><span class="col2">NO.1</span></p>                    <p class="p2"><b class="col2">墨子</b><span class="col1">胜率NO.1</span></p>                </div>            </li>            <li>            <a href="javascript:;"><img src="http://static.m3guo.com/m3guo/v2/images/heros/tskill/U072.jpg" alt=""></a>                 <div class="layer">                    <p class="p1"><b class="col1">出厂</b><span class="col2">NO.1</span></p>                    <p class="p2"><b class="col2">董卓</b><span class="col1">胜率NO.1</span></p>                </div>            </li>            <li>            <a href="javascript:;"><img src="http://static.m3guo.com/m3guo/v2/images/heros/tskill/U063.jpg" alt=""></a>                 <div class="layer">                   <p class="p1"><b class="col1">MVP</b><span class="col2">NO.1</span></p>                    <p class="p2"><b class="col2">黄舞蝶</b><span class="col1">胜率NO.1</span></p>                </div>            </li>            <li>            <a href="javascript:;"><img src="http://static.m3guo.com/m3guo/v2/images/heros/tskill/U098.jpg" alt=""></a>                 <div class="layer">                    <p class="p1"><b class="col1">场均击杀</b><span class="col2">NO.1</span></p>                    <p class="p2"><b class="col2">袁术</b><span class="col1">胜率NO.1</span></p>                </div>            </li>            <li>            <a href="javascript:;"><img src="http://static.m3guo.com/m3guo/v2/images/heros/tskill/U070.jpg" alt=""></a>                 <div class="layer">                    <p class="p1"><b class="col1">场均助攻</b><span class="col2">NO.1</span></p>                    <p class="p2"><b class="col2">张郃</b><span class="col1">胜率NO.1</span></p>                </div>            </li>            <li>            <a href="javascript:;"><img src="http://static.m3guo.com/m3guo/v2/images/heros/tskill/U063.jpg" alt=""></a>                 <div class="layer">                    <p class="p1"><b class="col1">场均补刀</b><span class="col2">NO.1</span></p>                    <p class="p2"><b class="col2">黄舞蝶</b><span class="col1">胜率NO.1</span></p>                </div>            </li>            <li>            <a href="javascript:;"><img src="http://static.m3guo.com/m3guo/v2/images/heros/tskill/U068.jpg" alt=""></a>                 <div class="layer">                    <p class="p1"><b class="col1">场均金钱</b><span class="col2">NO.1</span></p>                    <p class="p2"><b class="col2">姜维</b><span class="col1">胜率NO.1</span></p>                </div>            </li>        </ul>    </div>    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>    <script type="text/javascript">        $(function(){              // 初始化 第一个 状态              jQuery('.dh ul li.curr').animate({width:'246px'},'slow');              jQuery('.dh ul li.curr .layer').animate({height:'60px'},'slow');              jQuery('.dh ul li.curr .layer .p1').animate({left:'-200%'},'slow');              jQuery('.dh ul li.curr .layer .p2').animate({right:'145px'},'slow');              jQuery('.sfq ul li').hover(function(){                // 获取索引                 var _index = $(this).index();                 $(this).addClass('curr')                 .stop()                 .animate({                    width:'246px'                 },'slow')                 .siblings()                 .stop()                 .animate({                    width:'108px'                 },'slow')                 .removeClass('curr');                 $(this).find('.layer').stop().animate({height:'60px'},'slow').parent().siblings().find('.layer').stop().animate({                     height: '100%'                 },'slow');                 $(this).find('.layer .p1').stop().animate({left:'-200%'},'slow').siblings('.p2').stop().animate({                     right: '145px'                 },'slow').parent().parent().siblings().find('.layer .p1').stop().animate({left:'10px'},'slow').siblings('.p2').stop().animate({                     right: '-200%'                 },'slow')              },function(){                //移出              })        });    </script></body></html>
转载自：http://www.qdfuns.com/notes/17946/045eec9223a894c1ea0f4a99ef5ac902.html
阅读全文
3 0