ホームページ > ウェブフロントエンド > jsチュートリアル > JS はナビゲーション バーのホバー効果を実装します_javascript スキル

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

WBOY
リリース: 2016-05-16 17:21:47
オリジナル
1133 人が閲覧しました

JS-实现导航栏悬停

先布个局:

复制代 代码如下:







テスト



1


2

3

4

5

6

7





追加简单的样式:
复制代码代码如下:

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 では問題ありません。専門家からのアドバイスを期待しています。
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート