本文實例講述了jQuery實現的導航動畫效果。分享給大家供大家參考，具體如下：
經常在網上看到的，鼠標在導航上移動時，導航底部的橫條會自動移動到鼠標懸浮的導航項上。
效果如下圖：
利用jquery的 animate 函數，很好實現。代碼很簡單！
代碼如下：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>測試</title> <script src="jquery-1.9.1.min.js"></script></head><body><div class="nav" style="margin: 100px auto; width:960px;"><a class="active" href="#">首頁</a><a href="#">產品</a><a href="#">新聞中心</a><a href="#">關于我們</a><a href="#">聯系我們</a><a href="#">首頁</a><a href="#">首頁</a><div class="line"></div></div><style>.nav{ position:relative;}.nav a{ padding:10px 20px; border-bottom:solid 3px #fff; text-decoration: none; color:#666;}.nav a:hover{ color:#66f;}.nav .active, .nav .active:hover{ color:#f33;}.nav .line{ position:absolute; border-top:solid 2px red; width:0; left:0; top:0;}</style><script>function navLine(o, bo){ var x = '' + (o.position().top + o.outerHeight() - 2) + 'px'; var y = '' + o.position().left + 'px'; var w = '' + o.outerWidth() + 'px'; var h = '2px'; $('.nav .line').stop(); if (bo) { $('.nav .line').css({width:w, height:h, top:x, left:y}); } else { $('.nav .line').animate({width:w, height:h, top:x, left:y}); }}$(function(){ navLine($('.nav .active'), true); $('.nav a').hover(function(){ navLine($(this)); }, function(){ navLine($('.nav .active')); });});</script></body></html>完整實例代碼點擊此處本站下載。
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
