数字滚动（web前端、JQuery）

作者: 新世纪好青年 | 来源:发表于2019-09-30 14:08 被阅读0次

数字滚动（web前端、JQuery）
好程序员web前端学习路线分享jQuery学习技巧
学习笔记-0816-jquerymobile前端框架
第15/16天，jQuery
全栈工程师 09 笔记（jquery mobile）
jquery轻量级数字动画插件jquery.countup.js
mk路线
jQuery
hybrid app、web app与native app工具的
jQuery学习总结

之前项目用的都是数字跳动的动画（animateNumber动画），这次做数字滚动的效果，我找了很多插件都不合适，然后无意间看到别人的代码。这个例子只需要用jquery就好了。直接上代码

数字滚动.png

<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,input,button,textarea,p,th,td{margin:0;padding:0;font-family:"微软雅黑";}
.wordCloudnum{width:100%;padding:50px 0 0 30px;overflow:hidden;}.signatures{float:left;}.zeronum{float:left;}
.zero{display:block;float:left;width:36px;height:52px;background:rgba(6,33,53,1);border:1px solid rgba(43,116,168,0.6);border-radius:2px;
font-size:30px;line-height:52px;text-align:center;margin-right:10px;color:rgba(255,255,255,0.1);}
#signatures .num_Animation{position:relative;display:inline-block;overflow:hidden;width:36px;height:52px;background:rgba(6,33,53,1);
border:1px solid rgba(43,116,168,0.6);border-radius:2px;font-size:30px;line-height:52px;text-align:center;margin-right:10px;}
#signatures span{display:inline-block;line-height:52px;text-align:center;overflow:hidden;color:white;}
#signatures span i{width:36px;height:52px;display:block;text-align:center;font-style:normal;}
</style>
<body>
  <div class="wordCloudnum">
    <div class="zeronum"></div>
    <div id="signatures" class="signatures">
      <!--<span class="zero">0</span>
      <span class="zero">0</span>
      <span class="zerother">1</span>
      <span class="zerother">2</span>
      <span class="zerother">3</span>
      <span class="zerother">4</span>-->
    </div>
</div>

</body>
<script>
$(function(){
  play(145, "#signatures");
});

/**
 * 数字动画
 * @param {值}  num
 * @param {dom例："#num"} dom
 * 需要一段css
 */
function play(num, dom) {
            var html = '';
            $(".zeronum").html("");
            var arr = String(num).split('');
            var len = arr.length;
            if (len < 4) { // 需要多长就写多少，传入的数值不够的用0填充
                for (var i = 0; i < 4 - len; i++) {
                    var htmlStr = '<span class="zero">0</span>';
                    $(".zeronum").append(htmlStr);
                }
            }
            for (var i = 0; i < len; i++) {
                if (arr[i] == '.') {
                    html += ".";
                    continue
                }
                html += '<div id="num_' + i + '" class="num_Animation" data-id="' + i + '">';
                html += "<span>";
                for (var k = 0; k < 10; k++) {
                    for (var j = 0; j < 10; j++) {
                        html += '<i>' + j + '</i>';
                    }
                }
                html += "</span>";
                html += '</div>';
            }
            document.querySelector(dom).innerHTML = html;
            var num = document.querySelectorAll(".num_Animation");
            var spanHeight = num[0].querySelector('span').offsetHeight;
            var numlen = num.length;

            for (var j = 0; j < numlen; j++) {
                var newi = document.createElement('i');
                newi.innerHTML = arr[num[j].getAttribute("data-id")];
                num[j].querySelector("span").appendChild(newi);
                num[j].querySelector("span").style.webkitTransition = 'all ' + (.9 + j * .1) + 's ease-in .1s';
                num[j].querySelector("span").style.webkitTransform = 'translate3d(0,-' + spanHeight + 'px,0)';
            }
            html += "</span>";
            html += '</div>';


            document.querySelector(dom).innerHTML = html
            var num = document.querySelectorAll(".num_Animation");
            var spanHeight = num[0].querySelector('span').offsetHeight;
            var numlen = num.length;
            for (var j = 0; j < numlen; j++) {
                var newi = document.createElement('i')
                newi.innerHTML = arr[num[j].getAttribute("data-id")];
                num[j].querySelector("span").appendChild(newi)
                num[j].querySelector("span").style.webkitTransition = 'all ' + (.9 + j * .1) + 's ease-in .1s'
                num[j].querySelector("span").style.webkitTransform = 'translate3d(0,-' + spanHeight + 'px,0)'
            }
        }
</script>