首頁 > 開發者 > 網站開發

jQuery 導航條動態美化效果

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

藉助 外掛程式 Lavalamp實現導航條動態顯示效果， 以前用animate來實現，效果不是很好

<script src="js/jquery-2.0.0.min.js" type="text/javascript"></script>

<script src="js/jquery.easing.min.js" type="text/javascript"></script>
<script src="js/jquery.lavalamp.js" type="text/javascript"></script>
<script type="text/javascript">
        $(function() {
$(".nav").lavaLamp({ 
fx: "backout",
speed: 1100,
mouseover:function(event, menuItem){alert();}
});            
        });

    </script>

<style>

.nav {
width:650px;
height:100px;
float:left;
position: relative;
}
.nav li {
width:auto;
min-width:40px;
line-height:100px;
padding:0 15px;
margin:0 10px 0 0;
color:#000;
font-size:14px;
text-align:center;
float:left;
}
.nav li.back {
background: #86bf40;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
line-height: 2;
width: 40px;
height: 100px; /*----*/
z-index: 1; /*----*/
position: absolute; /*----*/
margin-top: 0px;
margin-left:5px;
}
.nav li a {
color: #000;
z-index: 2; /*----*/
font-variant: small-caps;
text-decoration: none;
position: relative; /*----*/
margin: auto 10px;
}

</style>

</head>

<body>
<!-- header -->
<div class="headerbox">
  <div class="header"> <a href="http://www.uuspeed.com/" class="logo"><img src="images/logo.png" alt="優速雲" /></a>
    <ul class="nav">
      <li class="current"><a href="#">首&nbsp;頁</a></li>
  <li class="1"><a href="#">個人版</a></li>
  <li class="2"><a href="#">中小版</a></li>
  <li class="3"><a href="#">企業版</a></li>
  <li class="4"><a href="#">服務與價格</a></li>
  <li class="5"><a href="#">關於我們</a></li>
      </a>
    </ul>
    <div class="login"> <a href="" class="icon_login">登 錄</a> <a href="" class="icon_login">注 冊</a> </div>
  </div>
</div>
 

</body>

</html>

////    ------lavalamp.js檔案修改--------------

(function($) {
$.fn.lavaLamp = function(o) {
    o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});


    return this.each(function() {
        var me = $(this), 
noop = function(el){

},
        $back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
        $li = $("li", this), 
curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];


        $li.not(".back").hover(function() { move(this);});


$(".nav li:eq(0) a").css("color","#FFF");
        function setCurr(el) {alert(el.offsetWidth);
            $back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
            curr = el;

        };

        function move(el) {
            $back.each(function() {
                $.dequeue(this, "fx"); }
            ).animate({
                width: el.offsetWidth-40,
                left: el.offsetLeft
            }, o.speed, o.fx,function(){
var a0=$(".nav li:eq(0) a");
var a1=$(".nav li:eq(1) a");
var a2=$(".nav li:eq(2) a");
var a3=$(".nav li:eq(3) a");
var a4=$(".nav li:eq(4) a");
var a5=$(".nav li:eq(5) a");
if(el.offsetLeft==0){
$(".nav li:eq(0) a").css("color","#FFF");
a1.css("color","#000");
a2.css("color","#000");
a3.css("color","#000");
a4.css("color","#000");
a5.css("color","#000");
}
if(el.offsetLeft==92){
$(".nav li:eq(1) a").css("color","#FFF");
a0.css("color","#000");
a2.css("color","#000");
a3.css("color","#000");
a4.css("color","#000");
a5.css("color","#000");
}
if(el.offsetLeft==194){
$(".nav li:eq(2) a").css("color","#FFF");
a1.css("color","#000");
a0.css("color","#000");
a3.css("color","#000");
a4.css("color","#000");
a5.css("color","#000");
}
if(el.offsetLeft==296){
$(".nav li:eq(3) a").css("color","#FFF");
a1.css("color","#000");
a2.css("color","#000");
a0.css("color","#000");
a4.css("color","#000");
a5.css("color","#000");
}
if(el.offsetLeft==398){
$(".nav li:eq(4) a").css("color","#FFF");
a1.css("color","#000");
a2.css("color","#000");
a3.css("color","#000");
a0.css("color","#000");
a5.css("color","#000");
}
if(el.offsetLeft==528){
$(".nav li:eq(5) a").css("color","#FFF");
a1.css("color","#000");
a2.css("color","#000");
a3.css("color","#000");
a4.css("color","#000");
a0.css("color","#000");
}
});
        };


    });

};
})(jQuery);

效果見http://www.uuspeed.com/

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
htmlspecialchars jquery jquery exit jquery uppercase jquery urlencode sleep jquery best jquery jquery ssl
相關文章
自學成才的秘密：115個 web Develop 資源_經典網摘
H5 中html 頁面存為圖片並長按 儲存
__x__(20)0907第四天__ css 框模型
SVN提示https認證驗證失敗問題svn: E230001: Server SSL certificate verifi...
JS如何判斷文字是全形還是半形（轉載）
Citrix NetScaler產品學習筆記之一：Citrix NetScaler概述

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More