$(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插件的内容，即设置动画的效果。
以上所述是小编给大家介绍的jQuery+CSS3实现四种应用广泛的导航条制作实例详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: