快捷導(dǎo)航

jQuery實現(xiàn)的導(dǎo)航動畫效果(附demo源碼)

更新時間：2016年04月01日 10:01:43 作者：xiao張

這篇文章主要介紹了jQuery實現(xiàn)的導(dǎo)航動畫效果,可實現(xiàn)導(dǎo)航條的底部橫條隨鼠標移動的效果,涉及jQuery針對鼠標事件的響應(yīng)及頁面元素樣式動態(tài)變換的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)的導(dǎo)航動畫效果。分享給大家供大家參考，具體如下：
經(jīng)常在網(wǎng)上看到的，鼠標在導(dǎo)航上移動時，導(dǎo)航底部的橫條會自動移動到鼠標懸浮的導(dǎo)航項上。

效果如下圖：

利用jquery的 animate 函數(shù)，很好實現(xiàn)。代碼很簡單！

代碼如下：

<!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="#">產(chǎn)品</a>
<a href="#">新聞中心</a>
<a href="#">關(guān)于我們</a>
<a href="#">聯(lián)系我們</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>

完整實例代碼點擊此處本站下載。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: