导航部分选中的背景跟随鼠标滑动

为了让导航li的背景跟随鼠标比较平滑的移动，我进行了一系列尝试，最后发现，若背景加在li上让其跟随鼠标滑动，会出现卡顿效果，所以，将背景放在ul中，让其背景位置随着li的个数改变（ backgroundPosition: navLi.width() * n），这样比较平滑
HTML结构如下：

css代码如下：

#nav-div ul li a {
   text-decoration: none;
    height: 40px!important;
    line-height:40px;
    color:#333;
    font-size:16px;
}
#nav-div {
    width:728px;
    height:45px;
    margin:auto;
    position:relative;
}
#nav-div ul {
    width:100%;
    height:45px;
    list-style:none;
    cursor:pointer;
    background:url(../images/border.gif)no-repeat;   //-----关键：背景图片
}
#nav-div ul li {
    float:left;
    width:104px;
    text-align:center;
    height:45px;
    line-height:45px;
    list-style:none;
}
#liItemPaner {
    width:104px;
    height:45px;
    position:absolute;
}
.nav-side {
    width:728px;
    height:45px;
}

#nav .nav-on {
   border-bottom: 5px solid #f60 !important;
}

JS代码如下：
$(document).ready(function(e) {
    var navLi =$("#nav-div ul li"),
       navUl =$("#nav-div ul"),
       speed =200;

    functionOnClick() {
       n =navUl.find("li.on").index();
      navUl.stop().animate({
         backgroundPosition: navLi.width() * n + 10      //--------点击后改变底线固定位置的关键
       },speed);
    }
   OnClick();
   navLi.hover(
       function(){
          n =$(this).index();
         navUl.stop().animate({
            backgroundPosition: navLi.width() * n +10   //--------改变位置的关键
          },speed);
       },
       function(){
         OnClick();
       })
   navLi.click(function() {
      $(this).addClass("on").siblings().removeClass("on")
    });
   $(window).scroll(function() {
      if($(window).scrollTop() > $("#nav").height() + 50) {
         $("#nav").addClass("scoll_nav")

导航部分选中的背景跟随鼠标滑动

相关推荐