借助插件Lavalamp實現導航條動態顯示效果,以前用animate來實現,效果不是很好 複製程式碼 程式碼如下: <BR>$(function() { <BR>$(".nav").lavaLamp({ <BR>fx: "backout", <BR>speed: 1100, <BR> mouseover:function(event, menuItem){alert();} <BR>}); <BR>}); <br><br> <br><br>.nav { <BR>width:650px; <BR>height:100px; <BR>float:left; <BR>position: relative; <BR>} <BR>.nav li { <BR>width:auto; <BR>min-width:40px; <BR>line-height:100px; <BR>padding:0 15px; <BR>margin:0 10px 0 0; <BR>color:#000; <BR>font-size :14px; <BR>text-align:center; <BR>float:left; <BR>} <BR>.nav li.back { <BR>background: #86bf40; <BR>-moz-border-radius: 5px; <BR>-webkit-border-radius: 5px; <BR>line-height: 2; <BR>width: 40px; <BR>height: 100px; /*----*/ <BR>z/ <BR>z -index: 1; /*----*/ <BR>position: absolute; /*----*/ <BR>margin-top: 0px; <BR>margin-left:5px; <BR>} <BR>.nav li a { <BR>color: #000; <BR>z-index: 2; /*----*/ <BR>font-variant: small-caps; <BR> text-decoration: none; <BR>position: relative; /*----*/ <BR>margin: auto 10px; <br>} <br><BR> 首 頁 個人版 中小版 企業版 服務與價格 關於我們 登入 註冊 div>