ljl 发表于 2007-4-27 11:21:59

***页面特效***菜单平时隐藏着,鼠标移到特定地方就会显现 (像oicq)

把下列代码加到网页的<body></body>标签之间 从google下载我的照片管理软件
要完成此效果需要三个步骤

第一步:把如下代码加入到<head>区域中

<style>#d1 {
    background-color: blue;
    border-bottom: white 2px outset;
    border-left: white 2px outset;
    border-right: white 2px outset;
    border-top: white 2px outset;
    left: 0px; position: absolute;
    top: 0px; visibility: hidden;
    width: 300px;
    layer-background-color: lightgreen
}
a{font-size:9pt}
a:link{text-decoration:none}
a:hover{text-decoration:none;color:#ffffff}
a:visited{text-decoration:none}
.40pt{font-size:40pt;color:#ub39a1;font-family:文鼎琥珀繁}
</style>
<script language="javascript">
function menuin() //菜单隐藏
{
      if(n4) {
                cleartimeout(out_id)
                if( menu.top > menuh*-1+20+10 ) {
                        menu.top -= 8
                        in_id = settimeout("menuin()", 1)
                }
                else if( menu.top > menuh*-1+20 ) {
                        menu.top--
                        in_id = settimeout("menuin()", 1)
                }
      }
      else {
                cleartimeout(out_id)
                if( menu.pixeltop > menuh*-1+20+10 ) {
                        menu.pixeltop -= 8
                        in_id = settimeout("menuin()", 1)
                }
                else if( menu.pixeltop > menuh*-1+20 ) {
                        menu.pixeltop--
                        in_id = settimeout("menuin()", 1)
                }
      }
}
function menuout() //菜单显示
{
      if(n4) {
                cleartimeout(in_id)
                if( menu.top < -10) {
                        menu.top += 4
                        out_id = settimeout("menuout()", 1)
                }
                else if( menu.top < 0) {
                        menu.top++
                        out_id = settimeout("menuout()", 1)
                }
               
      }
      else {
                cleartimeout(in_id)
                if( menu.pixeltop < -10) {
                        menu.pixeltop += 2
                        out_id = settimeout("menuout()", 1)
                }
                else if( menu.pixeltop < 0 ) {
                        menu.pixeltop++
                        out_id = settimeout("menuout()", 1)
                }
      }
}
function fireover() {
      cleartimeout(f_out)         
      f_over = settimeout("menuout()", 10)
}
function fireout() {
      cleartimeout(f_over)
         f_out = settimeout("menuin()", 10)
}
function init() {
      if(n4) {
                menu = document.d1
                menuh = menu.document.height
                menu.top = menu.document.height*-1+20
                menu.onmouseover = menuout
                menu.onmouseout = menuin
      menu.visibility = "visible"
      }
      else if(e4) {
                menu = d1.style
                menuh = d1.offsetheight
                d1.style.pixeltop = d1.offsetheight*-1+20
                d1.onmouseover = fireover
                d1.onmouseout = fireout
                d1.style.visibility = "visible"
      }
}
f_over=f_out=in_id=out_id=null
n4 = (document.layers)?1:0
e4 = (document.all)?1:0;
</script>


第二步:把如下代码加入到<body>区域中

<div id="d1">

<table border="0" width="100%">
<tbody>
<tr>
    <td align="middle" bgcolor="ub39a1" rowspan="2"><b style="color: ub39a1">
    m<br>
    e<br>
    n<br>
    u</b></td>
    <td> <br><br><ul>
      <li><a href="link.htm">
          选   项 1</a>
      </li>
      <li><a href="link.htm">
          选   项 2</a>
      </li>
      <li><a href="link.htm">
          选   项 3</a>
      </li>
      <li><a href="link.htm">
          选   项 4</a>
      </li>
      <li><a href="link.htm">
          选   项 5</a>
      </li>
    </ul>
    </td>
    <td><br><br><ul>
      <li><a href="link.htm">
          选   项 6</a>
      </li>
      <li><a href="link.htm">
          选   项 7</a>
      </li>
      <li><a href="link.htm">
          选   项 8</a>
      </li>
      <li><a href="link.htm">
          选   项 9</a>
      </li>
      <li><a href="javascript:void(0)">
          选   项 10</a>
      </li>
    </ul>
    </td>
</tr>
<tr>
    <td align="right" colspan="2">
   </td>
</tr>
</tbody>
</table>
</div>


第三步:把“onload="init()"”加在<body>标记里
例如:<body onload="init()"

      










----- ---------------------------------

拥有三人行 论坛管理系列软件,一个人就可以管理一个论坛的更新维护。还能使您的论坛有千人在线的真实火暴效果,让 您不在为论坛因没有人气而留不住会员而烦恼,使您的论坛早日成为一流的论坛。详情请登陆网站:ht tp://www.cn srx.cn三人行论坛管理软件,站长必备的专业好工具。(您使用的 是   免费版本,购买收费版本后,将不带广告。业务QQ: 247216 44985227)
页: [1]
查看完整版本: ***页面特效***菜单平时隐藏着,鼠标移到特定地方就会显现 (像oicq)