大屏数据展示之数字滑动动态显示

接到一个大屏数据的需求，要是实时展示用户数，并且动画效果是翻转显示，折腾了半个多小时，写了一个demo出来，上代码

<html>
    <head>
        <script src="./jquery.min.js"></script>
        <style type="text/css">
            .colum{
                float: left;
                text-align: center;
                width: 40px;
                line-height: 40px;
                font-size: 18px;
                background: blue;
                margin: 10px;
                color: white;
                height: 40px;
                overflow: hidden;
                
            }
        </style>
    </head>
    <body>
        <div id="num"></div>
    </body>
    <script>
        function initnum(e, val){
            var numarr = (val+'').split('');
            var numcontent = '';
            for(var i=0;i<numarr.length;i++){
                numcontent += '<div class="colum"><div class="row" style="margin-top:'+-numarr[i]*40+'px">0</div><div class="row">1</div><div class="row">2</div><div class="row">3</div><div class="row">4</div><div class="row">5</div><div class="row">6</div><div class="row">7</div><div class="row">8</div><div class="row">9</div></div>'
            }
            $('#'+e).html(numcontent);
        }
        function animal(e, start, end){
            var startarr = (start + '').split('');
            var endarr = (end + '').split('');
            var instance = endarr.length-startarr.length;
            for(var i=0;i<instance;i++){
                $('#'+e).prepend('<div class="colum"><div class="row" style="margin-top:'+-(instance-endarr[i])*40+'px">0</div><div class="row">1</div><div class="row">2</div><div class="row">3</div><div class="row">4</div><div class="row">5</div><div class="row">6</div><div class="row">7</div><div class="row">8</div><div class="row">9</div></div>')
            }
            for(var j=0;j<endarr.length;j++){
                $($($('#'+e+' .colum')[j]).find('.row')[0]).animate({marginTop: -endarr[j]*40+'px'})
            }
        }
        var numcontroller = {
            init: initnum,
            animal: animal
        }
        numcontroller.init('num', 12900);
        // numcontroller.animal('num', 12900, 2008900);
        function loopanimal(e, start, end, time){
            var randomnum = Math.floor(Math.random()*(end-start)/time, 0);
            setInterval(function(){
                numcontroller.animal(e, start, start-0+randomnum);
                start = start+randomnum;
            }, 3000);
        }
        loopanimal('num', 12900, 2008900, 60);
    </script>
</html>

　　

 

posted on 2019-03-25 16:58  杨龙飞  阅读(1650)  评论(0)  编辑  收藏  举报

导航

Fork me on GitHub