JS-多物体运动（所有物体做相同的运动）_怎么用js代码在unity中很多物体做同一种运动-优快云博客

本文链接：https://blog.youkuaiyun.com/Annaluo/article/details/77683331

本文介绍了一个使用JavaScript实现的简单动画效果，当鼠标悬停在列表项（LI）上时，其高度会从200px平滑过渡到400px。此效果适用于多个列表项，并通过定时器实现平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果描述：当鼠标放上去li的高度由200PX变成400PX，（所有的li变化相同，都是高度的变化）

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS多物体动画2</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        ul li{
            width: 200px;
            height: 100px;
            background: yellow;
            margin-bottom: 20px;
            border: 4px solid;

        }
    </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);
                }

            }
        }
        function getStyle(obj,attr) {
            //currentStyle针对IE浏览器

            if(obj.currentStyle){
                return obj.currentStyle[sttr];
            }
            //getComputedStyle针对firefox浏览器
            else{
                return getComputedStyle(obj,false)[attr];
            }

        }
        //var timer = null;

        function startMove(obj,iTarget) {

            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                //var icur = parseInt(getStyle(obj,'width'));
                var icur = parseInt(getStyle(obj,'height'));
                var speed = (iTarget-icur)/8;
                speed = speed >0?Math.ceil(speed):Math.floor(speed);
                if(icur == iTarget){
                    clearInterval(obj.timer);
                }
                else {
                    //obj.style.width = icur+speed+'px';
                    obj.style['height'] = icur+speed+'px';
                }
            },30)

        }
    </script>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>