专栏首页杨龙飞前端大屏数据展示之数字滑动动态显示

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

接到一个大屏数据的需求,要是实时展示用户数,并且动画效果是翻转显示,折腾了半个多小时,写了一个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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 网页html结构搭建方法总结

    windseek
  • win8效果的横向布局

    windseek
  • BFC概念和作用,触发条件

    windseek
  • HTML&CSS书写规范

    第一部分:HTML书写规范: 1.1 HTML整体结构: 1.1.1:HTML基础设施: 文档以"<!DOCTYPE...>"首行顶格开始,推荐使用"<!DOC...

    用户1149564
  • 用CSS画小猪佩奇

    腾讯NEXT学位
  • jquery选择器

    jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。

    Devops海洋的渔夫
  • vue弹出层 +内容手风琴 简单实现

    yangdongnan
  • 前端-part8-jQurey操作样式一

    少年包青菜
  • flex 布局

    CSS3 为我们提供了一种可伸缩的灵活的 web 页面布局方式 flexbox 布局,它具有很强大的功能,可以很轻松实现很多复杂布局。可以简便、完整、响应式地实...

    柳醉梦声
  • selenium-java web自动化测试工具

    本篇文章由来,这两天整理了下自己经常使用而且很熟练的项目,今天突然想起漏了一个,补上了,但想到还没对应的博客,那就写一个简单的

    肖哥哥

扫码关注云+社区

领取腾讯云代金券