JS 实现导航栏悬停效果


Posted in Javascript onSeptember 23, 2013

JS-实现导航栏悬停

先布个局:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head> 
<script type="text/javascript" src="test.js"></script> 
<link rel="stylesheet" type="text/css" href="test.css"></link> 
<title>Test</title> 
</head> 
<body> 
<div class="main"> 
<div class="content">1</div> 
<div id="nav" class="navigation"> 
<div class="tab">tab1</div> 
<div class="tab">tab2</div> 
<div class="tab">tab3</div> 
<div class="tab">tab4</div> 
</div> 
<div class="content">2</div> 
<div class="content">3</div> 
<div class="content">4</div> 
<div class="content">5</div> 
<div class="content">6</div> 
<div class="content">7</div> 
</div> 
</body> 
</html>

添加简单的样式:
div.main{ 
width: 800px; 
background: #CCC; 
margin: 10px auto 0; 
position: relative; 
} div.content{ 
width: 800px; 
height: 400px; 
background: yellow; 
margin: 10px auto 0; 
} 
div.navigation{ 
width: 800px; 
height: 40px; 
background: red; 
margin: 4px auto 0; 
top: 400px; 
left: 0px; 
position: absolute; 
} 
div.tab{ 
width: 195px; 
height: 40px; 
background: blue; 
float: left; 
margin-left: 5px; 
}

JS:
//记录导航条原来在页面上的位置 
var naviga_offsetTop = 0; //IE7不识别getElementsByClassName,为了兼容自定义一个 
function my_getElementsByClassName(class_name) { 
var el = []; 
//获取所有元素 
_el = document.getElementsByTagName('*'); 
//通过className刷选 
for (var i=0; i<_el.length; i++ ) { 
if (_el[i].className == class_name ) { 
el[el.length] = _el[i]; 
} 
} 
return el; 
} 
//导航条,悬停在顶部 
function naviga_stay_top(){ 
var a_navigation_bar = []; 
if(document.getElementsByClassName){//Chrome, FF 
a_navigation_bar = document.getElementsByClassName("navigation"); 
} else {//IE 
a_navigation_bar = my_getElementsByClassName("navigation"); 
} 
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; 
if( scrollTop > naviga_offsetTop){ 
a_navigation_bar[0].style.top = scrollTop + "px"; 
} else { 
a_navigation_bar[0].style.top = naviga_offsetTop + "px"; 
} 
} 

//给导航条上四个tab,加上点击事件。 
window.onload=function(){ 
var a_tabs = []; 
if( document.getElementsByClassName ){//Chrome, FF 
a_tabs = document.getElementsByClassName("tab"); 
}else{ //IE 
a_tabs = my_getElementsByClassName("tab"); 
} 
var a_contents = []; 
if( document.getElementsByClassName ){//Chrome, FF 
a_contents = document.getElementsByClassName("content"); 
}else{//IE 
a_contents = my_getElementsByClassName("content"); 
} 
a_tabs[0].onclick=function(){ 
window.scrollTo(0, a_contents[2].offsetTop); 
} 
a_tabs[1].onclick=function(){ 
window.scrollTo(0, a_contents[3].offsetTop); 
} 
a_tabs[2].onclick=function(){ 
window.scrollTo(0, a_contents[4].offsetTop); 
} 
a_tabs[3].onclick=function(){ 
window.scrollTo(0, a_contents[5].offsetTop); 
} 
//获取页面上,导航条到顶部的位置 
var a_navigation_bar = []; 
if(document.getElementsByClassName){//Chrome, FF 
a_navigation_bar = document.getElementsByClassName("navigation"); 
} else {//IE 
a_navigation_bar = my_getElementsByClassName("navigation"); 
} 
naviga_offsetTop = a_navigation_bar[0].offsetTop; 
//给滚动条以及鼠标加上滚动事件 
// window.onscroll= naviga_stay_top; 
// document.onmousewheel= naviga_stay_top; 
if( window.attachEvent) //IE 
{ 
window.attachEvent("onmousewheel", naviga_stay_top); 
window.attachEvent("onscroll", naviga_stay_top); 
document.attachEvent("onmousewheel", naviga_stay_top); 
document.attachEvent("onscroll", naviga_stay_top); 
} else {//Chrome ,FF 
window.addEventListener("mousewheel", naviga_stay_top,false); 
window.addEventListener("scroll", naviga_stay_top,false); 
document.addEventListener("mousewheel", naviga_stay_top,false); 
document.addEventListener("scroll", naviga_stay_top,false); 
} 
}

不知道什么原因,在IE上,滚动滚动条或者鼠标滚轮的时候,导航栏会抖动;而在Chrome和FF上有没有任何问题。还望高人指点。
Javascript 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
Javascript 入门基础学习
Mar 10 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
Javascript基础教程之变量
Jan 18 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jquery购物车实时结算特效实现思路
Sep 23 #Javascript
js下拉菜单语言选项简单实现
Sep 23 #Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 #Javascript
读取input:file的路径并显示本地图片的方法
Sep 23 #Javascript
js/html光标定位的实现代码
Sep 23 #Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 #Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 #Javascript
You might like
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
vue路由跳转传参数的方法
2019/05/06 Javascript
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
Python模拟登录验证码(代码简单)
2016/02/06 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
python的继承知识点总结
2018/12/10 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
python识别验证码图片实例详解
2020/02/17 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
个人生活学习自我评价范文
2013/11/26 职场文书
小学生评语大全
2014/04/18 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
道歉短信大全
2015/05/12 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis