前端开发javascript中的多物体缓冲运动

甄汇信息 前端开发招聘
前端移动开发招聘要求
汽车之家招聘前端开发

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
        <title>多物体运动</title>
        <meta name=”description” content=”” />
        <meta name=”keywords” content=”” />
        <link href=”” rel=”stylesheet” />
        <style type=”text/css”>
            ul {
                padding: 0;
                margin: 0;
            }
            ul li {
                padding: 0;
                height: 100px;
                width: 200px;
                background: yellow;
                margin-bottom: 10px;
                list-style-type: none;
            }
        </style>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <script type=”text/javascript”>
            window.onload = function() {
                var oLi = document.getElementsByTagName(‘li’)
                for (var i = 0; i < oLi.length; i++) {
                    oLi[i].time = null
                    oLi[i].onmouseover = function() {
                        startMove(this, 400)
                    }
                    oLi[i].onmouseout = function() {
                        startMove(this, 200)
                    }
                }
            }
            var time = null
            function startMove(obj, iTarget) {
                clearInterval(obj.time)
                obj.time = setInterval(function() {
                    var speed = (iTarget – obj.offsetWidth) / 8
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
                    if (obj.offsetWidth == iTarget) {
                        clearInterval(obj.time)
                    } else {
                        obj.style.width = obj.offsetWidth + speed + ‘px’
                    }
                }, 30)
            }
        </script>
    </body>
</html>
武汉前端开发招聘
招聘学徒web前端开发
徐州web前端开发 招聘
» 本文来自:前端开发者 » 《前端开发javascript中的多物体缓冲运动》
» 本文链接地址:https://www.rokub.com/7308.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!