仿淘宝订单列表下标指针

上图的功能，代码直接复制可用：

<!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>

相关阅读:
sublime设置node.js编译
 Markdown基本语法规范
 vue2.0学习笔记之组件
 使用let声明变量的理解
 vue2.0学习笔记之路由（二）路由嵌套+动画
 vue2.0学习笔记之路由（二）路由嵌套
 设置webstorm支持ES6语法
 vue2.0环境搭建
 bower包管理工具
 【转】jquery cookie操作
原文地址：https://www.cnblogs.com/1wen/p/4174508.html