jq 手风琴案例

最新推荐文章于 2022-10-10 07:00:00 发布

weixin_34329187

最新推荐文章于 2022-10-10 07:00:00 发布

阅读量505

点赞数

原文链接：http://www.cnblogs.com/lujieting/p/10104794.html

版权

<style>

        ul {
            list-style: none;
        }

        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 1150px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid red;
            overflow: hidden;
        }

        div li {
            width: 240px;
            height: 400px;
            float: left;
        }

        div ul {
            width: 1300px;
        }
    </style>
</head>
<body>
<div id="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        var $li=$("#box li");
       for(var i=0;i<$li.length;i++){
           $li.eq(i).css("backgroundImage","url(imgs/image/"+(i+1)+".jpg)");
           $li.mouseenter(function () {
               $(this).stop().animate({width:800}).siblings().stop().animate({width:100});
           }).mouseleave(function () {
              $li.stop().animate({width:240});
           });
       }
    });
</script>