记录一下运动效果的思路

最新推荐文章于 2024-11-02 18:45:06 发布

fedawn

最新推荐文章于 2024-11-02 18:45:06 发布

阅读量299

点赞数

分类专栏：笔记 javascript 文章标签： timer function

本文链接：https://blog.csdn.net/fedawn/article/details/7376020

版权

笔记同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

javascript

10 篇文章 0 订阅

订阅专栏

1、从一个目标点到另一个目标点的运动效果：

	var timer=null;
	
	function 运动(){
		
		var 速度=5;
		
		if(obj.offsetLeft==目标位置){
			clearInterval(timer);
		}else{
			obj.style.left=obj.offsetLeft+速度+'px';
		} 
	}
	
	function 调用运动函数(){
		
		clearInterval(timer);
		
		timer=setInterval(function(){
			运动()
		},40);
	}

2、缓动运动效果：

	var timer=null;

	function 运动(目标值){
		var 速度=(目标值-当前值)/一个系数;
			速度=速度>0?Math.ceil(速度):Math.floor(速度);
		
		if(目标值==当前值){
			clearInterval(timer);	
		}else{
			obj.style.属性=当前值+速度+'px';
		}
	}
	
	function 调用运动函数(目标值){
		clearInterval(timer);
		setInterval(function(){
			运动(目标值);
		},30)
	}