手风琴动画效果

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

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

        div ul {
            width: 1300px;
        }

        li {
            list-style: none;
            width: 240px;
            height: 400px;
            float: left;
        }
    </style>
<div id="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script>
    //获取所有的li
    var list = my$("box").getElementsByTagName("li");
    //遍历li并添加图片,注册鼠标进入离开事件
    for (var i = 0; i < list.length; i++) {
        list[i].style.backgroundImage = "url(img/mi" + (i + 1) + ".jpg)";
        list[i].onmouseover = mouseoverHandle;
        list[i].onmouseout = mouseoutHandle;
    }
    function mouseoverHandle() {
        for (var j = 0; j < list.length; j++) {
            //动画效果,并让所有的宽度变为50
            animate(list[j], {"width": 50});
        }
        //当前宽度设置为1000
        animate(this, {"width": 1000});
    }
    function mouseoutHandle() {
        for (var j = 0; j < list.length; j++) {
            //鼠标离开,恢复所有原始宽度
            animate(list[j], {"width": 240});
        }
    }
</script>

手风琴动画效果
手风琴动画效果

上一篇:jQuery中停止动画


下一篇:GDB命令行最基本操作