<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缓冲动画效果</title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
position: absolute;
top: 0px;
left: -200px;
background-color: #b10d1c;
}
#share{
width: 30px;
height: 50px;
position: absolute;
left: 200px;
top: 75px;
background-color: #3c6dcb;
color: #ffffff;
text-align: center;
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onload=function () {
var odiv1=document.getElementById('div1'),
share=document.getElementById('share');
odiv1.onmouseover=function(){
startMove(10,0);
}//最好使用匿名函数来调用函数
// odiv1.onmouseout="startMove(10,0)";
odiv1.onmouseout=function(){
startMove(10,-200);
}
var timer=null
function startMove(speed,itarget) {
clearInterval(timer);
timer=setInterval(function () {
speed=(itarget-odiv1.offsetLeft)/10;
if(odiv1.offsetLeft==itarget){
clearInterval(timer)
}
else {
if(odiv1.offsetLeft>itarget){
speed=(odiv1.offsetLeft-itarget)/10;
// speed=speed>0?Math.ceil(speed):Math.floor(speed);
speed=Math.ceil(speed);
odiv1.style.left=odiv1.offsetLeft+(-speed)+'px';
}
else{
speed=(itarget-odiv1.offsetLeft)/10;
// speed=speed>0?Math.ceil(speed):Math.floor(speed);
speed=Math.ceil(speed);
odiv1.style.left=odiv1.offsetLeft+speed+'px';
}
}
},30);
}
}
</script>
</head>
<body>
<div id="div1"><span id="share">分享</span> </div>
</body>
</html>
如果(目标值-当前值)/10 不能整除的话。运动到最后，是1~9之间的数字来除以10，结果是个小于1的小数，如果向下取整，那就是0，speed=0，意味着不再发生变化。也就是说，如果用Math.floor(speed),最后不到10个像素的时候，就不会动了。