封装的运动函数 doMove

最新推荐文章于 2024-06-15 23:03:23 发布

原创最新推荐文章于 2024-06-15 23:03:23 发布 · 置顶 · 519 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#运动函数 #运动函数 doMove #原生运动函数 #JS封装的运动函数 doMove

Javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个封装良好的JavaScript平滑运动函数doMove，该函数能够控制DOM元素按指定方向和速度平滑移动到目标位置，并支持嵌套调用及回调函数。适用于网页元素动画效果的开发。

封装好的运动函数 doMove

function doMove ( obj, attr, dir, target, endFn ) {
	dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
	clearInterval( obj.timer );
	obj.timer = setInterval(function () {	
		var speed = parseInt(getStyle( obj, attr )) + dir;			
		if ( speed > target && dir > 0 ||  speed < target && dir < 0  ) {
			speed = target;
		}
		obj.style[attr] = speed + 'px';
		if ( speed == target ) {
			clearInterval( obj.timer );
			endFn && endFn();
		}
	}, 30);
}
function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }

解析：doMove ( obj, attr, dir, target, endFn )

obj --> 要运动的对象 // div...

attr --> 运动的相对方向 // top/left ，也可以是height / width

dir --> 运动速度

target --> 目标点，要到达的位置

endFn -->回调函数，可有可无，

示例：回调函数里面可以嵌套

doMove ( oDiv, 'left', 12, 900, function () {
		doMove ( oDiv, 'top', 34, 500 ,function(){
			doMove ( oDiv, 'left',20,20,function(){
				doMove ( oDiv, 'top',20,40);
			});
		});
	});