demo代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
}
div {
width: 100px;
height: 100px;
background: red;
margin-top: 20px;
position: relative;
left: 0;
}
</style>
</head>
<body>
<button>运动到200</button>
<button>运动到400</button>
<div class="box">1</div>
<div class="box1">2</div>
<script type="text/javascript">
var btn1 = document.getElementsByTagName("button")[0];
var btn2 = document.getElementsByTagName("button")[1];
var box1 = document.getElementsByTagName("div")[0];
var box2 = document.getElementsByTagName("div")[1];
var timer = null;
function animation(ele,target,btn){
btn.onclick = function(){
clearInterval(timer);//使用定时器,首先要清除定时器
var speed = target > ele.offsetLeft ? 10 : -10;//定义运动速度
timer = setInterval(function(){
var val = target - ele.offsetLeft;
ele.style.left = ele.offsetLeft + speed +"px";
if(Math.abs(val) <= Math.abs(speed)){
ele.style.left = target + "px";
clearInterval(timer);
};
},30);
};
};
animation(box1,400,btn2);
animation(box1,200,btn1);
</script>
</body>
</html>