起风网
上图的功能，代码直接复制可用：
<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script><style>/*导航*/*{margin:0;padding:0}a{text-decoration:none}.box{margin:10px}.order-class{width:800px;font-size:0}.order-class .bar{font-size:14px;font-weight:700;width: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{width:800px;height:3px;background:#c8c8c8;margin:10px 0 0 -1px}.order-class-pointer .pointer{width: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>
评论前必须登录！
立即登录