繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 关于Blog顶部的滚动导航条代码
- Javascript
- javascript options属性集合操作代码
- javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失（多图）
- javascript 显示当前系统时间代码
- firefox和IE系列的相关区别整理 以备后用
- extJs 常用到的增，删，改，查操作代码
- Javascript 面向对象特性
- JavaScript的public、private和privileged模式
- 通过javascript设置css属性的代码
- javascript iframe编程相关代码
- 滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
- js DOM模型操作
- js 学习笔记（三）
- 用js做一个小游戏平台 (一)
- jquery UI 1.72 之datepicker
- jQuery的三种$()
- JavaScript 常用函数
- 用javascript实现源代码的隐藏与解密的方法
- javascript Onunload与Onbeforeunload使用小结
- Javascript的闭包
- JavaScript 对Cookie 操作的封装小结
Javascript 中的 关于Blog顶部的滚动导航条代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 143 ::
收藏到网摘: 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>
评论 (0) All
