导航条滑动效果, 并且在点击后选中当前页面的导航栏选项 

<ul class="nav_bar">
   <li><a href="index.html">首页</a></li>
   <li><a href="solution.html">解决方案</a></li>
   <li><a href="company_case.html">公司案例</a></li>
   <li><a href="news_information.html">新闻动态</a></li>
   <li><a href="about_WizardTech.html">关于我们</a></li>
   <i id="nav_bar_slip"></i>
</ul>
 1 function navBar(index){
 2     var navSlip = $('#nav_bar_slip');
 3     var navA = $(".nav_bar li").eq(index).find('a');
 4     navSlipLeft = navA.position().left;
 5     var leftPos,newWidth,$el;
 6     navSlip.css({
 7         'width':navA.width(),
 8         'left' :navSlipLeft + 'px',
 9     });
10     var navSlip_l = navSlip.position().left;
11     var navSlip_w = navSlip.width();
12     $(".nav_bar li a").hover(function() {
13         $el = $(this);
14         leftPos = $el.position().left;
15         newWidth = $el.parent().width();
16         $el.css("color", "#3987EF");
17         navSlip.stop().animate({
18             left: leftPos,
19             width: newWidth
20         });
21     }, function() {
22         $el.css("color", "#484848");
23         navA.css('color', '#3987EF');
24         navSlip.stop().animate({
25             left: navSlip_l,
26             width: navSlip_w
27         });    
28     });  
29 }
30  var windowUrl=window.location.href; // 获取当前页面的url
31  var urlstatus = false;
32  var index = 0;
33 $(".nav_bar li a").each(function(){
34     if ((windowUrl + '/').indexOf($(this).attr('href')) > -1 && $(this).attr('href')!='') {
35         index = $(this).parent().index()
36         navBar(index);
37         $(this).css("color","#3987EF");
38         urlstatus = true;
39     }
40 });

 

posted @ 2017-09-23 01:17  HanselH  阅读(1655)  评论(0)    收藏  举报