スクロールラインナビゲーションを実装するjQueryメソッドeffect_jquery

この記事の例では、jQuery がスクロール ライン ナビゲーション効果を実装する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

この種のナビゲーションを初めて見たのは Meizu の公式 Web サイトでした。当時 (昨年)、これはかなり良いものだと思いましたが、JavaScript を知らなかったので、その時点では「手が届かない」ものでした。時間。今日、QQ for Android の公式 Web サイトにアクセスすると、これに似たナビゲーションが見つかりました。仕方がないので、jQuery を使用してこのようなエフェクトを作成してみました。

効果は次のとおりです:

ホーム
教えてください
ログ
アルバム

CSS:

body,ul,li{margin:0;padding:0;}
#testnav{;height:80px;background:#333;}
.testmenu{width:320px;padding-top:45px;margin:0 auto;}
.testbox div{float:left;width:80px;height:30px;text-align:center;}
.testbox a{color:#ccc;text-decoration:none;font:700 12px/1 "宋体";}
.testbox a:hover{color:#CCEEFF;text-decoration:underline;}
.testline-box{width:100%;background:#eee;}
.testline{display:block;height:3px;width:80px;background:#999;}

HTML:

<div id="testnav">
 <div class="testmenu">
  <div class="testbox">
   <div><a href="javascript:void(0)">首页</a></div>
   <div><a href="javascript:void(0)">说说</a></div>
   <div><a href="javascript:void(0)">日志</a></div>
   <div><a href="javascript:void(0)">相册</a></div>
  </div>
  <div style="clear:both;"></div>
  <div class="testline-box">
 <span class="testline"></span>
 </div>
 </div>
</div>

jQuery:

var $line=$("span.testline");
var $w=$(".testbox > div").width();
var m=0;
$(".testbox > div").each(function(n){
 var x=$w*n;
 $(this).mouseenter(function(){
  $line.stop(true,true).animate({"margin-left":x},"slow","easeOutBack");
 });
 $("a",this).click(function(){
  m=x;
 });
});
$(".testbox").mouseleave(function(){
 $line.stop(true,true).animate({"margin-left":m},"slow","easeOutBack");
});

コードは比較的大まかで、私のレベルが限られているので、簡略化してより適切に記述できるかもしれません (一般的なアイデアはとにかく次のようになります_)。

注: イージング プラグインのエフェクトはコードで使用されています。このプラグインを忘れずにダウンロードして参照してください。イージングプラグインを使用したくない場合は、JS の「easeOutBack」を削除するか、「swing」に置き換えることができます。

デモでは、メニューのリンク アドレスの代わりに javascript:void(0) を使用しました。主な目的は、デモンストレーション効果を促進することです。実際のアプリケーションでは、現在の URL に基づいて現在の場所を決定し、JavaScript の変数 m に値を再割り当てして、その行がどのメニューの下にあるかを決定できます。もちろん、現在位置を特定する他の方法もあるはずです。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。