Jquery滑动菜单lavalamp
doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>xuyaoxiang</title>
<style>
body{margin:0px;padding:0px;}
.lavaLamp{
position: relative; /*--重要--*/
background-color: white;
margin: 0px 0; /*--对IE很重要--*/
line-height:28px;
height:28px;
}
.lavaLamp li{
float: left; /*--重要--*/
list-style: none;
}
.lavaLamp li.back{
width:9px;
background-color:#F66;
height: 28px; /*--较为重要--*/
z-index: 1; /*--较为重要--*/
position: absolute; /*--重要--*/
}
.lavaLamp li a{
color:#4F4F4F;
z-index: 2; /*--较为重要；如修改，数值必须大过上一个 z-index --*/
font-variant:small-caps;
text-decoration:none;
position: relative; /*--重要--*/
margin: auto 10px;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js?ver=1.2.6'></script>
<script type='text/javascript' src='http://shawnster.org/jQuery/lavalamp.min.js'></script>
<script type='text/javascript' src='http://shawnster.org/jQuery/easing.js'></script>
<script type="text/javascript">
$(function(){$(".lavaLamp").lavaLamp({ fx: "backout", speed: 333 })});
</script>
</head>
<body>
<div>
<ul class="lavaLamp">
<li><a target="_blank" href="http://www.topit.me/fashion">Fashion | 时尚</a></li>
<li><a target="_blank" href="http://www.topit.me/art">Art | 艺术</a></li>
<li><a target="_blank" href="http://www.topit.me/photography">Photography | 摄影</a></li>
<li><a target="_blank" href="http://www.topit.me/design">Design | 设计</a></li>
<li><a target="_blank" href="http://www.topit.me/illustration">Illustration | 插画</a></li>
<li><a target="_blank" href="http://www.topit.me/featured">Featured | 主题</a></li>
</ul>
</div>
</body>
</html>
