学习jQuery之旅 - 使用炫酷的jQuery插件

学习jQuery之旅 - 使用炫酷的jQuery插件2010-12-15 博客园 GWPBrian前两篇文章中，介绍了jQuery中强大的Selectors （选择器）以及开发中比较常用的方法的使用。今天和大家一起体验一下jQuery另一个吸引人的地方--强大炫酷实用的jQuery插件。

做网站的都知道，网站的美工很重要，如果一个BS的软件美工做的不好，技术含量很高，算法再高深，也不会很受到用户的青睐。（其实CS的也是如此）

然而jQuery强大的插件，可以很容易的给我们的网站带来炫酷的效果，以及更人性化得用户体验。下面和大家分享一些开发中可能常用的jQuery插件。

效果：

实现起来非常简单：

Html代码：

<ul class="lavaLamp">
<li><a href="http://www.bianceng.cn/index.php#">主页 </a></li>
<li><a href="http://www.bianceng.cn/index.php#">日志 </a></li>
<li><a href="http://www.bianceng.cn/index.php#">相册 </a></li>
<li><a href="http://www.bianceng.cn/index.php#">留言 </a></li>
<li><a href="http://www.bianceng.cn/index.php#">详细信息 </a></li>
</ul>

css和jQuery代码：

<style>
.lavaLamp
{
position: relative;
height: 29px; width: 600px;
background: url（"image/bg.gif"）;
padding: 15px; margin: 10px 0;
overflow: hidden;
}
.lavaLamp li
{

float:left;
list-style: none;
}
.lavaLamp li.back
{

background: url（"image/lava.gif"） no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLamp li.back .left
{

background: url（"image/lava.gif"） no-repeat top left;
height: 30px;
margin-right: 9px;
}
.lavaLamp li a
{

position: relative; overflow: hidden;
text-decoration: none;
text-transform: uppercase;
font: bold 14px arial;
color: #fff; outline: none;
text-align: center;
height: 30px; top: 7px;
z-index: 10; letter-spacing: 0;
float: left; display: block;
margin: auto 10px;
}
</style>
<script type="text/javascript" src="js/jquery-latest.pack.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>

<script type="text/javascript">
$（function（） { $（".lavaLamp"）.lavaLamp（{ fx: "backout", speed: 700 }）}）;
</script>