javascript - 使用CSS移动对象

Question

我有一个图像对象数组:

var pics = ["pic1","pic2","pic3","pic4","pic5","pic6"]

我想循环并将 style.left 值设置为比当前值小 1。此循环迭代 100 次。

我在这里得到了一个很好的建议，那就是使用 css 来实现这一点。我创建了一种名为 move 的样式:

margin-left: -1px;

第一次循环时效果很好:

for (i = 0; i < 100; i++) { 
for (j = 0; j < 6; j++) { 
var image = document.getElementById(pics[j]);
image.className = image.className + " move"
}
}

问题是图像在第一次循环迭代后不会移动。有什么想法我能做什么吗？

Answer 1

图像在第一次迭代后不会移动，因为您正在应用将左边距设置为 -1 的移动类。请注意，它不会从当前左边距中减去 1，而是将其设置为 -1。

假设它以 10 的左边距开始。当它经历这个循环时，我认为您期望它的左边距为 9，以将其移动到靠近屏幕左侧的一个像素。相反，当它经历这个循环时，它将一直跳过 -1 作为左边距，因为您明确告诉它在移动类中执行此操作。

你真正想做的是使用 javascript 获取其当前的左边距，从中减去 1，然后将左边距重置为新的(现在少了 1)数字。

乍一看我认为this tutorial可以帮助你。