JavaScript之多物体运动框架_前端多物体运动框架-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44586361/article/details/87554557

本文介绍了一个使用CSS和JavaScript实现的简单动画效果，当鼠标悬停在div上时，div的高度或宽度会平滑地变化。通过自定义函数startMove，实现了元素尺寸的渐变动画。

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

列子：多个div,变宽，变高
注：多物体运动框架中所有东西都不能公用

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style>
div{width:200px;height:200px;background: yellow;margin:10px;float:left;border:2px solid black;}
</style>

<script>
window.function()
{
	var oDiv1=document.getElementById('div1');
	var oDiv2=document.getElementById('div2');
	oDiv1.onmouseover=function()
	{
		startMove(this,'height',400);
	}
	oDiv1.onmouseout=function()
	{
		startMove(this,'height',200);
	}
	oDiv2.onmouseover=function()
	{
		startMove(this,'width',400);
	}
	oDiv2.onmouseout=function()
	{
		startMove(this,'width',200);
	}
}
	function getStyle(obj,name)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[name];
	}
	else
	{
		return getComputedStyle(obj,false)[name];
	}
}

	var timer=null;
	function startMove(obj,attr,iTarget)
	{
       clearInterval(obj.timer);
       obj.timer=setInterval(function(){
       var cur=parseInt(getStyle(obj,attr));
       var speed=(iTarget-cur)/6;
       speed=speed>0?Math.ceil(speed):Math.floor(speed)
       if(cur==iTarget)
       {
       	clearInterval(obj.timer);
       }
       else
       {
       	obj.style[attr]=cur+speed+'px';
       }
       },30)
	}
</script>
</head>
<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
</body>
</html>

效果图如下所示：
在这里插入图片描述