效果描述如下：当鼠标经过某个导航选项时，其后面的背景图像(上图中圣诞节后的圆角背景)会弹性减缓到导航选项。如果没有点击动作发生，背景图像将在鼠标移开后返回其原始位置。

你可以点击这里：演示效果页面

使用说明：

1.要链接的文件

需要调用的文件有：jQuery库(1.2以上版本)、jQuery缓解插件(jQuery . easy . min . js)、火焰灯效果插件(jquery.lavalamp.min.js)和一个ul li list的样式文件。例如，以下屏幕截图链接到演示实例页面：

2.如何编写HTML代码

根据jQuery代码，HTML只支持li列表、无序或有序列表(ol或ul)。例如，以下示例：

ul class=' lava _ lamp ' Li class=' current ' a href=' # Zhang Xin Xu ' Christmas/a/li lia href='#zhangxinxu '地震/a/Li lia href=' # Zhang Xin Xu '股市/a/Li lia href=' # Zhang Xin Xu ' 《十月围城》/a/lilia href=' # Zhang Xin Xu '无线音乐miguhui /a/li/ul3，对应CSS编写

写CSS和用无序列表写导航栏没有太大区别。不同的是，最里面的A标签需要将位置设置为相对，并给出相对较高的级别(z-index)，这是由显示原理决定的(稍后讨论)。还有就是需要加上一个带类背的li标签的样式，这就是背景图片的样式(或者背景色或者边框等。)向后移动。例如，上述HTML的CSS可以如下所示(大致说明):

/*下边框*/。lava _ lamp {位置：相对；宽度width:421px高度：29 px；padding:15pxborder:1px纯银；}.lava _ lamp li { float:left}.熔岩灯阿利；font-weight : bold；color: # 333333font-size :14 px；top:8pxmargin:auto 10px文本装饰： none；位置：相对；z索引：3；}.lava _ lamp Li a : hover { text-decoration : none；color: # 333333}.lava _ lamp Li . back { height :30 px；边框-底部：3px实心# 34538b位置：绝对；z索引：2；}4.js部分的代码

js的用法很简单。at $(function(){ })；写$(“选择器”)。lavaLamp()；其实，没关系。但是，一般来说，会设置一些参数。或者上面的例子：

$ ('.lava _ lamp’)。laval amp ({fx:' backout '，//慢速类型speed: 700，//慢速时间点击：函数(event，menuitem){ return false；//点击触发事件} })；这里有三个参数：FX、速度、点击，分别代表慢动作的类型、慢动作的执行时间、点击菜单后触发的事件。可以根据自己的要求做相应的修改，比如fx:“弹开”和速度： 1000。

5.完成预览

一般来说，预览就能看到效果。如果发现IE6下背景图片移动不流畅，可以尝试添加：document。exec command(" background imagecache "，false，true)到js；

原理简介：

让我们来谈谈jQuery代码做了什么：jQuery做的第一件事是在ul列表中添加另一个带有class的li标签。在CSS中，li.back设置为绝对定位(position:absolutez索引：2；)，级别小于导航中的a标签(位置position:relativez索引：3；)，包含背景图片(或背景色或边框)的背面标签将显示在文本下方(A标签下方)。

jQuery做的另一件事是控制标签层li.back的宽度和左边的位置，也就是动画效果。这需要与宽松插件相结合。如果只是简单的移动，轻松插件就不需要了，可以实现动画功能。

你可以点击这里硬：包和下载源文件(zip 24.3k)

参考：http://www.gmarwaha.com/blog/2007/08/23/laval爱奇艺/

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。