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

前端技术 2023/09/08 JavaScript

本文实例讲述了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\");
});

代码写的比较粗糙，再加上自己水平有限，或许您可以简化写的更好（反正大致思路应该就是这样+_+）。

注意：代码中使用了easing插件的效果。记得要去下载并引用这个插件。如果不想使用easing插件则可将JS中的“easeOutBack”删掉或者换成“swing”。

demo中的菜单的链接地址我使用了javascript:void(0)代替，主要目的是为了方便演示效果。在实际运用中，我们可以根据当前的url来判断当前所在位置，确定位置之后再重新给JavaScript中变量m赋值，从而能确定线条应处于哪个菜单下。当然肯定还有其他方法来判断当前位置。

希望本文所述对大家的jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/20950

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案