JavaScript运动框架——多物体运动-优快云博客

本文链接：https://blog.youkuaiyun.com/DebbyOctober/article/details/108745353

本文介绍了使用JavaScript创建多物体运动框架，特别是在鼠标移入和移出时如何改变及恢复多个独立元素的宽度。

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

含义：多物体即多个盒子
实现效果：要求鼠标移入时改变每个单独盒子的宽width，移出返回原样

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		*{margin: 0;padding: 0;}
		ul li{
			width: 200px;
			height: 100px;
			background: #4682B4;
			margin-top: 20px;
		}
	</style>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		
		<script>
		//由于移入的不是box,而是li,因此需要获取所有的li
    var lis = document.getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
	lis[i].onmouseover = function(){
		animate(this,400);//本身盒子的宽为200px，现在移入变为400
	}
	lis[i].onmouseout = function(){
		animate(this,200);  //鼠标移出再回到200px这个点
	}
}

    function animate(dom,target){
    //dom就是this,设置dom使得每一个盒子都有单独的一个timer
    clearInterval(dom.timer);
    dom.timer = setInterval(function(){

        var speed = (target-dom.offsetWidth)/10;

        speed = speed>0 ?Math.ceil(speed):Math.floor(speed);

        if(target == dom.offsetLeft){

            //停止定时器
            clearInterval(dom.timer);

        }else{
            dom.style.width = dom.offsetWidth + speed +"px";
        }
    },30)
}

		</script>
	</body>
</html>