JS 实现导航栏悬停效果

 更新时间:2013年09月23日 15:28:26   作者:   我要评论
使用js实现的导航栏悬停效果在IE上,滚动滚动条或者鼠标滚轮的时候,导航栏会抖动;而在Chrome和FF上有没有任何问题
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实现带数据验证和复选框的表单提交

    基于JavaScript实现带数据验证和复选框的表单提交

    这篇文章主要介绍了基于JavaScript实现带数据验证和复选框的表单提交功能,需要的朋友可以参考下
    2017-08-08
  • JavaScript中变量的相互引用

    JavaScript中变量的相互引用

    变量相互引用的原因是:由于某些类型的变量是按地址存储的而导致的两个或多的参数的值互相影响.
    2010-05-05
  • TypeScript Type Innference(类型判断)

    TypeScript Type Innference(类型判断)

    TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。接下来通过本文给大家介绍TypeScript Type Innference(类型判断)的相关知识,需要的朋友参考下
    2016-03-03
  • JavaScript 生成随机数并自动大小排序

    JavaScript 生成随机数并自动大小排序

    JavaScript按规定生成随机数,并按指定顺序自动排序,本例中将生成1——100以内的随机数,并按照由小到大的顺序排列起来。
    2009-12-12
  • JS实现带动画的回到顶部效果

    JS实现带动画的回到顶部效果

    这篇文章主要为大家详细 介绍了JS实现带动画的回到顶部效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • JS简单封装的图片无缝滚动效果示例【测试可用】

    JS简单封装的图片无缝滚动效果示例【测试可用】

    这篇文章主要介绍了JS简单封装的图片无缝滚动效果,结合完整实例形式分析了javascript针对图片无缝滚动功能实现的具体操作技巧,包括鼠标事件响应、事件函数及页面元素属性动态变换等相关操作技巧,需要的朋友可以参考下
    2017-03-03
  • Ionic3 UI组件之autocomplete详解

    Ionic3 UI组件之autocomplete详解

    这篇文章主要为大家详细介绍了Ionic3 UI组件之autocomplete的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • javascript网页关闭时提醒效果脚本

    javascript网页关闭时提醒效果脚本

    当页面载入和关闭时会出现一些提示信息的代码。方便提醒用户,但不建议多用,让人感到反感。
    2008-10-10
  • javascript 贪吃蛇实现代码

    javascript 贪吃蛇实现代码

    最近在学Javascript,花了半个月的时间终于把《Javascript权威指南》(推荐此书,入门级) 扫完。 在学习的过程中发现使用JS实现动态效果挺有趣的。
    2008-11-11
  • 微信小游戏之使用three.js 绘制一个旋转的三角形

    微信小游戏之使用three.js 绘制一个旋转的三角形

    three.js是一个可以使用javascript绘制3d图形的库,它对WebGL的api进行封装,使开发更加方便,就像jQuery对DOM的api进行封装一样。这篇文章主要介绍了微信小游戏之使用three.js 绘制一个旋转的三角形,需要的朋友可以参考下
    2019-06-06

最新评论