信鸽网

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

  作者：bea

本文实例讲述了jQuery实现带滚动线条导航效果的方法。分享给大家供大家参考。具体分析如下： 最早见到这种导航是在魅族的官网，当时（去年）觉得挺不错的但自己不会JavaScript，因此那时“可望而不可及”。今日去手机QQ for Android官网，又发现类似这样的导航，反正自己也没啥事，所以就尝试用jQuery做出这样的效果。 效果如下： 首页 说说 日志 相册 CSS： body,ul,li{margin:0;padding:0;}#testnav{;heigh

本文实例讲述了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程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: