使用javascript滑動div

我想寫一個javascript代碼，它將在特定方向，距離和某些給定時間內滑動div。我寫了這個小腳本。但根本不起作用。瀏覽器變得緩慢。沒有可見的位置變化。有人能告訴我如何實現結果？我知道有很多現成的庫可以很容易地完成這項工作。但我只是想試一試。使用javascript滑動div

<script type="text/javascript" language="javascript"> 
    var element = ''; 
    var slidePerMS = ''; 
    function slideIt(ele, direction, distance, slideDuration){ 
     element = ele; 
     var i=0; 
     slidePerMS = distance/(slideDuration*1000); 
     for(i=0; i<3000; i++){ 
      setTimeout("changePosition()",1); 
    } 
} 
function changePosition(){    
    var currElement = document.getElementById(element); 
    currElement.style.left = "'"+slidePerMS+"px'"; 
} 
</script>

來源

2011-11-08 Shades88

SOO很多事情錯代碼它甚至不是滑稽......讓我們來看看...

您試圖渲染1000 FPS的動畫。這對瀏覽器根本不可能。
您傳遞一個字符串作爲參數到setTimeout，這與eval一樣邪惡。
您設置了slidePerMS一次，但從未改變它，導致div被一次又一次移動到完全相同的位置。
您正在設置帶有額外引號的樣式 - 您是否將引號放在CSS文件中？

這是僅舉幾例。試試這個：

<script type="text/javascript" language="javascript"> 
function slideIt(elem, direction, distance, slideDuration){ 
    var elmt = document.getElementById(elem), 
     i=0, step = distance/(slideDuration*20), 
     stepper = setInterval(function() { 
      i = Math.min(distance,i+step); 
      elmt.style.left = i+'px'; 
      if(i == distance) clearInterval(stepper); 
     },50); 
} 
</script>

來源

2011-11-08 13:18:03

感謝您的幫助。現在我知道，我是一個編程小白：S – Shades88

你有很多問題。

您對待setTimeout就好像它是sleep一樣。不要這樣做。它根本不像sleep，它在給定的時間段後運行一個函數，但不會暫停其他任何操作。

這意味着您只需重複敲擊該功能3000次，這就是鎖定瀏覽器的原因。

而不是使用for循環，你應該使用setInterval。

不要傳遞一個字符串到setInterval（或setTimeout），它會被取消，這是緩慢和難以調試，並且它打破範圍。改爲傳遞一個函數。

內changePosition您要使用一個名爲slidePerMS變量，它是undefined，因爲它是在slideIt範圍限定。

您也在嘗試將left設置爲"'123px'"。你不能在CSS中引用你的值。

擺脫' s。

這就是爲什麼你看不到任何變化。 CSS中忽略無效值。

來源

2011-11-08 13:16:31 Quentin

使用javascript滑動div

回答

相關問題