我想编写一个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>
该代码有很多问题，这甚至不好笑...让我们看看...
setTimeout，与eval一样邪恶。slidePerMS，但之后再也没有更改，导致div一遍又一遍地移到完全相同的位置。仅此而已。请尝试以下方法：
<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>
您有很多问题。
您正在将setTimeout视为sleep。不要那样做它根本不像sleep，它在给定的时间段后运行一个函数，但不会暂停其他任何事情的执行。
这意味着您只需反复敲击该功能3000次，这就是锁定浏览器的原因。
应该使用for，而不是使用setInterval循环。
不要将字符串传递给setInterval（或setTimeout），它会被规避，这很慢且难以调试，并且会破坏作用域。而是传递一个函数。
在changePosition内部，您正在尝试使用名为slidePerMS的变量，其为undefined，因为它是在slideIt的范围内定义的。
您还试图将left设置为"'123px'"。您不能在CSS中引用您的值。
摆脱两个'。
这就是为什么您看不到任何变化的原因。 CSS中忽略了无效值。
我的建议是使用CSS transition和transform属性控制direction，distance和slideDuration。
就像tiny-swiper一样：