JavaScript實戰(zhàn)之帶收放動畫效果的導航菜單

更新時間：2016年08月16日 09:35:14 作者：蘇福

這篇文章主要為大家詳細介紹了JavaScript實戰(zhàn)之帶收放動畫效果的導航菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下

雖然有很多插件可用，但為了共同提高，我做了一系列JavaScript實戰(zhàn)系列的實例，分享給大家，前輩們?nèi)粲泻玫慕ㄗh，請務必指出，免得誤人子弟??！
今天是第一戰(zhàn)：帶收放動畫效果的菜單，效果如下圖：（樣式有點丑(-^-)）
（由于在寫本文時，用的編輯器不同，暫時添加不了演示效果，這里有：最終完整代碼和演示）

動畫效果：鼠標hover改變所有目標的背景和字體顏色，鼠標移動到‘首頁導航'，顯示下面的分組菜單，分組菜單有子菜單，點擊可縮放，帶動畫過度效果！而且，可以隨便添加和刪除導航菜單和子菜單，不影響效果！

如何實現(xiàn)呢？

第一步：用什么來實現(xiàn)菜單？HTML代碼設計如下，遵循JS代碼和HTML代碼分離的原則！這里你看不到一句JS代碼

未應用樣式之前是這個樣子的：很古老吧?。?！

第二步：CSS樣式。鼠標hover改變所有目標的背景和字體顏色，直接用CSS的transition和:hover，而其他的CSS樣式布局就不全部列舉了，大家自己動手吧，主要注意以下幾點：

 #ul{
 ....
 z-index: 100;
 }
 #ul li{
 display: inline-block;
 position: relative;
 top: 0;
 left: -25px;
 width: 10%;
 min-width: 70px;
 height: 30px;
 text-align: center;
 line-height: 30px;
 border: 1px solid gray;
 border-radius:10px;
 background-color: aliceblue;
 cursor: pointer;
 -webkit-transition: all ease-in-out 0.3s;
 -moz-transition: all ease-in-out 0.3s;
 -ms-transition: all ease-in-out 0.3s;
 -o-transition: all ease-in-out 0.3s;
 transition: all ease-in-out 0.3s;
 }
 #ul li:hover{background-color: aquamarine;color: red;}
 ...
 .show-hide:hover{background-color: beige}
 .a-div{
 background-color: aquamarine;
 border-radius:10px;
 color: black;
 display: none;
 opacity: 0
 }
 .a{
 z-index: -1;
 display: block;
 ...
 }

第三步：這一步是重點。如果給每個菜單選項和分組都添加事件監(jiān)聽，個人覺得好麻煩，且代碼量肯定多不少，有沒有什么辦法就在一個元素上加監(jiān)聽就能實現(xiàn)呢？

答案肯定是有的，利用事件的冒泡機制！在父元素ul標簽上添加事件監(jiān)聽，而在監(jiān)聽函數(shù)里直接改變觸發(fā)事件的元素樣式就可以了，就這么簡單！

代碼如下：

var ul = document.getElementById('ul');
ul.addEventListener('mouseover',listener1,false);
ul.addEventListener('mouseout',listener2,false);
ul.addEventListener('click',listener3,false);

因為IE8及以下版本沒有addEventListener，如果要兼容，還得加attachEvent對應的代碼。

第四步：主角登場！實現(xiàn)listener1、listener2、listener3監(jiān)聽函數(shù)。

首先來最簡單的listener1函數(shù)，代碼如下：

function listener1(event){
 //event = event||window.event; //兼容IE8及以前版本
 var target = event.target||event.srcElement; //兼容IE8及以前版本
 if(target.tagName.toLowerCase() === 'li'){
 var div1 = target.getElementsByTagName('div')[0];
 div1.style.display = 'block';
 var i = 0;
 var id;
 (function foo(){
 if(i>=1){clearTimeout(id);id=null;return;}
 i+=0.2;
 div1.style.opacity = i;
 id = setTimeout(function(){clearTimeout(id);foo()},30); 　

　　　　})(); 　

　}

 }

同樣，一切為了IE8及更舊版本?！　?/p>

1.因為它的event沒有target屬性，只有相對應得srcElement屬性　　

2.而這一句event = event||window.event;這里其實是可以省略的，只有當用屬性來設置注冊事件監(jiān)聽時，如ul.onmouseover = function(){}，或<ul onmouseover='func'>，IE8及更舊版本只能通過window.event來取得當前的Event對象

好了，現(xiàn)在獲得了當前觸發(fā)事件的target，事情就簡單很多了，通過他就可以改變它自己和它的親戚！

下面是listener2函數(shù)，用在mouseout時觸發(fā)，主要是操控target的子元素DIV，代碼如下：

function listener2(event){
 //event = event||window.event;
 var target = event.target||event.srcElement;
 if(target.tagName.toLowerCase() === 'li'){
 var div1 = target.getElementsByTagName('div')[0];
 div1.onmouseover = function(){
 div1.style.display = 'block';
 div1.style.opacity = 1;
 };
 div1.onmouseout = function(){
 div1.style.display = 'none';
 div1.style.opacity = 0;
 };
 div1.style.display = 'none'; //這一組是為了實現(xiàn)當鼠標從上方出去時隱藏div1
 div1.style.opacity = 0;
 }
 }

好了，到這里，已經(jīng)實現(xiàn)了大部分效果了，還有最后一步，那就是1號主角了：listener3函數(shù)，它主要負責鼠標點擊時的縮放效果！

實現(xiàn)原理：　　

