服务器之家

服务器之家 > 正文

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

时间:2021-07-31 17:23     来源/作者:穗溪

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

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

效果如下:

首页
说说
日志
相册
   
CSS:

?
1
2
3
4
5
6
7
8
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:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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程序设计有所帮助。

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021德云社封箱演出完整版 2021年德云社封箱演出在线看
2021德云社封箱演出完整版 2021年德云社封箱演出在线看 2021-03-15
返回顶部