以梦为马，不负韶华。

导航

jquery实现推拉门效果 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            /* background-color: pink; */
        }
        .container{
            overflow: hidden;
            margin: 50px auto;
            width: 340px;
            height: 200px;
            /* background-color: blue; */
        }
        ul{
            list-style: none;
        }
        ul li{
            float: left;
            width: 70px;
            height: 200px;
        }
        ul  li .active{
            width:200px;
            height: 200px;
        } 
    </style>
    <body>
        <div class="container">
            <ul>
                <li class="active" ><img src="donghuaImg/11.jpg" /></li>
                <li><img src="donghuaImg/22.jpg" /></li>
                <li><img src="donghuaImg/33.jpg" /></li>
            </ul>
        </div>
    </body>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script>
        $(function(){
            $('.container ul li').mouseover(function(){
                //清空队列，防止无限改变宽， 放上的宽为200      其他兄弟li宽为70
                $(this).stop(true).animate({width:200},500).siblings().animate({width:70},500)
            })
        })
    </script>
</html>

 

posted on 2020-05-14 16:26  小冉哥、  阅读(266)  评论(0)    收藏  举报