当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 关于Blog顶部的滚动导航条代码

Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
JS Array对象入门分析
javascript typeof的用法与typeof运算符介绍[详细]
js CSS操作方法集合
让任务管理器中的CPU跳舞的js代码
ajax无刷新动态调用股票信息(改良版)
js Clip的奇思妙想之文字拼接效果
js Clip奇思妙想之多彩渐变字效果
JS 创建对象(常见的几种方法)
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
JS提交并解析后台返回的XML的代码
初学Javascript的一些总结
JS 继承实例分析
js form action动态修改方法
仿163填写邮件地址自动显示下拉（无优化）
js判断对象是否是某一类型
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
js 目录列举函数
js颜色选择器代码[firefox不支持]
js wmp操作代码小结(音乐连播功能)

No. « 115 116 117 118 »

技术文章搜索

关键字

Javascript 中的 关于Blog顶部的滚动导航条代码

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 357 ::
收藏到网摘: n/a

不少朋友通过各种方式问我要 Blog 顶部的滚动导航菜单的代码。其实也没什么特别的，但既然有需求，我就还是把这部分代码整理出来，供大家参考。
复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>Float Div</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#zealNavigatorBar {
position: absolute;
z-index: 100;
width: 760px;
height: 32px;
line-height: 32px;
top: 0px;
left: 0px;
padding: 0px;
margin: 0px;
border-bottom:1px solid #646465;
background-color: #C0C0C3;
}
</style>
</HEAD>
<BODY>
<div id=zealNavigatorBar>
<a href="/">Anything here</a>
<a href="/">Anything here</a>
<a href="/">Anything here</a>
</div>
<script language="JavaScript">
for(var t=0;t<1000;t++) document.writeln('Test content: line '+t+'<br />');
</script>
<script language="JavaScript">
var g_myBodyInstance = document.body;
var g_myBodyInstanceString = "document.body";
if(document.compatMode != "BackCompat"){
// for looser.dtd
g_myBodyInstance = document.documentElement;
g_myBodyInstanceString = "document.documentElement";
}
var isMinNS4 = (navigator.appName.indexOf("Netscape") >= 0 &&
parseFloat(navigator.appVersion) >= 4) ? 1 : 0;
var isMinNS5 = (navigator.appName.indexOf("Netscape") >= 0 &&
parseFloat(navigator.appVersion) >= 5) ? 1 : 0;
var isMinIE4 = (document.all) ? 1 : 0;
var isMinIE5 = (isMinIE4 && navigator.appVersion.indexOf("5.") >= 0) ? 1 : 0;
var isMacIE = (isMinIE4 && navigator.userAgent.indexOf("Mac") >= 0) ? 1 : 0;
var getFFVersion=navigator.userAgent.substring(
navigator.userAgent.indexOf("Firefox")).split("/")[1];
//extra height in px to add to iframe in FireFox 1.0+ browsers
var FFextraHeight=getFFVersion<1.5? 16 : 0;

function getLayer(name) {
if (isMinNS5)
return document.getElementById(name);
else if (isMinIE4)
return eval('document.all.' + name);
else if (isMinNS4)
return findLayer(name, document);
return null;
}
function findLayer(name, doc) {
var i, layer;
for (i = 0; i < doc.layers.length; i++) {
layer = doc.layers[i];
if (layer.name == name)
return layer;
if (layer.document.layers.length > 0) {
layer = findLayer(name, layer.document);
if (layer != null)
return layer;
}
}
return null;
}
function moveLayerTo(layer, x, y) {
if (isMinIE4) {
layer.style.left = x;
layer.style.top = y;
}
else if (isMinNS5) {
layer.style.left = x+'px';
layer.style.top = y+'px';
}
else if (isMinNS4)
layer.moveTo(x, y);
}
function getPageLeft(layer) {
if (isMinIE4||isMinNS5)
return(layer.offsetLeft);
else if (isMinNS4)
return(layer.pageX);
return(-1);
}
function getPageTop(layer) {
if (isMinIE4||isMinNS5)
return(layer.offsetTop);
else if (isMinNS4)
return(layer.pageY);
return(-1);
}
function getPageScrollX() {
if (isMinIE4||isMinNS5)
return(g_myBodyInstance.scrollLeft);
else if (isMinNS4)
return(window.pageXOffset);
return(-1);
}
function getPageScrollY() {
if (isMinIE4||isMinNS5)
return(g_myBodyInstance.scrollTop);
else if (isMinNS4)
return(window.pageYOffset);
return(-1);
}
var g_p_zealNavigatorBar = null;
g_p_zealNavigatorBar = getLayer('zealNavigatorBar');
if(!isMinIE4){g_p_zealNavigatorBar.style.position = 'fixed';}
function reposzealNavigatorBar(){
if(isMinIE4){
try{
moveLayerTo(g_p_zealNavigatorBar,
getPageLeft(g_p_zealNavigatorBar),
getPageScrollY());
}catch(e){}
}
}
window.onresize = reposzealNavigatorBar;
window.onscroll = reposzealNavigatorBar;
window.onload = reposzealNavigatorBar;
</script>
</BODY>
</HTML>