Learn about the jquery journey

The first two articles introduce the powerful selectors (selectors) in jquery and the use of the more commonly used methods in development. Today I'm going to experience another fascinating place in jquery--powerful cool, practical jquery plug-ins.

Do the website all know, the website art is very important, if a BS software art does not good, the technical content is very high, the algorithm again advanced, also will not be very favored by the user. (In fact CS is also the case)

However, jquery powerful plug-ins, can easily give our site cool effect, and more user-friendly user experience. Let's share some of the jquery plug-ins that might be commonly used in development.

Menu

Effect:

The implementation is very simple:

HTML code:

<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 and jquery code:

<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>