jQuery method to implement scrolling line navigation effect_jquery

The example in this article describes how jQuery implements scrolling line navigation effects. Share it with everyone for your reference. The specific analysis is as follows:

The first time I saw this kind of navigation was on Meizu’s official website. At that time (last year) I thought it was pretty good, but I didn’t know JavaScript, so it was “out of reach” at that time. Today I went to the official website of QQ for Android and found a navigation similar to this. I had nothing to do anyway, so I tried to use jQuery to create such an effect.

The effect is as follows:

Home
Tell me
Log
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");
});

The code is relatively rough, and coupled with my limited level, maybe you can simplify it and write it better (the general idea should be like this anyway_).

Note: The effect of the easing plug-in is used in the code. Remember to download and reference this plugin. If you don't want to use the easing plug-in, you can delete "easeOutBack" in JS or replace it with "swing".

I used javascript:void(0) instead for the link address of the menu in the demo. The main purpose is to facilitate the demonstration effect. In practical applications, we can determine the current location based on the current URL. After determining the location, we can reassign the value to the variable m in JavaScript to determine which menu the line should be under. Of course there must be other ways to determine the current location.

I hope this article will be helpful to everyone’s jQuery programming.