JS实现简单的多物体运动动画

来源：互联网发布：unity3d游戏编辑：程序博客网时间：2024/06/05 19:41

描述：用JS实现简单的多物体运动动画，当鼠标放在不同li上时，li会由宽200PX慢慢变成400PX，当鼠标移开之后li恢复原状。

效果图如下所示：

具体代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JS多物体动画</title>    <style>        body{            margin: 0;            padding: 0;        }        ul,li{            list-style: none;        }        ul li{            width: 200px;            height: 100px;            background: yellow;            margin-bottom: 20px;        }    </style>    <script>        window.onload = function () {            var aLi = document.getElementsByTagName('li');            for(var i = 0;i<aLi.length;i++){                aLi[i].timer = null;                aLi[i].onmouseover = function () {                    startMove(this,400);                }                aLi[i].onmouseout = function (){                    startMove(this,200);                }                }            }        //var timer = null;        function startMove(obj,iTarget) {            clearInterval(obj.timer);            obj.timer = setInterval(function () {                var 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></head><body><ul>    <li></li>    <li></li>    <li></li></ul></body></html>

阅读全文

0 0