Scrollable menu in JavaScript_问答_开发者_运维开发者技术经验分享

I am trying to create a scrollable menu list in JavaScript and I am following a tutorial http://javascript.internet.com/navigation/menu-scroll.html

But nothing appears on my page. This is what I have tried:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
开发者_如何学编程<html>
<head>
    <title></title>
    <script type="text/javascript" src="ScrollMenu.js"></script>
    <SCRIPT LANGUAGE="JavaScript">

<!-- Original:  Randy Bennett (rbennett@thezone.net) -->
<!-- Web Site:  http://home.thezone.net/~rbennett/utility/javahead.htm -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

    <!-- Begin
    function buildMenu() {
        speed=35;
        topdistance=100;
        items=6;
        y=-50;
        ob=1;
        if (navigator.appName == "Netscape") {
            v=".top=",dS="document.",sD="";
        }
        else {
            v=".pixelTop=",dS="",sD=".style";
        }
    }

    function scrollItems() {
        if (ob<items+1) {
            objectX="object"+ob; y+=10; eval(dS + objectX + sD + v + y);
            if (y<topdistance) setTimeout("scrollItems()",speed);
            else y=-50, topdistance+=40, ob+=1, setTimeout("scrollItems()",speed);
        }
    }
// End -->
</SCRIPT>
</head>
<body onLoad="buildMenu(), scrollItems();">
    <a href="pic.html">hello</a>
    <a href="pic.html">Link 1!</a>
    <a href="pic.html">Link 1!</a>
    <a href="pic.html">Link 1!</a>
    <a href="pic.html">Link 1!</a>
    <a href="pic.html">Link 1!</a>
    <div id="object1" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
        <table border=1 width=150 bgcolor=80FFFF>
            <td>
                <a href="pic.html">Link 1!</a>
            </td>
        </table>
    </div>

    <div id="object2" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
        <table border=1 width=150 bgcolor=80FFFF>
            <td>
                <a href="pic.html">Link 2!</a>
            </td>
        </table>
    </div>

    <div id="object3" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
        <table border=1 width=150 bgcolor=80FFFF>
            <td>
                <a href="pic.html">Link 3!</a>
            </td>
        </table>
    </div>

    <div id="object4" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
        <table border=1 width=150 bgcolor=80FFFF>
            <td>
                <a href="pic.html">Link 4!</a>
            </td>
        </table>
    </div>

    <div id="object5" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
        <table border=1 width=150 bgcolor=80FFFF>
            <td>
                <a href="pic.html">Link 5!</a>
            </td>
        </table>
    </div>

    <div id="object6" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
        <table border=1 width=150 bgcolor=80FFFF>
            <td>
                <a href="pic.html">Link 6!</a>
            </td>
        </table>
    </div>

</body>
</html>

Any help please?? :)

THanks so much C.

Change scrollItems() To this code

function scrollItems() {
    if (ob<items+1) {
        objectX="object"+ob; y+=10; 
        document.getElementById(objectX).style.top = y + "px"
        if (y<topdistance) setTimeout("scrollItems()",speed);
        else y=-50, topdistance+=40, ob+=1, setTimeout("scrollItems()",speed);
    }
}

See please if it works fine with you

Changing to Kronass's code is good. I actually got the code working as well, but s/he bet me to it.

You should also note, that your body onload should not have a comma in it, but a semicolon.

i.e. you have:

<body onLoad="buildMenu(), scrollItems();">

Which should be

<body onLoad="buildMenu(); scrollItems();">

In your HTML style, you should have

visibility: visible;

NOT

visibility: show;

The reason that the original code doesn't work, is that it is VERY old. (in Internet terms)

Scrollable menu in JavaScript

精彩评论

关注公众号

热门标签

图文推荐

Scrollable menu in JavaScript

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：