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

最新推荐文章于 2024-06-25 10:49:23 发布

Annaluo

最新推荐文章于 2024-06-25 10:49:23 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签：鼠标动画 javascript jsp java

本文链接：https://blog.csdn.net/Annaluo/article/details/77507872

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

描述：用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>