快捷導(dǎo)航

基于jQuery實(shí)現(xiàn)火焰燈效果導(dǎo)航菜單

更新時(shí)間：2017年01月04日 14:49:20 作者：張?chǎng)涡?

這篇文章主要介紹了jQuery實(shí)現(xiàn)火焰燈效果導(dǎo)航菜單的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

效果描述為：當(dāng)鼠標(biāo)經(jīng)過(guò)某一導(dǎo)航選項(xiàng)的時(shí)候，后面的背景圖片（上圖“圣誕節(jié)”后圓角背景）會(huì)彈性緩動(dòng)到該導(dǎo)航選項(xiàng)，如果沒(méi)有發(fā)生單擊動(dòng)作，鼠標(biāo)移開后，背景圖又回到原來(lái)的位置。

您可以狠狠地點(diǎn)擊這里：demo效果頁(yè)面

使用說(shuō)明：

1、需要鏈接的文件

需要調(diào)用的文件有：jQuery庫(kù)（1.2以上版本），jQuery緩動(dòng)插件（jquery.easing.min.js），火焰燈效果插件（jquery.lavalamp.min.js）以及一個(gè)ul li列表的樣式文件。例如，本demo實(shí)例頁(yè)面鏈接如下截圖：

2、HTML代碼的寫法

從jQuery代碼來(lái)看，HTML只支持li列表，無(wú)序或有序列表(ol 或 ul)。例如下面的示例：

<ul class="lava_lamp">
    <li class="current"><a href="#zhangxinxu">圣誕節(jié)</a></li>
    <li><a href="#zhangxinxu">地震</a></li>
    <li><a href="#zhangxinxu">股市</a></li>
    <li><a href="#zhangxinxu">《十月圍城》</a></li>
    <li><a href="#zhangxinxu">無(wú)線音樂(lè)咪咕匯</a></li>
</ul>

3、相應(yīng)的CSS寫法

CSS的寫法與平時(shí)使用無(wú)序列表寫導(dǎo)航條是沒(méi)有太大差異的，不同在于最內(nèi)部的a標(biāo)簽需要設(shè)置position為relative并給定一個(gè)相對(duì)較高的層級(jí)(z-index)，這是顯示原理（稍后討論）決定的。還有就是需要添加一個(gè)class為back的li標(biāo)簽的樣式，這個(gè)樣式就是后面移動(dòng)的背景圖片（或背景色或邊框等）的樣式。例如，上面的HTML的CSS可以如下（大致示意）：

/*下邊框*/
. lava_lamp{position:relative; width:421px; height:29px; padding:15px; border:1px solid silver;}
. lava_lamp li{float:left;}
. lava_lamp li a{float:left; font-weight:bold; color:#333333; font-size:14px; top:8px; margin:auto 10px; text-decoration:none; position:relative; z-index:3;}
. lava_lamp li a:hover{text-decoration:none; color:#333333;}
. lava_lamp li.back{height:30px; border-bottom:3px solid #34538b; position:absolute; z-index:2;}

4、js部分的代碼

js用法很簡(jiǎn)單。在$(function(){});之內(nèi)寫上$(“選擇器”).lavaLamp();其實(shí)就可以了。然而一般而言，會(huì)設(shè)置一些參數(shù)。還是上面的例子：

$(". lava_lamp").lavaLamp({
 fx: "backout", //緩動(dòng)類型
 speed: 700, //緩動(dòng)時(shí)間
 click: function(event, menuItem) {
 return false; //單擊觸發(fā)事件
 }
});

這里有三個(gè)參數(shù)：fx,speed,click分別表示緩動(dòng)類型，緩動(dòng)執(zhí)行的時(shí)間，以及單擊菜單后的觸發(fā)的事件。根據(jù)您的需求可以做相應(yīng)的修改，例如：fx: “bounceout”,speed: 1000 。

5、完成預(yù)覽

一般而言，預(yù)覽就可以看到效果了。如果您在IE6下發(fā)現(xiàn)背景圖片移動(dòng)不順暢，試試在js中加入：document.execCommand(“BackgroundImageCache”, false, true);

原理簡(jiǎn)述：

講一下jQuery代碼都做了什么工作：
jQuery首先做的事情就是在ul列表中又添加了一個(gè)class為back的li標(biāo)簽，在CSS中，li.back被設(shè)置為為絕對(duì)定位(position:absolute;z-index:2;)，層級(jí)小于導(dǎo)航中a標(biāo)簽(position:relative;z-index:3;)的層級(jí)，所有，這里含有背景圖片（或背景色或邊框）的li.back標(biāo)簽會(huì)在文字的下方（a標(biāo)簽下方）顯示。

jQuery做的另外一件事情就是控制li.back這個(gè)標(biāo)簽層的寬度以及l(fā)eft的位置了，也就是動(dòng)畫效果了。這需要結(jié)合easing緩動(dòng)插件了，如果僅是單純的移動(dòng)，easing插件是不需要的，animate函數(shù)即可實(shí)現(xiàn)。