JS——筋斗云案例

需求：
1、鼠标移动到哪里，云彩移动到哪里
2、鼠标离开，云彩回到原点
3、鼠标离开，云彩回到之前点击的地方
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: rgba(0, 0, 0, 0.8);
        }

        div {
            position: relative;
            width: 800px;
            height: 42px;
            margin: 100px auto;
            border-radius: 5px;
            background: url("images/wifi.png") no-repeat right #fff;
        }

        ul {
            list-style: none;
            position: relative;
        }

        li {
            float: left;
            width: 83px;
            height: 42px;
            font: 400 16px/42px "simsun";
            text-align: center;
            cursor: pointer;
        }

        span {
            position: absolute;
            width: 83px;
            height: 42px;
            left: 0;
            background: url("images/cloud.gif") no-repeat;
        }
    </style>
</head>
<body>
<div>
    <span></span>
    <ul>
        <li>首页新闻</li>
        <li>活动策划</li>
        <li>师资力量</li>
        <li>企业文化</li>
        <li>招聘信息</li>
        <li>公司简介</li>
        <li>上海校区</li>
        <li>广州校区</li>
    </ul>
    <script>
        //鼠标移动到哪里，云彩移动到哪里
        //鼠标离开，云彩回到原点
        //鼠标离开，云彩回到之前点击的地方
        var ulEle = document.getElementsByTagName("ul")[0];
        var liArr = ulEle.children;
        var spanEle = document.getElementsByTagName("span")[0];
        var imgWidth = liArr[0].offsetWidth;
        var key = 0;
        for (var i = 0; i < liArr.length; i++) {
            liArr[i].index = i;
            liArr[i].onmouseover = function () {
                animate(spanEle, this.index * imgWidth);
            }
            liArr[i].onmouseout = function () {
                animate(spanEle, key * imgWidth);
            }
            liArr[i].onclick = function () {
                key = this.index;
                animate(spanEle, key * imgWidth);
            }
        }

        function animate(ele, target) {
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                var step = (target - ele.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                ele.style.left = ele.offsetLeft + step + "px";
                if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {
                    ele.style.left = target + "px";
                    clearInterval(ele.timer);
                }
            }, 15);
        }
    </script>
</div>
</body>
</html>