4

メニューを作って、今追加しました

<!DOCTYPE html>

ドキュメントに、そしてそれは機能しなくなります。ただし、コードはまだ実行されており、マウスオーバーなどでコンソールに出力されます。他のDoctypeを試しましたが、それらも壊れてしまい、静的なままです。

JavaScriptが機能しなくなる可能性のあるDoctypeについてはどうですか？

JS：

var total_width = "960";
var slide_width = "182";
var slide_margin = "10";
var expand_width = "374";
var icon_width = "32";
var icon_margin = "15";
var slide_number = "5";

function slideid(i) {
    var m = document.getElementById("slide"+i);
    var l = document.getElementById("slideimg"+i);
    var k = document.getElementById("slidetext"+i);
    var j = document.getElementById("slidediv"+i);
    return [m, l, k, j]
}

function compat() {
    if (window.opera) {
        for (var i=1;i<6;i++) {
            s = slideid(i);
            s[3].style.position="relative";
            s[3].style.bottom="46px";
        }
    }
    if (document.all && !(window.opera)) {
        for (var i=1;i<6;i++) {
            s = slideid(i);
            s[0].style.height="60px";
            s[1].style.display="none";
            var iecontents = s[2].innerHTML;
            s[0].innerHTML=iecontents;
            s[0].style.fontFamily="'astonishedregular',Impact,serif";
            s[0].style.fontSize="40px";
            s[0].style.color="#fff";
            s[0].style.textDecoration="none";
            s[0].style.padding="10px auto";
        }
    }
}

function expand(x) {
    if (document.all && !(window.opera)) {
        return
    }
    var shrink = new Array();
    for (var i=1;i<6;i++) {
        if (i === x) {
            var expander = i;
        }
        else {
            var d = shrink.length;
            shrink[d] = i;
        }
    }
    for (var i=0;i<4;i++) {
        s = slideid(shrink[i]);
        var slide_shrink = ((total_width-(5*slide_margin))-expand_width)/(slide_number-1);
        s[1].style.marginLeft=(slide_shrink-icon_width)/2;
        s[0].style.width=slide_shrink;
        s[2].style.display="none";
        s[3].style.width="0"
    }
    s = slideid(expander);
    s[1].style.marginLeft=icon_margin;
    s[0].style.width=expand_width;
    s[2].style.display="inline-block";
    s[3].style.width=expand_width-icon_width-icon_margin-7;
}

function shrink() {
    if (document.all && !(window.opera)) {
        return
    }
    for (var i=1;i<6;i++) {
        s = slideid(i);
        s[1].style.marginLeft=(slide_width-icon_width)/2;
        s[0].style.width=slide_width;
        s[2].style.display="none";
        s[3].style.width="0";
    }
}

そしてHTML：

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="style.css" />
    <script src="menu.js"></script>
</head>
<body onload="compat()">

<div id="Menu" onMouseout="shrink()">
    <a href="#" class="slide" id="slide1" onMouseOver="expand(1)">
        <img id="slideimg1" src="home.png" />
        <div id="slidediv1">
            <h2 id="slidetext1">Home</h2>
        </div>
    </a>
    <a href="#" class="slide" id="slide2" onMouseOver="expand(2)">
        <img id="slideimg2" src="sound.png" />
        <div id="slidediv2">
            <h2 id="slidetext2">Music</h2>
        </div>
    </a>
    <a href="#" class="slide" id="slide3" onMouseOver="expand(3)">
        <img id="slideimg3" src="blog.png" />
        <div id="slidediv3">
            <h2 id="slidetext3">Blog</h2>
        </div>
    </a>
    <a href="#" class="slide" id="slide4" onMouseOver="expand(4)">
        <img id="slideimg4" src="note.png" />
        <div id="slidediv4">
            <h2 id="slidetext4">Bio</h2>
        </div>
    </a>
    <a href="#" class="slide" id="slide5" onMouseOver="expand(5)">
        <img id="slideimg5" src="way.png" />
        <div id="slidediv5">
            <h2 id="slidetext5">Links</h2>
        </div>
    </a>
