怎么实现这个特效？

我想要用javaScript，总之是使用代码吧，有没有简单的例子看看

解决方案 »

  1.   

    http://www.1000script.com/script/go.asp?id=96
      

  2.   

    <html xmlns:ie>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style>#divMenu {font-family:arial,helvetica; font-size:12pt; font-weight:bold}
    #divMenu a{text-decoration:none;}
    #divMenu a:hover{color:red;}
    </style>
                <script language="JavaScript1.2">
    /********************************************************************************
    Submitted with modifications by Jack Routledge (http://fastway.to/compute) to DynamicDrive.com
    Copyright (C) 1999 Thomas Brattli @ www.bratta.com
    This script is made by and copyrighted to Thomas Brattli 
    This may be used freely as long as this msg is intact!
    This script has been featured on http://www.dynamicdrive.com
    ********************************************************************************
    Browsercheck:*/
    ie=document.all?1:0
    n=document.layers?1:0//These are the variables you have to set://How much of the layer do you wan't to be visible when it's in the out state?
    lshow=60//How many pixels should it move every step? 
    var move=10;//At what speed (in milliseconds, lower value is more speed)
    menuSpeed=40//Do you want it to move with the page if the user scroll the page?
    var moveOnScroll=true/********************************************************************************
    You should't have to change anything below this.
    ********************************************************************************/
    //Defining variables
    var tim;
    var ltop;//Object constructor
    function makeMenu(obj,nest){
        nest=(!nest) ? '':'document.'+nest+'.'
        this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')
    this.state=1
    this.go=0
    this.width=n?this.css.document.width:eval(obj+'.offsetWidth')
    this.left=b_getleft
        this.obj = obj + "Object";  eval(this.obj + "=this")
    }
    //Get's the top position.
    function b_getleft(){
    var gleft=(n) ? eval(this.css.left):eval(this.css.pixelLeft);
    return gleft;
    }
    /********************************************************************************
    Deciding what way to move the menu (this is called onmouseover, onmouseout or onclick)
    ********************************************************************************/
    function moveMenu(){
    if(!oMenu.state){
    clearTimeout(tim)
    mIn()
    }else{
    clearTimeout(tim)
    mOut()
    }
    }
    //Menu in
    function mIn(){
    if(oMenu.left()>-oMenu.width+lshow){
    oMenu.go=1
    oMenu.css.left=oMenu.left()-move
    tim=setTimeout("mIn()",menuSpeed)
    }else{
    oMenu.go=0
    oMenu.state=1
    }
    }
    //Menu out
    function mOut(){
    if(oMenu.left()<0){
    oMenu.go=1
    oMenu.css.left=oMenu.left()+move
    tim=setTimeout("mOut()",menuSpeed)
    }else{
    oMenu.go=0
    oMenu.state=0
    }
    }
    /********************************************************************************
    Checking if the page is scrolled, if it is move the menu after
    ********************************************************************************/
    function checkScrolled(){
    if(!oMenu.go) oMenu.css.top=eval(scrolled)+ltop
    if(n) setTimeout('checkScrolled()',30)
    }
    /********************************************************************************
    Inits the page, makes the menu object, moves it to the right place, 
    show it
    ********************************************************************************/
    function menuInit(){
    oMenu=new makeMenu('divMenu')
    scrolled=n?"window.pageYOffset":"document.body.scrollTop"
    oMenu.css.left=-oMenu.width+lshow
    ltop=(n)?oMenu.css.top:oMenu.css.pixelTop;
    oMenu.css.visibility='visible'
    if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();
    }//Initing menu on pageload
    onload=menuInit;
    </script> 
    </head>
    <body>
    <div id="divMenu" style="position:absolute; top:250; left:30; width:200; visibility:hidden; background-color:F0F0F0"> 
    <nobr> <a href="http://www.dynamicdrive.com">Dynamic Drive</a> - 
    <a href="http://www.freewarejava.com/cgi-bin/Ultimate.cgi">WA Help 
    Forum</a> - <a href="http://active-x.com/">Active-X.com</a> - <a href="javascript://" onmouseover="moveMenu()" style="background-color:yellow;text-decoration:none">MENU</a> 
    </nobr> </div></body>
    </html>
      

  3.   

    js，层实现事先把要隐藏显示的内容写到层里面，设置为隐藏
    表格响应onmouseover事件，把层显示出来，表格再响应onmouseout事件，再把层隐藏起来，