Méthode jQuery pour implémenter la navigation par ligne de défilement effect_jquery

L'exemple de cet article décrit comment jQuery implémente les effets de navigation par ligne de défilement. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

La première fois que j'ai vu ce type de navigation, c'était sur le site officiel de Meizu. À cette époque (l'année dernière), je pensais que c'était plutôt bien, mais je ne connaissais pas JavaScript, donc c'était « hors de portée » en plus. temps. Aujourd'hui, je suis allé sur le site officiel de QQ pour Android et j'ai trouvé une navigation similaire à celle-ci. De toute façon, je n'avais rien à faire, j'ai donc essayé d'utiliser jQuery pour créer un tel effet.

L'effet est le suivant :

Accueil
Dis-moi
Journal
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");
});

Le code est relativement approximatif, et couplé à mon niveau limité, vous pouvez peut-être le simplifier et mieux l'écrire (l'idée générale devrait être comme ça de toute façon_).

Remarque : L'effet du plug-in d'assouplissement est utilisé dans le code. Pensez à télécharger et référencer ce plugin. Si vous ne souhaitez pas utiliser le plug-in d'assouplissement, vous pouvez supprimer "easeOutBack" dans JS ou le remplacer par "swing".

J'ai utilisé javascript:void(0) à la place pour l'adresse du lien du menu dans la démo. Le but principal est de faciliter l'effet de démonstration. Dans les applications pratiques, nous pouvons déterminer l'emplacement actuel en fonction de l'URL actuelle. Après avoir déterminé l'emplacement, nous pouvons réattribuer la valeur à la variable m en JavaScript pour déterminer dans quel menu la ligne doit se trouver. Bien entendu, il doit exister d’autres moyens de déterminer l’emplacement actuel.

J'espère que cet article sera utile à la programmation jQuery de chacun.