封装好⼀个⽅法,让外部传⼊⽬的地的值,即让物体停下来的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>深度讲解单物体运动框架</title>
<style type="text/css">
#div1{
width:200px;
height:200px;
left:10px;
top:50px;
position:absolute;
background:red;
}
</style>
</head>
<body>
<button onclick="moving(500)">点击我开始运动</button>
<div id="div1"></div>
<script type="text/javascript">
var oDiv = document.getElementById('div1')
var timer = null
function moving(target){
var speed = 0
if(oDiv.offsetLeft<target){
speed = 1
}else{
speed = -1
}
timer = setInterval(function(){
if(Math.abs(target-oDiv.offsetLeft)<=1){
oDiv.style.left = target + 'px'
clearInterval(timer)
}else{
oDiv.style.left = oDiv.offsetLeft + speed + 'px'
}
},30)
}
</script>
</body>
</html>
效果图: