使用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

回答

相关问题