[jQuery] - LavaLamp 效果

最近迷上了jQuery絢麗的效果!

找了幾個好玩的特效來練習，LavaLamp 是一個滑動的menu特效


要做到上述的動作怎麼辦到呢!?

其實不難，重點在透過活用CSS的配置!!

 接下來大致講解一下使用方法!

1.載入js(廢話)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.lavalamp-1.3.5.js"></script>

P.S.可以再加入easying.js，這樣就會有上面的反彈效果！
2.初始化lavaLamp並做參數設定!

<script type="text/javascript">
$(function() {$(''ul#menu'').lavaLamp();
});</script>

3.寫CSS

<style type="text/css">
div#menu {
	list-style:none;
	margin:5px;
	border:1px solid #333;
	padding:10px;
	overflow:auto; /* makes sure the container fits the floated list-items below */
	background-color:#ccc; /* moved and lightened the background color from div#menu li */
}
div#menu nav{
	margin:3px 5px;
	padding:8px 20px 9px 18px;
	float:left;
	font-family:Tahoma, Verdana, Arial, sans-serif;
	font-size:18px;
	font-weight:bold;
	font-style:italic;
	text-shadow: rgba(255,255,255, 1) 1px 1px 2px;
	color:#333;
}
div#menu nav a {
	position: relative;
	z-index: 5;
	color:#333;
	text-decoration:none;
}
div#menu nav a:hover {
	color:#FFF;
}
div#menu nav.backLava {
	position:absolute;
	z-index:3;
	background:url(images/bg-oranger.jpg) no-repeat top left;
	border:2px solid brown;
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px;  
	border-radius: 10px;
	box-shadow: 2px 2px 3px #000;
	-webkit-box-shadow: 2px 2px 3px #000;
	-moz-box-shadow: 2px 2px 3px #000;
}
</style>

好不容易寫完了，可以來看一下特效了！
P.S.若click動作沒有work的話，就要調整z-index這個參數，
因為卡在圖層的關係！把你要click的圖層往上調整就可以使用這個炫麗的特效了!
參考：
1.Nixbox Designs
2.lavalamp2