jQuery版本的手风琴案例

素材:5张1200px  400px的图片

命名:  1.jpg   2.jpg   3..jpg  4.jpg   5.jpg

路径(相对于html文件) :  images/1.jpg

1.style样式文件

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
            width: 1300px;
        }

        #box {
            border: 2px solid red;
            width: 1200px;
            height: 400px;
            margin: 100px auto;
            overflow: hidden;
        }

        #box li {
            height: 400px;
            width: 240px;
            /*border: 1px solid black;*/
            float: left;
        }
    </style>

2.jQuery代码    需要引入jQuery包

 <script src="../jquery-1.12.4.js"></script>
    <script>
        $(function () {
            for (var i = 0; i < $("li").length; i++) {
                $("li").eq(i).css("backgroundImage", "url(images/" + (i + 1) + ".jpg)")
            }
            //给这些li注册mouseenter事件
            //让当前li宽度变800， 其他的就是100
            //animate(json, [speed,] [easing,] [callback])
            $("li").mouseenter(function () {
                $(this).stop().animate({"width":"800px"})
                        .siblings().stop().animate({"width":"100px"});
            });
            $("li").mouseleave(function () {
                $("li").stop().animate({"width":"240px"});
            });
       });

 

转载于:https://my.oschina.net/itly/blog/745499