4

時間の経過とともに「左」スタイルを調整することで要素を移動する関数を作成しようとしています。現在、現在の形ではまったく機能していません。

    varタブ;
    var tabPos;

    関数init（）{
        tab = document.getElementById（ "tab"）;
        tabPos = 10.8;
        tab.style.left = tabPos +'％';
    }

    関数moveOver（）{
        if（tabPos <15.8）
            {{
                setTimeout（function moveOver（）、100;
                tabPos = tabPos + 0.1;
                tab.style.left = tabPos +'％';
            }
        else if（tabPos> 15.8）
            {{
                setTimeout（function moveOver（）、100;
                tabPos = tabPos-0.1;
                tab.style.left = tabPos +'％';
            }
     }

init関数は要素の初期位置を正常に設定しましたが、コードにmoveOver関数を追加しましたが、要素の位置は設定されなくなりました。

4

3 に答える 3

1

関数呼び出しの括弧setTimeoutは閉じられていません。

function moveOver( ) {
    if (tabPos < 15.8)
        {
            setTimeout(function moveOver( ), 100;
            tabPos = tabPos + 0.1;
            tab.style.left = tabPos + '%');  // <----
        }
    else if (tabPos > 15.8)
        {
            setTimeout(function moveOver( ), 100;
            tabPos = tabPos - 0.1;
            tab.style.left = tabPos + '%'); // <----
        }

 }

ブラウザからJavaScriptエラーが報告されているはずです。

于 2012-11-29T06:41:59.640 に答える
1

setTimeout(function moveOver( ), 100;に変更setTimeout(moveOver, 100);

于 2012-11-29T06:42:33.513 に答える
1

行を変更します。

setTimeout(function moveOver( ), 100;

に

setTimeout(moveOver, 100);

function moveOver( )は有効なJavaScript構文ではありません。また、角かっこ（またはかっこ）が一致していません。構文エラーがあるため、コードは機能しません。

の場合setTimeout、最初のパラメータとして関数を渡すことになっているので、mouseOverまたはfunction(){mouseOver();}が機能します。

スクリプトのもう1つの問題は、要素が絶えずジャンプしているのが見えることです。

2つの条件があります：tabpos < 15.8とtabpos > 15.8。実行が両方のif-blockのいずれにも入らない条件はtabpos == 15.8...ですが、JavaScriptNumberは実際には浮動小数点数です。精度エラーのおかげで、15.8 == 15.7 + 0.1結果はになります。これは、とまったく同じではないfalseことを示しています。実際には、ほぼ等しいです...15.815.7 + 0.115.7 + 0.115.799999999999999

tabPosしたがって、たとえば、には整数値を使用し、スタイルを設定する場合にのみ158それを除算することをお勧めします。10

コードの考えられる結果：

var tab;
var tabPos;

function init() {
    tab = document.getElementById("tab");
    tabPos = 108;
    tab.style.left = tabPos / 10 + '%';
}

function moveOver( ) {
    if (tabPos < 158)
        {
            setTimeout(moveOver, 100);
            tabPos = tabPos + 1;
            tab.style.left = tabPos / 10 + '%';
        }
    else if (tabPos > 158)
        {
            setTimeout(moveOver, 100);
            tabPos = tabPos - 1;
            tab.style.left = tabPos / 10 + '%';
        }
 }
于 2012-11-29T06:43:44.560 に答える