JQuery provides a method for performing navigation with scrolling lines. jquery lines

JQuery provides a method for performing navigation with scrolling lines. jquery lines

This article describes how jQuery achieves the effect of scrolling line navigation. 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 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) "> homepage </a> </div> <a href =" javascript: void (0) "> introduction </a> </div> <a href =" javascript: void (0) "> log </a> </div> <a href =" javascript: void (0) "> album </a> </div> <div style =" clear: both; "> </div> <div class =" testline-box "> <span class =" testline "> </span> </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");});

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.