Question

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

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

代码如下：（有载）

sImgArray = ["imgLaVera", "imgAlmanzor", "imgRosarito", "imgBaile"];
iImg = sImgArray.length - 1;
setTimeout('playShow(0,' + iImg + ')', 4000);

function playShow(iVisible, iImgs)
{
    if( iVisible < iImgs )
        iLeft = iVisible + 1;
    else
        iLeft = 0;

    imgLeft = document.getElementById(sImgArray[iLeft]);
    imgLeft.style.left = "-" + imgLeft.width + "px";
    playMove(-imgLeft.width, iVisible, iImgs);
}
function playMove(i, iVisible, iImgs)
{
    if( iVisible < iImgs )
        iLeft = iVisible + 1;
    else
        iLeft = 0;

    imgLeft = document.getElementById(sImgArray[iLeft]);
    imgRight = document.getElementById(sImgArray[iVisible]);

    if( i < 0 )
    {
        i = i + 5;
        imgLeft.style.left = (i - 2) + "px";
        imgRight.style.left = (i + imgLeft.width) + "px";
        setTimeout('playMove(' + i + ', ' + iVisible + ',' + iImgs + ')', 75);
    }
    else
    {
        if( iVisible < iImgs )
            iVisible = iVisible + 1;
        else
            iVisible = 0;
        setTimeout('playShow(' + iVisible + ',' + iImgs + ')', 4000)
    }
}

有什么建议吗？

Answer 1

好像你每75毫秒推进动画一次。那是ca.每秒13步。每秒至少需要24步才能顺利移动。我推荐33毫秒（每秒约30步）或16毫秒（每秒60步）。 16 ms是jQuery用于动画的东西（jQuery非常擅长这个）。

Answer 2

playMove中的以下设置可为您提供所需内容：

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

你的动画看起来很迟钝，因为你正在改变图像位置很少和大跳。如果您希望更顺畅，您应该更多地经常更改位置，但每个步骤中的像素更少。

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

图片的标题说明

如果您真的关心速度，请不要在渲染函数（playMove）的每次调用中选择元素。在致电show之前，在setTimeout结束时执行此操作：

// 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);

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

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

然后你的函数show变成这样：

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

Answer 3

我建议您使用库来帮助您实现这一目标。例如 jQuery ，其中有一些例子：http://api.jquery.com/animate/

用Javascript移动图片

3 个答案: