动画函数添加回调函数

最新推荐文章于 2022-08-17 01:11:31 发布

hcoke

最新推荐文章于 2022-08-17 01:11:31 发布

阅读量384

点赞数

分类专栏：学习笔记 JavaScript 文章标签：前端 JavaScript

本文链接：https://blog.csdn.net/m0_62962469/article/details/124079179

版权

学习笔记同时被 2 个专栏收录

63 篇文章 0 订阅

订阅专栏

JavaScript

40 篇文章 0 订阅

订阅专栏

回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再去执行传进去的这个函数，这个过程就叫做回调。

回调函数的位置：写到定时器结束的位置。

以下例子为：当按下按钮移动到800后该元素的背景色变红。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				position: absolute;
				top: 50px;
				left: 0;
				width: 300px;
				height: 300px;
				background-color: skyblue;
			}
	
		</style>
	</head>
	<body>
		<button type="button" class="btn800">
			按下按钮开始移动到800
		</button>
		<button type="button" class="btn500">
			按下按钮开始移动到500
		</button>
		<div>
			
		</div>
		<script type="text/javascript">
			var div = document.querySelector('div');
			var btn500 = document.querySelector('.btn500');
			var btn800 = document.querySelector('.btn800');
			function animate(obj, target,callback) {
				// console.log(callback);  //callback = function() {}
				clearInterval(obj.timer);
				obj.timer = setInterval(function() {
					var step = (target - obj.offsetLeft) / 10;
					//这里在进位时 负数应该往小取 整数应该往大取
					step = step > 0 ? Math.ceil(step) : Math.floor(step);
					if(obj.offsetLeft == target) {
						clearInterval(obj.timer);
						if(callback) {
							callback();
						}
					}
					//这里会产生小数，所以最后移动到的并不是实际我们想要的位置，有一点小的偏差 因此在上边我们对其进行取整
					obj.style.left = obj.offsetLeft + step + 'px';
				},15);
				
			}
			
			btn500.addEventListener('click', function() {
				animate(div,500);
			});
			btn800.addEventListener('click', function() {
				animate(div,800,function() {
					div.style.backgroundColor = 'red';
				});
			});
			//匀速动画就是 盒子是当前的位置 +固定的值 10
			//缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10
		</script>
	</body>
</html>