js封装的运动函数适用于获取样式和样式变化（宽，高，透明度等）_js 运动函数中透明度结束之后宽高回不到原来的值-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40196539/article/details/98477850

本文介绍了一个封装良好的JavaScript动画函数startMove，该函数能够平滑地改变DOM元素的样式属性，如位置和透明度，直至达到目标值。通过定时器和逐帧更新样式，实现流畅的动画效果。实例演示了如何使用此函数响应鼠标悬停事件，使元素从屏幕外滑入。

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

封装的js函数 startMove.js

//获取样式的函数
function getStyle(obj,attr){
	if(window.getComputedStyle){
		return getComputedStyle(obj,null)[attr];
	}
	return obj.currentStyle[attr];
}
/*
 参数
 * domobj要改变的dom对象
 * 样式属性的目标值  json对象{attr1:val1,attr2:val2}
 * fn 是一个回调函数，等待其它属性全部改变完，再去执行另外的属性改变
 * */

function startMove(domobj,json,fn){
	clearInterval(domobj.timer);
	
	
	domobj.timer = setInterval(()=>{
		//假设属性都到了目标值
		let flag = true;
		for(let attr in json){
		//取目标值
		let iTarget = json[attr];
		//考虑透明度
		if(attr == "opacity"){
			var iCur = parseInt(getStyle(domobj,"opacity")*100);
		}else{
			var iCur = parseInt(getStyle(domobj,attr));
		}
		
		//取每次的移动距离
		let iSpeed = (iTarget - iCur)/8;
		iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
		
		if(attr == "opacity"){
			domobj.style.opacity = (iCur + iSpeed)/100;
			domobj.style.filter = "alpha(opacity = "+(iCur + iSpeed)+")";
		}else{
			domobj.style[attr] = iCur + iSpeed + "px";
		}
		
		if(iCur != iTarget){
			flag = false;
		}	
	}
	//if如果条件满足，那么全部到达了目标值
	if(flag){
		clearInterval(domobj.tiemr);
		//避免用户不传第三个 参数
		if(fn){
			fn();
		}
	}
	},20)
}

实例调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>分享到</title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			div{
				width: 500px;
				height: 300px;
				background: deeppink;
				position: relative;
				left: -500px;
				}
				div span{
					display: block;
					position: absolute;
					left: 500px;
					top: 50px;
					width: 30px;
					text-align: center;
					line-height: 30px;
					height: 100px;
					background: #000000;
					color: #fff;
				}
		</style>
	</head>
	<body>
		<div>
			<span>分享到:</span>
		</div>
		<script src="startMove.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let oDiv = document.querySelectorAll("div")[0];
			let oSpan = document.querySelectorAll("span")[0];
			oSpan.onmouseover = function(){
				//startMove(oSpan,{left:1000});
				startMove(oDiv,{left:0});//调用startMove函数
			}
			oSpan.onclick = function(){
				startMove(oDiv,{left:-500});//调用startMove函数
			}
		</script>
	</body>
</html>