</div>
</body>
4

4 に答える 4

11

"px"とに追加する必要がmarginLeftありwidthます。単位を必要とするCSSスタイルの設定は、単位なしでは機能しません。<html></html>そして、あなたはタグを失っています。

function expand(x) {
    if (document.all && !(window.opera)) {
        return
    }
    var shrink = new Array();
    for (var i=1;i<6;i++){
        if (i === x) {
            var expander = i;
        }
        else {
            var d = shrink.length;
            shrink[d] = i;
        }
    }
    for (var i=0;i<4;i++){
        s = slideid(shrink[i]);
        var slide_shrink = ((total_width-(5*slide_margin)) - expand_width) / (slide_number-1);
        s[1].style.marginLeft=(slide_shrink-icon_width)/2 +"px";
        s[0].style.width=slide_shrink +"px";
        s[2].style.display="none";
        s[3].style.width="0"
    }
    s = slideid(expander);
    s[1].style.marginLeft=icon_margin +"px";
    s[0].style.width=expand_width + "px";
    s[2].style.display="inline-block";
    s[3].style.width= (expand_width-icon_width-icon_margin-7) +"px";
}

function shrink() {
    if (document.all && !(window.opera)) {
        return
    }
    for (var i=1;i<6;i++){
        s = slideid(i);
        s[1].style.marginLeft=(slide_width-icon_width)/2 +"px";
        s[0].style.width=slide_width + "px";
        s[2].style.display="none";
        s[3].style.width="0";
    }
}
于 2012-12-12T10:03:15.693 に答える
2

document.allこれはMicrosoftのものであり、標準ではカバーされていません（この他のQ / Aで詳しく説明します）。すべての使用を削除し、document.getElementById代わりに必要に応じて使用してください。

私の推測では、JavaScriptコンソールを見ると、document.all存在しないことに関連するエラーが表示されます。これは、テストしているブラウザーがクァークズモードでサポートされていても、標準モードに切り替えた場合（Doctypeを追加した場合）に発生するためです。 、サポートを停止しました。

于 2012-12-12T10:03:21.487 に答える
1

HTML5 DOCTYPE（<!DOCTYPE html>）を追加すると、ブラウザは「標準モード」になります。これがないと、ブラウザは「クァークズモード」になります。これは、基本的にIE5/レガシー互換モードです。MDNには、この件に関する詳細情報と、Firefoxでの動作の違いのリストがあります。

スクリプトの最大の問題は、document.allMicrosoftの非標準的なものであるの使用です。のような標準のDOMのものを使用することをお勧めしますdocument.getElementById。

于 2012-12-12T10:04:31.840 に答える
0

bodyタグを閉じる前にカウントスクリプトを含め、htmlの終了タグを追加することを忘れないでください

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="menu.js"></script>
</head>
<body onload="compat()">

<div id="Menu" onMouseout="shrink()">
<a href="#" class="slide" id="slide1" onMouseOver="expand(1)">
  <img id="slideimg1" src="home.png" />
<div id="slidediv1">
    <h2 id="slidetext1">Home</h2>
</div>
</a>
<a href="#" class="slide" id="slide2" onMouseOver="expand(2)">
<img id="slideimg2" src="sound.png" />
<div id="slidediv2">
    <h2 id="slidetext2">Music</h2>
</div>
</a>
<a href="#" class="slide" id="slide3" onMouseOver="expand(3)">
<img id="slideimg3" src="blog.png" />
<div id="slidediv3">
    <h2 id="slidetext3">Blog</h2>
</div>
</a>
<a href="#" class="slide" id="slide4" onMouseOver="expand(4)">
<img id="slideimg4" src="note.png" />
<div id="slidediv4">
    <h2 id="slidetext4">Bio</h2>
</div>
</a>
<a href="#" class="slide" id="slide5" onMouseOver="expand(5)">
<img id="slideimg5" src="way.png" />
<div id="slidediv5">
    <h2 id="slidetext5">Links</h2>
</div>
</a>
</div>
</body>
</html>
于 2012-12-12T10:04:35.157 に答える