上图的功能，代码直接复制可用：
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style> /*导航*/ *{margin:0;padding:0} a{text-decoration:none} .box{margin:10px} .order-class{800px;font-size:0} .order-class .bar{font-size:14px;font-weight:700;100px;text-align:center;display:inline-block;color:#333;padding:0 10px;height:20px;border-left:1px solid #ccc;border-right:1px solid #ccc;margin:0 0 0 -1px} .order-class .on{color:#f6615b;font-size:14px;font-weight:bold} /*指针*/ .order-class-pointer{800px;height:3px;background:#c8c8c8;margin:10px 0 0 -1px} .order-class-pointer .pointer{121px;height:3px;background:#f6615b} </style> </head> <body> <div class="box"> <div class="order-class"> <a href="#" class="bar on"> <span>所有订单</span> </a> <a href="#" class="bar"> <span>待付款</span> <span class="pinkColor">0</span> </a> <a href="#" class="bar"> <span>待发货</span> <span class="pinkColor">0</span> </a> <a href="#" class="bar"> <span>待收货</span> <span class="pinkColor">3</span> </a> <a href="#" class="bar"> <span>待评价</span> <span class="pinkColor">2</span> </a> </div> <!--指针--> <div class="order-class-pointer"> <div class="pointer" id="pointer"></div> </div> </div> <script language="javascript" type="text/javascript"> pointer('order-class',121); function pointer(nav,classWid){ var orderClass = $('.'+nav).children('a'),//导航dom wid = classWid,//下标宽,也就是一条分类的宽 timeout,//定时器 Sub;//下标 //找到on确定下标位置 $(orderClass).each(function(){ if($(this).hasClass('on')) Sub = $(this).index('.bar'); }); setPointer(Sub*wid);//初始化 //设置下标位置 function setPointer(px){ $('#pointer').css('margin-left',px + 'px'); } //获取下标位置 function getPointer(){ return parseInt($('#pointer').css('margin-left')); } //指针滑动,分十次移动 function subSlide(allDis){ var distan = (allDis - getPointer())/10; var i=0; function scro(){ i<9 ? setPointer(getPointer()+distan) : setPointer(allDis); if(i==9) return; i++; timeout = setTimeout(scro,50); } timeout = setTimeout(scro,50); } //绑定事件 orderClass.on({ 'mouseover':function(){ clearTimeout(timeout); var allDis = wid*orderClass.index(this); subSlide(allDis); }, 'mouseout':function(){ clearTimeout(timeout); var allDis = Sub*wid; subSlide(allDis); } }); } </script> </body> </html>