繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 关于Blog顶部的滚动导航条代码
- Javascript
- IE和Firefox在JavaScript应用中的兼容性探讨
- 在线演示常用javascript特效
- Meta 标签生成器
- 动态生成的IFRAME，设置SRC时的问题解决分析
- CSS常用网站布局实例
- JS动画效果代码2
- JS动画效果代码3
- js COL能很好的控制表格的列
- readonly和disabled的区别
- 在CSS里写复杂的JavaScript脚本
- 用JavaScript操作WinRar
- javascript add event remove event
- HTML中Select不用Disabled实现ReadOnly的效果
- 用JavaScript调用WebService的示例
- 大家未必知道的Js技巧收藏
- js批量上传界面的实现
- javascript倒计时效果代码，可以方便参数调用
- 能在网页中写字和能擦写的js程序
- javascript背投广告代码的完善
- js函数般调用正则
Javascript 中的 关于Blog顶部的滚动导航条代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 309 ::
收藏到网摘: 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
