0

画像の場合と同じように、ページ上でテーブルを移動する際に問題が発生していると言いたいのですが。しかし、それは問題があります。座標または方程式を使用して画像を円内で移動する方法はすでに知っています。これに座標を適用してみましたが、テーブルが正しく表示されたり非表示になったりしても、テーブルがまったく動かない。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 100%;
        }
        .auto-style2 {
            width: 78px;
            height: 63px;
        }
        .auto-style3 {
            width: 55px;
            height: 54px;
        }
    </style>
</head>
<body style="width: 235px">
    <script>
function moveTable() {
        if (playing == false) {
            myTimer = window.setTimeout(move, 25);
            playing = true;
        }
    }

    leftCoor = new Array(10, 30, 50, 70, 90, 110, 130, 110, 90, 70, 50, 30);
    var myTimer;
    var playing = false;
    var index = 0; //was undefined

    function move() {
        //if (playing == false) {
        var tplayer = document.getElementById("tblFormat");
        tplayer.style.visibility = "visible";
        tplayer.style.left = leftCoor[index] + "px";
        index++;

        if (index > 11) index = 0;
        //myTimer = window.setTimeout(move, 100); //corrected
        //playing = false;
        //}

    }

    function CloseTable() {
        var tplayer = document.getElementById("tblFormat");
        tplayer.style.visibility = "hidden";
        tplayer.style.left = "10px";
        window.clearTimeout(myTimer);
        playing = false;

    }

    </script>
    <table class="auto-style1" style="background-color: #FF0000; border: thick inset #0000FF; visibility: hidden; left: 10px;" id="tblFormat">
        <tr>
            <td style="text-align: right">
                <img id="imgClose" alt="" class="auto-style2" src="images/emyller_close_button.png" onclick="CloseTable()" /></td>
        </tr>
        <tr>
            <td>Hello World,<br />
                Please hit the close button to close this table.</td>
        </tr>
    </table>
    <p>
        &nbsp;</p>
    <p>
        <img id="imgOpen" alt="" class="auto-style3" src="images/start-button.png" onmouseover="move()" /></p>

</body>
</html>

すべての助けに感謝します！

更新されたコード

回答からのアイデアによりコードを更新しました。それでも同じ問題があり、それでも動かないでしょう。

更新されたコードと編集＃2

さて、それはちょっと動きますが、私が望む方法ではありません。私はそれが継続的であり、1回のマウスオーバーでのみアクティブ化されることを望んでいます（それが理にかなっている場合）。今、私はそれを動かすために複数のマウスオーバーをしなければなりません。

4

4 に答える 4

1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>...</title>
</head>
 <body>
   <script>
        leftCoor = new Array(10, 30, 50, 70, 90, 110, 130, 110, 90, 70, 50, 30);
        var myTimer;
        //var playing = false;
        var index = 0;

        function move() {
            //if (playing == false) {
                var tplayer = document.getElementById("tblFormat");
                tplayer.style.visibility = "visible";
                tplayer.style.left = leftCoor[index] + "px";
                index++;

                if (index > 11) index = 0;
                myTimer = window.setTimeout(move, 100); //corrected
                playing = true;
            //}

        }

        function CloseTable() {
            var tplayer = document.getElementById("tblFormat");
            tplayer.style.visibility = "hidden";
            tplayer.style.left = "10px";
            window.clearTimeout(myTimer);
            //playing = false;

        }
   </script>
   <div id="divTable" style="left:10px">
   <table id="tblFormat" style="position:relative"> <!-- position:relative -->
      <tr>
         <td><img id="imgClose" onclick="CloseTable()" /></td>
      </tr>
   </table>
   </div>
   <img id="imgOpen" onMouseOver="move()" />
 </body>
</html>

私は私の答えを形成するスタッフに焦点を合わせるためにコードのいくつかを取り除いています;）

于 2013-03-13T05:14:04.403 に答える
0

テーブルを直線的に移動したい場合は、CSS3 tansformプロパティを使用できますが、必ずしもjavascriptを使用して移動する必要はありません。

例えば：

 #tblFormat:hover{transform:translateX(250px);}

X軸にidtblFormatを持つ要素を、ホバー時に250pxの距離に移動します。

于 2013-03-13T04:58:44.283 に答える
0

私が気づいたことの 1 つは、if (playing == false) ステートメントがあることです。そのため、最初にスタート ボタンにカーソルを合わせた後、playing の値が true に変更されます。その場合、if (playing == false) 内のコードは実行される機会がありません。

于 2013-03-13T05:04:51.297 に答える
0

クラスを持つテーブルは、プロパティを持っているか、尊重するauto-style1必要があります。これが根本原因です。テーブルが意図したとおりに移動するのを妨げる他の問題が存在する可能性があります。position: relativeabsolutefixedleft

于 2013-03-13T05:19:04.560 に答える