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

2019-11-19 18:08:55

字體：大中小

來源：轉載

供稿：網友

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

您可以狠狠地點擊這里：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">圣誕節</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; //單擊觸發事件 }});

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

5、完成預覽

一般而言，預覽就可以看到效果了。如果您在IE6下發現背景圖片移動不順暢，試試在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這個標簽層的寬度以及left的位置了，也就是動畫效果了。這需要結合easing緩動插件了，如果僅是單純的移動，easing插件是不需要的，animate函數即可實現。