1.函數(shù)外面定義一個bool變量當做開關，鼠標點一下開，再點一下關；　　

2.通過setTimeout來實現(xiàn)動畫效果，動態(tài)的改變子菜單的height和opacity屬性，還有display屬性；

完整代碼如下：

var bool = true;
 function listener3(event) {
 var event = event || window.event;
 var target = event.target || event.srcElement;
 if (target.className === 'show-hide') {
 var parent = target.parentElement;
 var adiv = parent.getElementsByClassName('a-div')[0];
 if (window.getComputedStyle(adiv,null).opacity>0.5){bool=false}else{bool=true}
 var height = 90,
 changeH,
 opacity,
 id;
 if (bool) {
 changeH = 0;
 opacity = 0;
 target.innerHTML = '財經(jīng) -';
 (function show() {
 if (changeH > height) {clearTimeout(id);return}
 changeH += 5;
 opacity += 0.06;
 //console.log('opacity:'+adiv.style.opacity+',height :'+adiv.style.height);
 adiv.style.height = changeH + 'px';
 adiv.style.opacity = opacity;
 adiv.style.display = 'block';
 id = setTimeout(function () {
　　　　　　　　　　　　　　　　　　　　　clearTimeout(id);
 show();
 }, 16.7);
 })();

 bool = false;
 } else {
 changeH = height;
 opacity = 1;
 target.innerHTML = '財經(jīng) +';
 (function hidden() {
 if (changeH < 0) {clearTimeout(id);adiv.style.display = 'none';return}
 changeH -= 10;
 opacity -= 0.11;
 //console.log('opacity:'+adiv.style.opacity+',height :'+adiv.style.height);
 adiv.style.height = changeH + 'px';
 adiv.style.opacity = opacity;
 id = setTimeout(function () {
　　　　　　　　　　　　　　　　　　　　　clearTimeout(id);
 hidden();
 }, 16.7);
 })();
 bool = true;
 }
 }
 }

注意幾點：　　

1.記得清除setTimeout的ID，然后退出，否則死循環(huán)，如if (changeH < 0) {clearTimeout(id);adiv.style.display = 'none';return}　　

2.setTimeout的延遲時間設置為16.7是因為符合屏幕的刷新率60FPS，看著舒服　　

3.調(diào)試過程中，設置changeH和opacity的遞增遞減值時，記得打印出來，方便調(diào)試：

console.log('opacity:'+adiv.style.opacity+',height :'+adiv.style.height);　　

4.最后，整個菜單的實現(xiàn)中，最關鍵的是下面這一句，如果沒有這一句，你無法完美實現(xiàn)所有功能，比如：你點開一組子菜單，然后移動到其它組點擊的時候，情況將有很大不同；而window.getComputedStyle用這個的原因是，首次打開時，點任意組的第一下都沒反應，因為直接通過event.target在點第一下時是取不到opacity值的。

if (window.getComputedStyle(adiv,null).opacity>0.5){bool=false}else{bool=true};

不過，IE9以下不支持getComputedStyle方法，IE的Element對象有currentStyle屬性；

如果你對CSS的處理不是很熟悉，看看我的總結：用原生JS讀寫CSS樣式的方法總結

如果你想多了解setTimeout()方法的應用，看看這個：你真的知道setTimeout是如何運行的嗎

對于事件的處理機制，可以看看這個：DOM中的事件處理概覽與原理的全面剖析

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

原生JS實現(xiàn)網(wǎng)絡彩票投注效果
分享一個最近模仿市面彩票系統(tǒng)寫個小案例，沒有使用任何后臺，從投注到開獎再到返獎都是用原生JS實現(xiàn)的。
2016-09-09
js實現(xiàn)適用于素材網(wǎng)站的黑色多級菜單導航條效果
這篇文章主要介紹了js實現(xiàn)適用于素材網(wǎng)站的黑色多級菜單導航條效果,涉及javascript鼠標事件及頁面元素樣式的動態(tài)切換技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08
Javascript實現(xiàn)返回上一頁面并刷新的小例子
這篇文章主要介紹了Javascript實現(xiàn)返回上一頁面并刷新的小例子，有需要的朋友可以參考一下
2013-12-12
JavaScript極簡入門教程（一）：基礎篇
這篇文章主要介紹了JavaScript極簡入門教程（一）：基礎篇,本文講解了JavaScript的基礎語法、操作符、運算符等內(nèi)容,需要的朋友可以參考下
2014-10-10
一個極為簡單的requirejs實現(xiàn)方法
下面小編就為大家?guī)硪黄粋€極為簡單的requirejs實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
jQuery NProgress.js加載進度插件的簡單使用方法
NProgress是基于jquery的，且版本要 >1.8 。這篇文章主要介紹了NProgress.js加載進度插件的簡單使用方法,需要的朋友可以參考下
2018-01-01
在js中使用"with"語句中跨frame的變量引用問題
在js中使用"with"語句中跨frame的變量引用問題...
2007-03-03
js如何實現(xiàn)設計模式中的模板方法
都知道在js中如果定義兩個相同名稱的方法，前一個方法就會被后一個方法覆蓋掉，使用此特點就可以實現(xiàn)模板方法，感興趣的朋友可以了解下本文哈
2013-07-07
js實現(xiàn)簡單貪吃蛇游戲
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單貪吃蛇游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-05-05
JS基于VUE組件實現(xiàn)城市列表效果
這篇文章主要為大家詳細介紹了JS基于VUE組件實現(xiàn)城市列表效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08