Question

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

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

好吧，所以它有点移动，但不是我想要的方式。我希望它是连续的，只能在一次鼠标悬停时激活（如果这是有道理的）。现在，我必须做多个鼠标悬停才能让它移动。

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

我扯掉了一些代码，专注于构成我答案的员工;）

Answer 2

如果你想线性移动表格，你可以使用CSS3 tansform属性，而不一定是javascript来实现它。

E-G：

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

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

Answer 3

我注意到的一件事是你有if（play == false）语句。因此，在您第一次徘徊在开始按钮后，播放的值将更改为true。那么if（play == false）中的代码永远不会有机会运行。

Answer 4

您的课程auto-style1需要position: relative，absolute或fixed来尊重left媒体资源。这是根本原因;可能存在其他问题，导致表格无法按照您的要求移动。

Javascript表不会移动

4 个答案: