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

好的，所以它有点移动，但不是我想要的方式。我希望它是连续的，并且只在鼠标悬停时激活（如果有意义的话）。现在，我必须进行多次鼠标悬停才能使其移动。

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 转换属性，而不一定是 javascript 来完成。

例如：

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

悬停时会将 X 轴上 id 为 tblFormat 的元素移动到 250px 的距离。

于 2013-03-13T04:58:44.283 回答
0

我注意到的一件事是你有 if (playing == false) 语句。因此，在您第一次将鼠标悬停在开始按钮上后，playing 的值将更改为 true。那么 if (playing == false) 里面的代码永远不会有机会运行。

于 2013-03-13T05:04:51.297 回答
0

你的表与类auto-style1需要有position: relative，absolute或fixed尊重left财产。这是根本原因；可能存在其他问题，这些问题会阻止桌子完全按照您的意愿移动。

于 2013-03-13T05:19:04.560 回答