回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再去执行传进去的这个函数，这个过程就叫做回调。
回调函数的位置：写到定时器结束的位置。
以下例子为：当按下按钮移动到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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
