Question

我想写一个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>

Answer 1

SOO很多东西都错了，这个代码甚至不好笑......让我们看看......

您正在尝试渲染1,000 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>

Answer 2

你有很多问题。

您正在将setTimeout视为sleep。不要那样做。它与sleep完全不同，它在给定的时间段后运行一个函数，但不会暂停执行任何其他操作。

这意味着您只需重复敲击该功能3000次，这就是锁定浏览器。

您应该使用for。

，而不是使用setInterval循环

不要将字符串传递给setInterval（或setTimeout），它会被唤醒，这很慢且难以调试，并且它打破了范围。传递一个函数。

在changePosition内，您尝试使用名为slidePerMS的变量undefined，因为它是在slideIt范围内定义的。

您还尝试将left设置为"'123px'"。你不能在CSS中引用你的值。

摆脱' s。

这就是为什么你看不到任何变化。 CSS中将忽略无效值。

使用javascript滑动div

2 个答案: