<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
#demo{
100px;
height:100px;
background-color: pink;
position:absolute;
top:50px;
left:0px;
}
</style>
</head>
<body>
<button id="btn">开始</button>
<div id="demo"></div>
</body>
</html>
<script>
var demo=document.getElementById("demo");
var btn=document.getElementById("btn");
var timer=null;
var target=400;
btn.onclick=function () {
timer=setInterval(function(){
var step=(target-demo.offsetLeft)/10; //步长
step=step>0 ? Math.ceil(step) : Math.floor(step); //取整步长
demo.style.left=demo.offsetLeft+step+"px";//缓动动画原理：盒子本身的位置+步长（不断变化的）
if(demo.offsetLeft==target)
{
clearInterval(timer);
}
},10)
}
</script>
缓动效果原理：
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：
1，让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
2，核心算法：（目标值-现在的位置）/10 作为每次移动的距离 步长
timer=setInterval(function(){ var step=(target-demo.offsetLeft)/10 demo.style.left=demo.offsetLeft + step +"px"; },10)
3，停止的条件是：让当前盒子位置等于目标位置就停止定时器
if(demo.offsetLeft == target) { clearInterval(timer); }
4，注意步长值需要取整 判断步长是正值还是负值，如果是正值，步长往大了取整，如果是负值, 步长向小了取整
step = step >0 ? Math.ceil(step) : Math.floor(step);