zoukankan      html  css  js  c++  java
  • 仿淘宝订单列表下标指针

    上图的功能,代码直接复制可用:

    <!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>
  • 相关阅读:
    LightOJ 1132 Summing up Powers(矩阵快速幂)
    hdu 3804 Query on a tree (树链剖分+线段树)
    LightOJ 1052 String Growth && uva 12045 Fun with Strings (矩阵快速幂)
    uva 12304 2D Geometry 110 in 1! (Geometry)
    LA 3263 That Nice Euler Circuit (2D Geometry)
    2013 SCAUCPC Summary
    poj 3321 Apple Tree (Binary Index Tree)
    uva 11796 Dog Distance (几何+模拟)
    uva 11178 Morley's Theorem (2D Geometry)
    动手动脑
  • 原文地址:https://www.cnblogs.com/1wen/p/4174508.html
Copyright © 2011-2022 走看看