各式各样的导航条效果css3结合jquery代码实现(4)

$(function () { var index = window.location.href.split("https://www.jb51.net/").length-1; var href = window.location.href.split("https://www.jb51.net/")[index]; $(".nav .nav-list li a[href='"+href+"']").addClass("on"); var li_width = $(".nav .nav-list li a.on").outerWidth(); var li_left = $(".nav .nav-list li a.on").position().left; $(".nav-content .nav-line").css({width:li_width,left:li_left}); $(".nav .nav-list li").hover(function(){ var li_width = $(this).outerWidth(); var li_left = $(this).position().left; $(".nav-content .nav-line").stop().animate({"width":li_width,"left":li_left},{duration:1500,easing:"easeOutElastic"}); },function(){ $(".nav-content .nav-line").stop().animate({"width":li_width,"left":li_left},{duration:1500,easing:"easeOutElastic"}); }); });

主要说几个方法的作用：

1）outerwidth()获取元素的宽度（因为文字的个数不同，宽度就不一样，为了好看，横条需要适应文字的宽度）； 

2）position().left获取元素的位置中left的值； 

3）animate(）实现动画效果； 

4）duration和easing都是jquery easing插件的内容，即设置动画的效果。 

在这里，所有的分享就结束了。