                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS動畫效果

為什么一定要用math.ceil向上取整才正確？

<!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>