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

Source: Internet
Author: User
Tags testnav
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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.