仿小米手风琴 HTML +CSS +JS开发

HTML

<div id="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

CSS

    <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;
            /* background: url("images/1.jpg");  图片位置*/
        }

        div ul {
            width: 1300px;
        }
    </style>

JS

    var box = document.getElementById("box");
    var ul = box.children[0];
    var lis = ul.children;
    for (var i = 0; i < lis.length; i++) {
        //加载图片 注意修改图片的来源
        lis[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
        //注册鼠标移入事件
        lis[i].onmouseover = function () {
            //进行排他
            for (var i = 0; i < lis.length; i++) {
                delayedPlay(lis[i], {"width": 100});
            }
            //当前li 宽度为800
            delayedPlay(this, {"width": 800});
        }
    }
    //当鼠标移动到box外面
    box.onmouseout = function () {
        for (var i = 0; i < lis.length; i++) {
            delayedPlay(lis[i], {"width": 240});
        }
    };
    //延时动画
    function delayedPlay(obj, json) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var flag = true;
            for (var k in json) {
                var leader = parseInt(getStyle(obj, k));
                var target = json[k];
                var step = (json[k] - leader) / 10;
                var step = step > 0 ? Math.ceil(step) : Math.floor(step);
                var leader = leader + step;
                obj.style[k] = leader + "px";
                console.log("leader :" + leader + "target" + target);
                if (target !== leader) {
                    flag = false;
                }
            }
            //如果全部完成,清理定时器
            if (flag) {
                clearInterval(obj.timer);
            }

        }, 15);
    }
    function getStyle(obj, attr) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(obj, null)[attr];//支持最新浏览器
        } else {
            return obj.currentStyle[attr];
        }
    }