Javascript 表不会移动答案

【问题标题】：Javascript Table won't moveJavascript 表不会移动
【发布时间】：2013-03-13 13:30:08
【问题描述】：

我只想说我在页面上移动表格时遇到了问题，就像处理图像一样。然而，这是有问题的。我已经知道如何使用坐标或使用方程式在圆圈中移动图像。我尝试对此应用坐标方式，但是，即使表格显示和隐藏正确，表格也不会移动。

<!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

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

【问题讨论】：

标签： javascript html html-table

【解决方案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>

我撕掉了一些代码，以专注于形成我的答案的员工；）

【讨论】：

不幸的是，桌子仍然没有移动，但我同意并说这些是您发现的一些非常好的修复。
奇怪，它移动得很好（在我的 IE8 快速测试中）

【解决方案2】：

如果你想线性移动表格，你可以使用 CSS3 转换属性而不一定是 javascript 来完成。

例如：

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

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

【讨论】：

好的，但是可以通过javascript严格执行吗？
当然，如果元素指定了位置，您可以更改元素的左值，但实际上最好使用 CSS。
我同意 CSS，但是我需要学习如何在各个方面使用 Javascript，因为我问它是否只能在 Java 中完成。关于您的问题，通过指定，您的意思是 - ?

不，您需要删除可见性隐藏属性。如果元素是不可见的，那么移动它是没有意义的。

可见性无济于事，除了我设置了它，因此它在执行“运动”之前变得可见。

【解决方案3】：

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

【讨论】：

刚刚尝试将所有与播放相关的语句注释掉，认为这是一个很好的可能性，但桌子仍然没有移动。
那是因为我猜表格的初始可见性设置为隐藏。
可见性无济于事，除了我设置了它，因此它在执行“运动”之前变得可见。
不自动移动的问题是因为你注释掉了这一行：myTimer = window.setTimeout(move, 200);

【解决方案4】：

auto-style1 类的表需要具有 position: relative、absolute 或 fixed 以尊重 left 属性。这是根本原因；可能存在其他问题，导致表格无法完全按照您的意愿移动。

【讨论】：

好吧，这有点工作...如果我反复鼠标悬停它会移动...我会更新代码。