JS는 탐색 모음 hover effect_javascript 기술을 구현합니다.

JS-实现导航栏悬停

先布个局：

复主代码 码如下:

<머리>




<본문>

1

tab1

tab2

tab3

tab4

2

3

4

5

6

7

添加简单的样式：

复主代码 代码如下:

div.main{
너비: 800px;
배경: #CCC;
여백: 10px 자동 0;
위치: 친척;
}

div.content{
너비: 800px;
높이: 400px;
배경: 노란색;
여백: 10px 자동 0;
}

div.navigation{
너비: 800px;
높이: 40px;
배경: 빨간색;
여백: 4px 자동 0;
상단: 400px;
왼쪽: 0px;
위치: 절대;
}

div.tab{
너비: 195px;
높이: 40px;
배경: 파란색;
플로트: 왼쪽;
왼쪽 여백: 5px;
}

JS:

复代码 代码如下:

//페이지 탐색 모음의 원래 위치 기록
var naviga_offsetTop = 0;

//IE7은 getElementsByClassName을 인식하지 못합니다. my_getElementsByClassName(class_name ) {
var el = [];
//모든 요소 가져오기
_el = document.getElementsByTagName('*')//className으로 선택
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
} else {
a_navigation_bar[0].style.top = naviga_offsetTop "px";
}
}


//탐색 표시줄에 탭 4개를 추가하고 클릭 추가 이벤트.
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;

//스크롤 막대 및 마우스에 스크롤 이벤트 추가
// . onscroll= naviga_stay_top;// document.onmousewheel= naviga_stay_top;
if( window.attachEvent) //IE
{
window.attachEvent("onmousewheel", naviga_stay_top); .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 ; 또는 마우스 휠을 돌리면 탐색 표시줄이 흔들리지만 Chrome 및 FF에서는 문제가 없습니다. 전문가님의 조언을 바랍니다.