Js运动动画系列4--多物体缓冲运动

最新推荐文章于 2019-04-02 20:31:54 发布

紫菜中毒

最新推荐文章于 2019-04-02 20:31:54 发布

阅读量300

点赞数

分类专栏： JavaScript Js动画文章标签：前端博客动画 javascript

本文链接：https://blog.csdn.net/u014492334/article/details/51879451

版权

JavaScript 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

Js动画

9 篇文章 0 订阅

订阅专栏

<head>
    <title>多物体缓冲运动</title>
    <style type="text/css">
        *
        {
            margin:0;
            padding:0;
            }
        ul,li
        {
            list-style:none;
            }
        ul li
        {
            width:200px;
            height:100px;
            background:green;
            margin-bottom:20px;
            filter:alpha(opacity:100);
            opacity:1;
            }
    </style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

<script type="text/javascript">
    window.onload = function () {
        var aLi = document.getElementsByTagName('li');
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].timer = null;//多物体运动 给每个li加上各自的定时器
            aLi[i].onmouseover = function () {
                statMove(this, 400);
            }
            aLi[i].onmouseout = function () {
                statMove(this, 200);
            }
        }
    }

    function statMove(obj, iTarget) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            speed = (iTarget - obj.offsetWidth) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (obj.offsetWidth == iTarget) {
                clearInterval(obj.timer);
            }
            else {
                obj.style.width = obj.offsetWidth + speed + 'px';
            }
        }, 30)
    }
</script>