jQuery-Methode zum Implementieren der Bildlaufliniennavigation effect_jquery

Das Beispiel in diesem Artikel beschreibt, wie jQuery Scroll-Navigationseffekte implementiert. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Das erste Mal, dass ich diese Art der Navigation sah, war auf der offiziellen Website von Meizu. Damals (letztes Jahr) fand ich sie ziemlich gut, aber ich kannte kein JavaScript, also war sie „außerhalb der Reichweite“. Zeit. Heute bin ich auf die offizielle Website von QQ für Android gegangen und habe eine ähnliche Navigation gefunden. Ich hatte sowieso nichts zu tun, also habe ich versucht, mit jQuery einen solchen Effekt zu erzielen.

Der Effekt ist wie folgt:

Startseite
Sag es mir
Protokoll
Album
 
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");
});

Der Code ist relativ grob und in Verbindung mit meinem begrenzten Niveau können Sie ihn vielleicht vereinfachen und besser schreiben (die allgemeine Idee sollte sowieso so sein_).

Hinweis: Der Effekt des Easing-Plug-Ins wird im Code verwendet. Denken Sie daran, dieses Plugin herunterzuladen und darauf zu verweisen. Wenn Sie das Easing-Plugin nicht verwenden möchten, können Sie „easeOutBack“ in JS löschen oder durch „swing“ ersetzen.

Ich habe stattdessen javascript:void(0) für die Linkadresse des Menüs in der Demo verwendet. Der Hauptzweck besteht darin, den Demonstrationseffekt zu erleichtern. In praktischen Anwendungen können wir den aktuellen Standort anhand der aktuellen URL ermitteln. Nachdem wir den Standort ermittelt haben, können wir den Wert der Variablen m in JavaScript neu zuweisen, um zu bestimmen, unter welchem ​​Menü sich die Zeile befinden soll. Natürlich muss es andere Möglichkeiten geben, den aktuellen Standort zu bestimmen.

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.