基于jQuery實現火焰燈效果導航菜單

更新時間：2017年01月04日 14:49:20 作者：張鑫旭

這篇文章主要介紹了jQuery實現火焰燈效果導航菜單的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

效果描述為：當鼠標經過某一導航選項的時候，后面的背景圖片（上圖“圣誕節(jié)”后圓角背景）會彈性緩動到該導航選項，如果沒有發(fā)生單擊動作，鼠標移開后，背景圖又回到原來的位置。

您可以狠狠地點擊這里：demo效果頁面

使用說明：

1、需要鏈接的文件

需要調用的文件有：jQuery庫（1.2以上版本），jQuery緩動插件（jquery.easing.min.js），火焰燈效果插件（jquery.lavalamp.min.js）以及一個ul li列表的樣式文件。例如，本demo實例頁面鏈接如下截圖：

2、HTML代碼的寫法

從jQuery代碼來看，HTML只支持li列表，無序或有序列表(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">無線音樂咪咕匯</a></li>
</ul>

3、相應的CSS寫法

CSS的寫法與平時使用無序列表寫導航條是沒有太大差異的，不同在于最內部的a標簽需要設置position為relative并給定一個相對較高的層級(z-index)，這是顯示原理（稍后討論）決定的。還有就是需要添加一個class為back的li標簽的樣式，這個樣式就是后面移動的背景圖片（或背景色或邊框等）的樣式。例如，上面的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用法很簡單。在$(function(){});之內寫上$(“選擇器”).lavaLamp();其實就可以了。然而一般而言，會設置一些參數。還是上面的例子：

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

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

5、完成預覽

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

原理簡述：

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

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