JavaScript浮动的导航菜单代码

代码简介：浮动的导航菜单，实际上它是一个用JS去控制移动的DIV层，在层里放入表格，这里的表格你完全可以改成DIV结构。本菜单可随滚动条自动定位至原始位置，初始位置在JS代码里可修改。

代码内容：

<HTML>
<head>
<title>JavaScript浮动的导航菜单代码_网页代码站(www.webdm.cn)</title>
</head>
<body>
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>
 
<layer id="divStayTopLeft">
<table border="1" width="130" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" bgcolor="#FFFFCC">
      <p align="center"><b><font size="4">快速导航</font></b></td>
  </tr>
  <tr>
    <td width="100%" bgcolor="#FFFFFF" align="center">
      <a href="/">ASP</a><br>
       <a href="/">PHP</a><br>
       <a href="/">AJAX</a><br>
       <a href="/">JSP</a><br>
       <a href="/">EXTJS</a></td>
  </tr>
</table>
</layer>
<script type="text/javascript">
// "frombottom" 或 "fromtop"设置从顶部或底部飘
var verticalpos="frombottom"
 
if (!document.layers)
document.write('</div>')
 
function JSFX_FloatTopDiv()
{
    var startX = 3,
    startY = 150;
    var ns = (navigator.appName.indexOf("Netscape") != -1);
    var d = document;
    function ml(id)
    {
        var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
        if(d.layers)el.style=el;
        el.sP=function(x,y){this.style.left=x;this.style.top=y;};
        el.x = startX;
        if (verticalpos=="fromtop")
        el.y = startY;
        else{
        el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
        el.y -= startY;
        }
        return el;
    }
    window.stayTopLeft=function()
    {
        if (verticalpos=="fromtop"){
        var pY = ns ? pageYOffset : document.body.scrollTop;
        ftlObj.y += (pY + startY - ftlObj.y)/8;
        }
        else{
        var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
        ftlObj.y += (pY - startY - ftlObj.y)/8;
        }
        ftlObj.sP(ftlObj.x, ftlObj.y);
        setTimeout("stayTopLeft()", 10);
    }
    ftlObj = ml("divStayTopLeft");
    stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
<div id="test" style="height:800px;"></div>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>

代码来自：http://www.webdm.cn/webcode/e4f817c8-9eaf-4b7a-90d1-13f0c3b46464.html

posted @ 2011-04-02 10:11 网页代码站阅读(810) 评论(0) 编辑收藏举报

努力加载评论中...

刷新页面返回顶部

JavaScript浮动的导航菜单代码

公告