Firefox 不支持 W3Schools 水平滑动 javascript答案

【问题标题】：W3Schools slidehorizontal javascript not supported in firefoxFirefox 不支持 W3Schools 水平滑动 javascript
【发布时间】：2011-12-10 17:54:19
【问题描述】：

find below link for slide horizontal

http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_menu_slidehorizontal 它在 ie 中运行良好，但在 Firefox 中它不支持，因为 Doctype 如果我删除它支持的 doctype，请帮助我解决这个兼容问题

HTML 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script type="text/javascript">
// scrit for slider start here
     var i = -320;
     var intHide;
     var speed = 10;
     function showmenu() {
         clearInterval(intHide);
         intShow = setInterval("show()", 10);
     }
     function hidemenu() {
         clearInterval(intShow);
         intHide = setInterval("hide()", 10);
     }
     function show() {
         if (i < -12) {
             i = i + speed;
             document.getElementById('myMenu').style.left = i;
         }
     }
     function hide() {
         if (i > -320) {
             i = i - speed;
             document.getElementById('myMenu').style.left = i;
         }
     }
</script>

<style type="text/css">
    div.Main
    {
        background-color: #f1f1f1;
    }
    div.Treemenu
    {
        background: #741918;
        height: auto;
        width: 323px;
    }
    div.Treenav
    {
        background: #741918;
        position: absolute;
        font: bold 80% arial;
        top: 0px;
        left: -320px;
        width: 350px;
        color: White;
        float: left;
    }
    div.collection
    {
        float: right;
        cursor: default;
        padding: 0;
        font-size: 16px;
        font-weight: bold;
        background-image: url( '/_layouts/images/B2E/Collection_Bg.png' );
        background-repeat: no-repeat;
        background-color: #741918;
        width: 27px;
        font-family: Calibri;
        padding: 5px 0 0 0;
    }
</style>

<div class="Main">
    <p>
        content content content content</p>
    <div id="myMenu" class="Treenav" onmouseover="showmenu()" onmouseout="hidemenu()">
        <div class="collection">
            <<br />
            C<br />
            O<br />
            L<br />
            L<br />
            E<br />
            C<br />
            T<br />
            I<br />
            O<br />
            N
        </div>
        <div class="Treemenu">
            <p>
                Treemenu Treemenu Treemenu Treemenu</p>
            <p>
                Treemenu Treemenu Treemenu Treemenu</p>
        </div>
    </div>
</div>

【问题讨论】：

W3Schools 不是 W3C。没有“W3C 学校”（感谢上帝）。
更多有趣的信息：w3fools.com（为什么你不应该将它用作资源）
w3schools.com/dhtml/…
不要将字符串传递给setTimeout 或setInterval；他们得到evaled，这很慢，难以调试并且会破坏范围。而是传递函数。 setInterval(show, 10);
看着那个 w3schools 的例子让我想哭。

标签： javascript html css

【解决方案1】：

您将 CSS left 属性设置为 Number，但它只接受 length 并且不是 0 的长度必须有单位（例如 27px）。

【讨论】：

谢谢老兄 function show() { if (i -320) { i = i - speed; document.getElementById('myMenu').style.left = i + "px"; } }