這是可運行的源碼：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>緩沖動畫</title> <style type="text/css"> body{padding: 0px;margin:0px;} #div1{ height: 200px; width: 200px; background: #abcedf; position: relative; left: -200px; } #share{ display: block; height: 150px; width: 50px; background: #666; position: absolute; left: 200px; top: 20px; } </style></head><body> <div id="div1"> <span id="share">分享</span> </div> <ul> <li>定時器</li> </ul> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ getIn(0);//寫目的地,不是起點 } oDiv.onmouseout = function(){ getIn(-200);//寫目的地,不是起點 } timer=null; function getIn(iTarget){ clearInterval(timer); timer = setInterval(function(){ var speed = 0; if(oDiv.offsetLeft<iTarget){ speed = 10; }else{ speed = -10; } if(iTarget == oDiv.offsetLeft){ clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft + speed+"px"; ?//可否調換？ } },30) } } </script></body></html>我在調換了JS結尾的代碼結果是oDiv沒有移動,console沒有報錯,于是我決定試試這兩者分別會彈出什么左圖oDiv.offsetLeft是-200可以理解,為什么右圖彈出空白？我用typeof查了發現是string,有沒有朋友解釋下為什么這里是空字符串？
速度動畫中不能用oDiv.offsetLeft代替Div.style.left的原因是什么
12只怕有心人
2016-09-29 22:23:23