<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 100px;
height: 100px;
background-color: brown;
position: absolute;
left: 0;
top: 100px;
}
#line {
position: absolute;
width: 1px;
height: 100%;
left: 800px;
top: 0;
background-color: #000;
}
</style>
</head>
<body>
<button id="btn">移动</button>
<div id="box"></div>
<!-- 运动的终点线 -->
<div id="line"></div>
<script>
/* 获取按钮 */
var btn = document.getElementById('btn')
/* 添加点击事件 */
btn.onclick = function() {
/* 获取盒子1 */
var box = document.getElementById('box')
/* 调用函数 */
fn({
el: box,
target: 800,
callback: function() {
fn({
el: box,
target: 400,
attr: "top"
})
}
})
}
/* 封装为函数
el:运动的物体
target:目的地
callback:回调函数
step:速度
attr:运动的属性
*/
function fn(obj) {
var el = obj.el;
var target = obj.target;
var callback = obj.callback;
var step = obj.step;
var attr = obj.attr;
/* 判断是否为空 */
if (!el.timer) {
/* 判断是否有值,如果没有则赋值默认值 */
if (!attr) {
attr = 'left'
}
if (!step) {
step = 7
}
/* 获取元素的样式 */
var res = getComputedStyle(el)[attr]
/* 字符串转数字 */
res = parseInt(res)
/* 判断移动的方向 */
if (res - target > 0) {
//求绝对值取反。
step = -Math.abs(step);
}
/* 添加定时器 */
el.timer = setInterval(function() {
/* 获取元素的样式 */
var res = getComputedStyle(el)[attr]
/* 字符串转数字 */
res = parseInt(res)
/* 得出位置 */
var ad = res + step
/* 如果step大于0且ad等于target或...清除定时器 */
if ((step > 0 && ad >= target) || (step < 0 && ad <= target)) {
//结束运动 : 清除定时器,将物体直接运动到终点
clearInterval(el.timer);
el.style[attr] = target + 'px'
//清除el元素上的定时器属性,以便下一次运动开始。
el.timer = null;
/* 上面结束后,调用回调函数 */
if (callback) {
//判断callback是否存在,存在才会执行该函数。
callback();
}
} else {
/* 否则继续执行 */
el.style[attr] = ad + 'px'
}
}, 20)
}
}
</script>
</body>