Javascript表赢得'；别动_Javascript_Html_Html Table

Javascript表赢得'；别动

javascript html

Javascript表赢得'；别动,javascript,html,html-table,Javascript,Html,Html Table,我想说的是，我在页面上移动表格时遇到了问题，就像移动图像一样。然而，这是有问题的。我已经知道如何使用坐标或方程式在圆中移动图像。我试着在这上面应用坐标的方式，但是，即使桌子正确地显示和隐藏，桌子也不会移动 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"

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

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


.auto-style1{
宽度：100%；
}
.auto-style2{
宽度：78px；
高度：63px；
}
.自动样式3{
宽度：55px；
高度：54px；
}
函数moveTable（）{
如果（播放==错误）{
myTimer=window.setTimeout（move，25）；
玩=真；
}
}
leftCoor=新阵列（10,30,50,70,90,110,130,110,90,70,50,30）；
var-myTimer；
var=false；
var指数=0//没有定义
函数move（）{
//如果（播放==错误）{
var tplayer=document.getElementById（“tblFormat”）；
tplayer.style.visibility=“可见”；
tplayer.style.left=leftCoor[index]+“px”；
索引++；
如果（指数>11）指数=0；
//myTimer=window.setTimeout（移动，100）；//已更正
//玩=假；
//}
}
函数CloseTable（）{
var tplayer=document.getElementById（“tblFormat”）；
tplayer.style.visibility=“隐藏”；
tplayer.style.left=“10px”；
清除超时（myTimer）；
玩=假；
}
你好，世界，

请按关闭按钮关闭这张桌子。

感谢您的帮助

更新代码

根据答案中的想法更新代码。仍然有同样的问题，仍然不会移动

更新代码并编辑#2

好吧，它有点动了，但不是以我希望的方式。我希望它是连续的，只在一个鼠标上激活（如果有意义的话）。现在，我必须进行多次鼠标移动。

如果要线性移动表，可以使用CSS3 tansform属性，而不必使用javascript来完成

例如：

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

我注意到的一件事是，您有if（playing==false）语句。因此，在第一次将鼠标悬停在开始按钮上后，playing的值将更改为true。那么if（playing==false）中的代码将永远无法运行


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

...
leftCoor=新阵列（10,30,50,70,90,110,130,110,90,70,50,30）；
var-myTimer；
//var=false；
var指数=0；
函数move（）{
//如果（播放==错误）{
var tplayer=document.getElementById（“tblFormat”）；
tplayer.style.visibility=“可见”；
tplayer.style.left=leftCoor[index]+“px”；
索引++；
如果（指数>11）指数=0；
myTimer=window.setTimeout（移动，100）；//已更正
玩=真；
//}
}
函数CloseTable（）{
var tplayer=document.getElementById（“tblFormat”）；
tplayer.style.visibility=“隐藏”；
tplayer.style.left=“10px”；
清除超时（myTimer）；
//玩=假；
}

我剽窃了一些代码，将注意力集中在构成我答案的员工身上；）

带有类

自动样式1

的表需要有

位置：相对的，绝对的或固定的，以尊重左侧的属性。这是根本原因；可能会出现其他问题，使表无法按您所希望的方式移动。好的，但是否可以严格通过javascript进行移动？当然，如果元素指定了位置，您可以更改元素的左值，但最好实际使用CSS。我同意CSS，然而，我需要学习如何在各个方面使用Javascript，因为我问它是否能够仅在Java中使用。关于您的问题，指定是指-？不，您需要删除可见性隐藏属性。如果元素不可见，则移动它是没有意义的。可见性没有帮助，而且我已将其设置为在执行“移动”之前可见。只是尝试注释所有播放相关语句，认为这是一个很好的可能性，但表仍然不移动。这是因为表的初始可见性设置为隐藏，我想。可见性没有帮助，此外，我设置了它，使其在执行“移动”之前可见。不自动移动的问题是因为您注释掉了这一行：myTimer=window.setTimeout（move，200）；不幸的是，表仍然没有移动，但我同意并说，这些是您发现的一些非常好的修复方法。奇怪的是，它移动得很好（在我的IE8快速测试中）好吧，这部分工作正常。。。如果我反复鼠标移动它。。。我将更新代码。
<!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>