js滑动进度

<divclass="project-Progressbar">

   <divclass="Progressbar_BG"></div>

   <divclass="Progress_Bar"></div>

   <divclass="Progress_List">

      <ulclass="ul">

         <liclass="current bar-1"><ahref="javascript:void(0)">全&nbsp;&nbsp;部</a></li>

         <liclass="bar-2"><ahref="javascript:void(0)">4%~6%</a></li>

         <liclass="bar-3"><ahref="javascript:void(0)">6%~7%</a></li>

         <liclass="bar-4"><ahref="javascript:void(0)">7%~10%</a></li>

         <liclass="bar-5"><ahref="javascript:void(0)">10%以上</a></li>

      </ul>

   </div>

</div>







/*进度条*/

.project-Progressbar{background:url(images/s_select_bg_03.png) repeat-x; width:520px; margin:50pxauto0auto; position:relative; height:5px;}

.project-Progressbar.Progress_List li{background:url(images/s_select_bg_06.png);width:8px;height:9px;position:absolute;top:-2px;cursor:pointer}

.project-Progressbar.Progress_List li.bar-1{left:-1px;}

.project-Progressbar.Progress_List li.bar-2{left:25%;}

.project-Progressbar.Progress_List li.bar-3{left:50%;}

.project-Progressbar.Progress_List li.bar-4{left:75%;}

.project-Progressbar.Progress_List li.bar-5{left:100%;}

.project-Progressbar.Progressbar_BG{background:url(images/s_select_bg_04.png) no-repeat; height:9px; overflow:hidden; width:0; border-radius:10px;}

.project-Progressbar.Progress_List li a{position:absolute; left:-23px;top:-27px; white-space:nowrap; margin:0;padding:0; line-height:none; width:56px; text-align:center; line-height:16px; font-size:12px;}

.project-Progressbar.Progress_List li a:hover{color:#ff8b24;}

.project-Progressbar.Progress_Bar{background:url(images/s_select_bg_17.png) no-repeat; width:20px; height:20px; position:absolute; left:-7px; bottom:-8px; z-index:3}

.project-Progressbar.current a{background:url(images/s_select_bg_09.png) top center no-repeat; color:#fff; height:21px;}

/*进度条*/










$(".project-Progressbar li").click(function () {
    var _this = $(this);
    var Progressbar_BG = _this.parents(".Progress_List").siblings(".Progressbar_BG");
    var Progress_Bar = _this.parents(".Progress_List").siblings(".Progress_Bar");
    var _postX = _this.position().left;
    _this.siblings("li").removeClass("current");
    _this.addClass("current");
    Progressbar_BG.animate({ width: _postX }, 300);  //进度条滑动
    Progress_Bar.animate({ left: _postX - 5 }, 300);
    _this.prevAll("li").css("background", "none");
    _this.nextAll().removeAttr("style");
});