js封装动画函数

最新推荐文章于 2023-02-02 14:44:52 发布

原创最新推荐文章于 2023-02-02 14:44:52 发布 · 418 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #css #算法

javascript 专栏收录该内容

35 篇文章

订阅专栏

以下俩个封装动画函数一般用于一些特效(例:轮播图,手风琴,运动的小球等等)

匀速动画函数封装

function animate(element, target) {
	//先清理定时器，这样可以保证每次点击按钮都只产生一个定时器
	clearInterval(element.timeId);
	element.timeId = setInterval(function() {
		//获取div的当前位置
		var current = element.offsetLeft;
		//设置每次移动多少像素
		var step = 10;
		step = current < target ? step : -step;
		//每次移动后的位置
		current += step;
		//判断当前位置距离目标位置多少像素
		if (Math.abs(current - target) >= Math.abs(step)) {
			element.style.left = current + "px";
		} else {
			clearInterval(element.timeId);
			element.style.left = target + "px";
		}
	}, 10);
}

变速动画函数封装

//功能函数  变速
function animate(element, target) {
	//先清理定时器，这样可以保证每次点击按钮都只产生一个定时器
	clearInterval(element.timeId);
	element.timeId = setInterval(function() {
		//获取div的当前位置
		var current = element.offsetLeft;
		//设置每次移动多少像素
		var step = (target - current) / 10;
		step = step > 0 ? Math.ceil(step) : Math.floor(step);
		//每次移动后的位置
		current += step;
		element.style.left = current + "px";
		//判断如果到达目标位置
		if (current == target) {
			//清理定时器
			clearInterval(element.timeId);
		}
	}, 10);
}