JS 实现导航栏悬停效果
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;
}
//记录导航条原来在页面上的位置
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上有没有任何问题。还望高人指点。
相关推荐
-
Fullpage.js固定导航栏-实现定位导航栏
FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和移动设备. 开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自动定位到这一页的标签 2.当然点击标签时,也是滚动到那一页而不是直接跳转的. 一.准备工
-
javascript 禁用IE工具栏,导航栏等等实现代码
处理问题时候遇到的,就顺便记录下, 复制代码 代码如下: function OnOpenWin() { if (window.name != "OAopenWindow") { win = window.open("login.aspx", "OAopenWindow", "toolbar=no, menubar=no, scrollbars=no, resizable=yes,location=no,status=no,width=&
-
JS 实现导航栏悬停效果(续2)
[JS-实现导航栏悬停] [JS-实现导航栏悬停(续)] 用Jquery重新写完这个页面之后,发现原来的方法还有是有几个问题: 1.首先Js代码冗余,导航条上的Tab是用js实现跳转而不是超链接: 2.还有导航条本身用fixed定位,但没有被设置为水平居中,而是在JS中更改left值使其居中. 问题2就导致了,当浏览器窗口尺寸发生变化的时候,浏览器中的div的位置都发生了变化,也就导致了没法通过页面中的div动态的给已fixed定位的导航条来定位. 最终的代码更改如下: test.html 复制
-
js导航栏单击事件背景变换示例代码
如下所示; 复制代码 代码如下: <!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><meta http-equiv=
-
JS 实现导航栏悬停效果(续)
上次[JS-实现导航栏悬停]说到,导航栏悬停的那个页面在IE上运行的时候,会出导航栏不停的抖动问题. 解决方法如下: 将导航栏的定位方式由原来的absolute改为fixed,也不知道为什么改为fixed,就不抖了..-_-|| 复制代码 代码如下: div.navigation{ width: 800px; height: 40px; background: red; margin: 4px auto 0; top: 400px; left: 0px; position: fixed; } 为
-
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
最近比较清闲,自己做了个JavaScript NodeTree,网上类似的东西其实挺多的,功能也比这个全,我做这个纯粹为了练练手. 图标可以自定义(16X16),菜单项完全是JSON类型定义的,方便修改. 界面: 使用方法: 1.将NodeTree-JSON.js以及CSS文件夹复制到项目中并引用. 2.引用JQuery框架. 3.修改NodeTree-JSON.js中的NodeTreeMenu菜单项,以下是简单说明. 复制代码 代码如下: var NodeTreeMenu = [ //id:节
-
一步步教大家编写酷炫的导航栏js+css实现
一步一步的学习制作导航栏,文章末尾再做个综合页面,分享给大家一个炫酷的导航栏供大家参考,具体内容如下 1.当前页面高亮显示的导航栏 首先是HTML代码,很简单,ul+li实现菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏一</title> </head> <body>
-
JS滚动到指定位置导航栏固定顶部
最近整理一下之前做的一个项目,把滚动条动态固定顶部的代码整理出来和大家分享,上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js滚动到指定位置导航栏固定顶部</title> <style type="text/css"> body{height: 2500px; margin: 0; padding: 0
-
JS 实现导航栏悬停效果
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"> <met
-
javascript实现导航栏分页效果
本文实例为大家分享了js实现导航栏分页效果的具体代码,供大家参考,具体内容如下 1.结构搭建HTML代码 <div class="page"></div> 2.页面修饰的css样式代码 .page{ width:500px;margin:100px auto;color: #ccc; }.page a{ display: inline-block;color: #428bca;height: 25px; line-height: 25px;padding: 0
-
js实现导航栏上下动画效果
本文实例为大家分享了js实现导航栏上下动画的具体代码,供大家参考,具体内容如下 obj.currentStyle[name] 与 getComputedStyle(obj,false)[name],一个是支持IE 一个支持FE完美运动js插件,能根据传进来的值,进行匹配,从而得到了理想的运动效果,也就是运行逻辑.实现上下动画动画效果就是控制元素height的值,通过不断的修改该值,就能呈现所谓的动画效果,这里就需要用到定时器 定时器有两种 重复不断的定时器 setInterval(fn,time
-
JS实现导航栏楼层特效
本文实例为大家分享了JS实现导航栏楼层的具体代码,供大家参考,具体内容如下 知识点 1.多个事件有冲突的时候,需要设置flag判断是什么事件,进而进行后续操作. 2.楼层效果就是判断scrollTop和offsetTop的关系 3.引入工具库工具库 运行效果 导航与界面实现互动 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t
-
使用html+css+js实现导航栏滚动渐变效果
目录 实现: 1.定义导航栏的文字标签: 2.导航栏整体的样式: 3.北极光这个logo的样式: 4.给北极光logo定位一个图片在文字左边: 5.右边导航标签的一些样式,样式等都不做详细说明了,毕竟每个人的都不一样~: 6.当页面有滚动后导航栏的样式,padding上下变小,字体颜色变,有了蓝背景色: 7.简单js,实现部分: 第一种: 第二种:直接这样: 完整代码: 先看效果: 实现: 1.定义导航栏的文字标签: <div class="tou"> <sapn c
-
ViewPager顶部导航栏联动效果(标题栏条目多)
如果标题栏过多,超过屏幕的宽度,该怎么弄,下面我们就来解决一下,效果如下: 其实和之前写的也差不多,我就是在哪个demo里面添加和修改了一下,就加了几个title标题,加了几个图片,最重要的是给TableLayout添加了一个属性: app:tabMode="scrollable" 这个属性就是设置设置TableLayout可以滚动,看我滚动上面的标题栏: 这里我还给标题栏设置了几个附加的属性,让它显得更好看: <span style="white-space:pre&
-
JavaScript实现精美个性导航栏筋斗云效果
实现效果: 实现效果如下图所示 实现原理: 什么是筋斗云效果: •这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录. 实现思路: •鼠标经过的时候,利用offsetLeft获得当前盒子距离左侧的距离,把这个值赋给缓动动画的end值. •当点击的时候记住当前的offsetLeft值,当鼠标经过的时候把之前点击的offsetLeft给现在经过时候的值. 实现代码: 下面是实现代码以及详细注释,核心设置一个position为absolute的span标签,通过绑定鼠标事件