缓动原理的MyJquery

最新推荐文章于 2025-03-13 14:48:59 发布

原创最新推荐文章于 2025-03-13 14:48:59 发布 · 393 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了如何使用JavaScript实现DOM元素的水平和垂直缓动动画效果。通过设置定时器逐步改变元素的位置，使得元素能够平滑地移动到目标位置。文章详细解释了速度计算的方法，并提供了具体的代码实现。

//animation：让指定的DOM元素缓动到指定的位置
//左右缓动
//原理：物体位置= 物体本身的位置+（目标位置-物体本身的位置）/10
function animation(obj,target){
	clearInterval(obj.timer);//清除定时器
	obj.timer = setInterval(function(){
		var speed= (target-obj.offsetLeft)/10;
		speed= speed>0?Math.ceil(speed):Math.floor(speed);
		div.style.left= div.offsetLeft + speed + "px";//求出speed的速度
		if(obj.offsetLeft == target){	
			clearInterval(obj.timer)
		}	
	},30)
   }



//垂直缓动
//原理:同上
function animation(obj.target){
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
		var speed= (target- obj.offsetLeft)/10;
		speed= speed>0?Math:ceil(speed):Math.floor(speed);
		div.style.top =div.offsetTop +speed + "px";
		if(obj.offsetTop == target){	
			clearInterval(obj.timer)
		} 
	},30)
   }

//函数scroll（).top
function(){
	top:document.body.scrollTop+document.getElement().scrollTop,
	left:document.body.scrollLeft+document.getElement().scrollLeft
}