JQuery method for implementing the effect of navigation with scrolling lines _ jquery

This article mainly introduces jQuery's method for implementing the navigation effect with scrolling lines, analyzes the implementation principle and related skills of the navigation effect with scroll bars, and has some reference value, for more information, see the following example. Share it with you for your reference. The specific analysis is as follows:

We first saw this kind of navigation on Meizu's official website. at that time (last year), we thought it was quite good, but we didn't know JavaScript, so we were "reachable ". Today, I went to the QQ for Android official website on my mobile phone and found that navigation like this was useless, so I tried to use jQuery to make this effect.

The effect is as follows:

Homepage
Introduction
Logs
Album

CSS:

Body, ul, li {margin: 0; padding: 0 ;}# testnav {; height: 80px; background: #333 ;}. testmenu {width: 320px; padding-top: 45px; margin: 0 auto ;}. testbox p {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:

 
  
   
Homepage
   
Introduction
   
Logs
   
Album
  
  
  
  
 

JQuery:

var $line=$("span.testline");var $w=$(".testbox > p").width();var m=0;$(".testbox > p").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");});

Code writing is rough, and your own level is limited. you may be able to simplify writing better (the general idea is like this + _ + ).

Note:The easing plug-in is used in the code. Remember to download and reference this plug-in. If you do not want to use the easing plug-in, you can delete the "easeOutBack" in JS or change it to "swing ".

I used javascript: void (0) instead of the link address of the menu in the demo to facilitate the demonstration. In practical use, we can determine the current location based on the current url, determine the location, and then assign a value to the m variable in JavaScript to determine the menu under which the line should be located. Of course, there must be other methods to determine the current position.

I hope this article will help you with jQuery programming.