思路：将某元素移动到指定位置======需传入2个参数。一个是要移动的元素element，另一个是指定的位置target。
获取元素的当前位置current，设置一个每次移动的距离step，设置定时器，通过多次循环移动，到达目标位置。根据当前位置和目标位置的距离判断是否需要执行循环
以本文为例，这里有几个坑：
1、元素要移动，需要脱离文档流，即css样式中需要使用绝对定位
2、每触发一次点击，就产生一个定时器，当不停地点击按钮时，元素移动的速度不断加快
===》解决：只设置一个定时器，且在执行定时器之前先清理一次定时器，防止上次的操作留下影响。
只设置一个定时器可以根据对象的属性，对象点出来的属性有且只有一个。即element.timer1=setInterval();
3、获取元素的当前位置，需要用offsetLeft / offsetTop / offsetWidth / offsetHeight,得出的结果是number类型，没有px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 130px;
background: red;
position: absolute;
left: 20px;
}
</style>
</head>
<body>
<input type="button" value="按钮1" id="btn"/>
<input type="button" value="按钮2" id="btn2"/>
<div id="dv">
</div>
<script>
document.getElementById("btn").onclick=function(){
animate(document.getElementById("dv"),400);
};
document.getElementById("btn2").onclick=function(){
animate(document.getElementById("dv"),1600);
};
//把任意元素移动到指定的目标位置
function animate(element,target){
clearInterval(element.timer1);
element.timer1=setInterval(function(){//element是一个对象，对象点出来的属性有且只有一个，避免多次点击按钮产生多个定时器
var current=element.offsetLeft; //获取当前位置，数字类型，没有px。
//不可以用element.style.left，因为该写法只能获取到行内样式，不能获取到<style></style>标签内的样式
var step=10;//每次移动的距离
step=current<target?step:-step;//step的正负表示了向左或是向右移动
current+=step; //计算移动到的位置，数字类型，没有px
if(Math.abs(target-current)>Math.abs(step)){//当离目标位置的距离大于一步移动的距离
element.style.left=current+"px";//移动
}else{//当间距小于一步的距离，则清理定时器，把元素直接拿到目标位置
clearInterval(element.timer1);
element.style.left=target+"px";
}
},20);
}
</script>
</body>
</html>下载本文