使用Javascript移动图片

我有一个问题，或者至少我认为我有。我使用一个非常简单的近乎递归的Javascript函数来移动两张图片。然而，在我四岁的电脑上，这并不是一个平稳的运动。我已经缩小了图片的大小，但是

代码不是递归的，因为我在调用之间使用setTimeout

代码如下： （空载）

simgaray=[“imgLaVera”、“imgAlmanzor”、“imgRosarito”、“imgBaile”]；
iImg=simgaray.length-1；
设置超时（'playShow（0，+iImg+'），4000）；
功能播放节目（iVisible，iImgs）
{
if（iVisible

---

有什么建议吗？

看起来您每75毫秒就要推进一次动画。也就是说，大约每秒13步。您至少需要每秒24步才能平稳移动。我建议33毫秒（约每秒30步）或16毫秒（每秒60步）。16毫秒是jQuery用于动画的时间（jQuery在这方面非常擅长）。

似乎每75毫秒推进一次动画，即每秒13步。您至少需要每秒24步才能平稳移动。我建议33毫秒（约每秒30步）或16毫秒（每秒60步）。16毫秒是jQuery用来制作动画的（jQuery在这方面做得非常好）。

我建议您使用一个库来帮助您实现这一点。例如，jQuery有一些例子：

我建议您使用一个库来帮助您实现这一点。例如，jQuery有一些例子：

在

playMove

中的以下设置将提供您想要的：

i = i + 1;
setTimeout('playMove( ... )', 15);

你的动画看起来很慢，因为你很少改变图像的位置，并且有很大的跳跃。如果你想让它变得更平滑，你应该更频繁地改变位置，但每一步都要减少像素

Old: 5 px / 75 ms
New: 1 px / 15 ms

---

旁注

如果您真正关心速度，请不要在每次调用渲染函数（

playMove

）时都选择元素。 在调用

setTimeout

之前，在

show

的末尾执行此操作：

// select elements by their id and replace them in the array
for (var i = sImgArray.length; i--;) {
  sImgArray[i] = document.getElementById( sImgArray[i] );
}

现在你可以简单地写了

sImgArray[iLeft]

而不是

document.getElementById(sImgArray[iLeft])

在playMove和playShow中

其次，应该尽量避免将函数作为文本参数传递，因为它们需要单独求值

// GOOD
setTimeout(function() {
    playShow(iVisible, iImgs);
}, 4000);

// BAD
setTimeout('playShow(' + iVisible + ',' + iImgs + ')', 4000)

第三，这是我一生中见过的最丑陋的事情：

setTimeout('show.call(\'index\');', 6000);

不要使用

此

引用将参数传递给函数。这就是普通参数列表的用途

setTimeout(function() {
    show('index');
}, 4000);

然后您的函数

show

变成如下所示：

function show( page ) // pass string as an argument
{
    if ( page == "index" )
    {
    // ...

---

playMove

中的以下设置将满足您的需要：

i = i + 1;
setTimeout('playMove( ... )', 15);

你的动画看起来很慢，因为你很少改变图像的位置，并且有很大的跳跃。如果你想让它变得更平滑，你应该更频繁地改变位置，但每一步都要减少像素

Old: 5 px / 75 ms
New: 1 px / 15 ms

---

旁注

如果您真正关心速度，请不要在每次调用渲染函数（

playMove

）时都选择元素。 在调用

setTimeout

之前，在

show

的末尾执行此操作：

// select elements by their id and replace them in the array
for (var i = sImgArray.length; i--;) {
  sImgArray[i] = document.getElementById( sImgArray[i] );
}

现在你可以简单地写了

sImgArray[iLeft]

而不是

document.getElementById(sImgArray[iLeft])

在playMove和playShow中

其次，应该尽量避免将函数作为文本参数传递，因为它们需要单独求值

// GOOD
setTimeout(function() {
    playShow(iVisible, iImgs);
}, 4000);

// BAD
setTimeout('playShow(' + iVisible + ',' + iImgs + ')', 4000)

第三，这是我一生中见过的最丑陋的事情：

setTimeout('show.call(\'index\');', 6000);

不要使用

此

引用将参数传递给函数。这就是普通参数列表的用途

setTimeout(function() {
    show('index');
}, 4000);

然后您的函数

show

变成如下所示：

function show( page ) // pass string as an argument
{
    if ( page == "index" )
    {
    // ...

---

---

“几乎”递归？那是不是有点怀孕了？哈哈哈，我猜，有点。我应该知道我是为受过教育的读者写的+还有，我避免了递归，因为我不想让访问我网站的web浏览器陷入困境。也许代码没有什么问题。。。但是我怎样才能改进图形呢？我的笔记本电脑已经有四年的历史了，绝对不是一台现代机器，但它应该能够毫无问题地处理我的网站？那是不是有点怀孕了？哈哈哈，我猜，有点。我应该知道我是为受过教育的读者写的+还有，我避免了递归，因为我不想让访问我网站的web浏览器陷入困境。也许代码没有什么问题。。。但是我怎样才能改进图形呢？我的笔记本电脑已经四年了，绝对不是一台现代化的机器，但它应该能够毫无问题地处理我的网站！既然你可以专注于完成工作，为什么还要写这些细节呢？我知道jQuery，但没有费心去调查！既然你可以专注于完成工作，为什么还要写这些细节呢？我知道jQuery，但没有费心去调查。在开发中尝试过，但没有雪茄烟。图像移动得更快，但不平稳。我猜是我的电脑，但为什么？硬件是旧的，但没有坏到不能正确渲染图像。我能做些什么来优化图形吗？这不是你的电脑。见我的答案。在开发中尝试过，但没有c