jQuery实现带滚动线条导航效果的方法教程
程序员文章站
2022-06-08 10:55:40
本文实例讲述了jquery实现带滚动线条导航效果的方法。分享给大家供大家参考。具体分析如下:
最早见到这种导航是在魅族的官网,当时(去年)觉得挺不错的但自己不会javascrip...
本文实例讲述了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 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:
<p id="testnav"> <p class="testmenu"> <p class="testbox"> <p><a href="javascript:void(0)">首页</a></p> <p><a href="javascript:void(0)">说说</a></p> <p><a href="javascript:void(0)">日志</a></p> <p><a href="javascript:void(0)">相册</a></p> </p> <p style="clear:both;"></p> <p class="testline-box"> <span class="testline"></span> </p> </p> </p>
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"); });
代码写的比较粗糙,再加上自己水平有限,或许您可以简化写的更好(反正大致思路应该就是这样+_+)。
注意:代码中使用了easing插件的效果。记得要去下载并引用这个插件。如果不想使用easing插件则可将js中的“easeoutback”删掉或者换成“swing”。
demo中的菜单的链接地址我使用了javascript:void(0)代替,主要目的是为了方便演示效果。在实际运用中,我们可以根据当前的url来判断当前所在位置,确定位置之后再重新给javascript中变量m赋值,从而能确定线条应处于哪个菜单下。当然肯定还有其他方法来判断当前位置。