JS はナビゲーションバーのホバー効果を実装します_javascript スキル-jsチュートリアル-php.cn

JS-实现导航栏悬停

先布个局：

复制代代码如下:

テスト

追加简单的样式：

 
div.main{ 
幅: 800px; 
背景: #CCC; 
マージン: 10px 自動 0; 
位置: 相対。 
} 

div.content{ 
幅: 800px; 
高さ: 400ピクセル; 
背景: 黄色; 
マージン: 10px 自動 0; 
} 

div.navigation{ 
幅: 800px; 
高さ: 40px; 
背景: 赤; 
マージン: 4px 自動 0; 
トップ: 400ピクセル; 
左: 0px; 
位置: 絶対。 
} 

div.tab{ 
幅: 195px; 
高さ: 40px; 
背景: 青; 
フロート: 左; 
マージン左: 5px; 
} 

JS:

复制代代以下:

 
//ページ上のナビゲーション バーの元の位置を記録します
var naviga_offsetTop = 0; 

//IE7 は getElementsByClassName を認識しません。互換性のために、
 関数をカスタマイズします。 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] = 
} 
} 
return el; 
} 

// ナビゲーション バー、上部に移動 
function naviga_stay_top(){ 
var a_navigation_bar = []; .getElementsByClassName ){//Chrome, FF 
a_navigation_bar = document.getElementsByClassName("navigation") 
} else {//IE 
a_getElementsByClassName("navigation"); varscrollTop = 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"; 
} 
} 


// ナビゲーション バーに 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 ); 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; //IE 
{ 
window.attachEvent("onmousewheel", naviga_stay_top); .attachEvent("onscroll", naviga_stay_top); 

document.attachEvent("onmousewheel", naviga_stay_top); 
document.attachEvent("onscroll", naviga_stay_top); , FF 
window.addEventListener("mousewheel", naviga_stay_top,false); 
window.addEventListener("scroll", naviga_stay_top,false); 

document.addEventListener("mousewheel", naviga_stay_top, false ; または、マウス ホイールを回すとナビゲーション バーが震えますが、Chrome と FF では問題ありません。専門家からのアドバイスを期待しています。

JS はナビゲーション バーのホバー効果を実装します_javascript スキル

JS はナビゲーションバーのホバー効果を実装します_javascript スキル