步骤
- 获取所需要的页面元素
- 给按钮注册点击事件，写出事件函数，事件函数里面调用封装的动画函数
- 封装动画函数
- 明确动画函数有两个参数，一个参数是运动的对象，另一个函数是目标距离
- 首先先清理一次定时器（否则会不受控制）
- 获取传入对象的当前位置
- 定义一个变量记录每次对象移动多少距离
- 如果传入对象的当前距离小于目标距离则走正数，否则走负数
- 确定每次移动后的距离
- 判断传入对象是否到达目标位置，如果目标距离-当前距离的绝对值 > 每次要移动的距离的绝对值，那么传入对象正常移动，否则清理定时器，直接到达目标位置
- 对象要移动就要脱离文档流
- ** 如果样式的代码在style标签内设置，那么外面就无法获取到他的值，所以需要用offset来获取**
- 如果样式的代码在标签的属性里设置，那么它就可以被获取
详细代码
<body>
<input type="button" value="移动到400px" id="btn1">
<input type="button" value="移动到800px" id="btn2">
<div id="box"></div>
<script>
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var box = document.getElementById('box');
btn1.onclick = function () {
animation(box, 400);
}
btn2.onclick = function () {
animation(box, 800);
}
function animation (element, target) {
//先清理定时器
clearInterval(element.timeId);
element.timeId = setInterval (function() {
//获取div当前位置，
var current = element.offsetLeft;//数据类型，没有px
// div 每次移动多少像素
var step = 10;
//当前位置小于目标位置，走正数，否则走负数
step = current < target ? step : -step;
//每次移动后的距离
current += step;
//判断当前位置是否到达目标位置
if(Math.abs(target - current) > Math.abs(step)) {
element.style.left = current + 'px';
}else {
clearInterval(timeId);
//最后一次剩余要走的步数小于每次要走的步数，那么直接到达终点
element.style.left = target + 'px';
}
},20);
}
</script>
</body>