jQuery实现带滚动线条导航效果的方法_JavaScript

jQuery实现带滚动线条导航效果的方法

2021-07-31 17:23穗溪 JavaScript

这篇文章主要介绍了jQuery实现带滚动线条导航效果的方法,分析了带滚动条导航效果的实现原理与相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jQuery实现带滚动线条导航效果的方法。分享给大家供大家参考。具体分析如下：

最早见到这种导航是在魅族的官网，当时（去年）觉得挺不错的但自己不会JavaScript，因此那时“可望而不可及”。今日去手机QQ for Android官网，又发现类似这样的导航，反正自己也没啥事，所以就尝试用jQuery做出这样的效果。

效果如下：

首页
说说
日志
相册

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");

									});