jQuery で実装されたナビゲーションアニメーション効果 (デモソースコード付き)

jQuery で実装されたナビゲーションアニメーション効果 (デモソースコード付き)_jquery

WBOY

リリース： 2016-05-16 15:07:00

オリジナル

1663 人が閲覧しました

この記事の例では、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 プログラミングのすべての人に役立つことを願っています。