jquery实现一个数字滚动动画显示效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：jquery实现一个数字滚动动画显示效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <style>
        *{
        padding: 0;
        margin: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    .container{
        width: 100%;
        height: 100%;
        background-color: #09152a;
    }
    /*-----数字---*/
    .number-box{
        height: 3.3125em;
        display: flex;
        justify-content: center;
        padding-top: 1em;
    }
    .mt-number-animate {
        
        line-height: 3.125em;
        height: 100%;
        overflow: hidden;
        display: inline-block;
        position: relative;
    }
    .mt-number-animate .mt-number-animate-dot {
        width: 2.25em;
        /*设置分割符宽度*/
        line-height: 3.125em;
        float: left;
        text-align: center;
        color: #FDB628;
        margin-right: 0.5em;
    }
    
    .mt-number-animate .mt-number-animate-dom {
        width: 2.25em;
        /*设置单个数字宽度*/
        text-align: center;
        float: left;
        position: relative;
        top: 0;
        margin-right: 0.5em;
        
    }
    
    .mt-number-animate .mt-number-animate-dom .mt-number-animate-span {
        width: 100%;
        float: left;
        color: #FDB628;
        margin-bottom: 0.2em;
        height: 100%;
    }
    .num-flex{
        position: relative;
        font-size: 3em;
    }
    .border-module {
        position: relative;
        border: 0.0625em solid rgba(0,234,255,.25);
        -webkit-box-shadow: inset 0em 0em 1.25em rgb(0 234 255 / 25%);
        box-shadow: inset 0em 0em 1.25em rgb(0 234 255 / 25%);
    }
    .number-box .border-span2,
    .dataBoc .border-span2{
        position: absolute;
        width: 0.2em;
        height: 0.2em;
    }
    .number-box .top-left2,
    .dataBoc .top-left2{
        top: 0;
        left: 0;
        border-left: 0.045em solid #01bdc6;
        border-top: 0.045em solid #01bdc6;
    }
    
    .number-box .top-right2,
    .dataBoc .top-right2 {
        top: 0;
        right: 0;
        border-right: 0.045em solid #01bdc6;
        border-top: 0.045em solid #01bdc6;
    }
    
    .number-box .bottom-left2,
    .dataBoc .bottom-left2 {
        bottom: 0;
        left: 0;
        border-left: 0.045em solid #01bdc6;
        border-bottom: 0.045em solid #01bdc6;
    }
    
    .number-box .bottom-right2,
    .dataBoc .bottom-right2 {
        bottom: 0;
        right: 0;
        border-right: 0.045em solid #01bdc6;
        border-bottom: 0.045em solid #01bdc6;
    }
    
    #dataNums{
        height: 3.3125em;
    }
    
    .dataNums .dataOne{ 
        width:2.25em; height:3.3125em; margin-right: 0.5em; text-align: center; 
        float: left;list-style: none;
        border: 0.0625em solid rgba(0,234,255,.25);
        -webkit-box-shadow: inset 0em 0em 1.25em rgb(0 234 255 / 25%);
        box-shadow: inset 0em 0em 1.25em rgb(0 234 255 / 25%);
    }
    .dataNums .dataBoc {position: relative; width: 100%; height: 100%; overflow: hidden;}
    .dataNums .dataBoc .tt {position: absolute; top: 0;  left: 0; width: 100%;  height: 100%;}
    .dataNums .tt span{width:100%;height:100%;color:#FDB628;font-family: tijian;font-size: 3em;line-height:1.25em;float: left;}
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script>
        (function ($) {
        $.fn.numberAnimate = function (setting) {
                var defaults = {
                        speed: 1000 * 10, //动画速度
                        num: "", //初始化值
                        iniAnimate: true, //是否要初始化动画效果
                        symbol: '', //默认的分割符号，千，万，千万
                        dot: 0 //保留几位小数点
                }
                //如果setting为空，就取default的值
                var setting = $.extend(defaults, setting);
    
                //如果对象有多个，提示出错
                if ($(this).length > 1) {
                        alert("just only one obj!");
                        return;
                }
                //如果未设置初始化值。提示出错
                if (setting.num === "") {
                        alert("must set a num!");
                        return;
                }
                var nHtml = '<div class="mt-number-animate-dom" data-num="{{num}}">\
                        <div class="mt-number-animate-span border-module">\
                        <span class="border-span2 top-left2"></span>\
                        <span class="border-span2 top-right2"></span>\
                        <span class="border-span2 bottom-left2"></span>\
                        <span class="border-span2 bottom-right2"></span><div class="num-flex">0</div></div>\
                <div class="mt-number-animate-span border-module">\
                        <span class="border-span2 top-left2"></span>\
                        <span class="border-span2 top-right2"></span>\
                        <span class="border-span2 bottom-left2"></span>\
                        <span class="border-span2 bottom-right2"></span><div class="num-flex">1</div></div>\
                <div class="mt-number-animate-span border-module">\
                        <span class="border-span2 top-left2"></span>\
                        <span class="border-span2 top-right2"></span>\
                        <span class="border-span2 bottom-left2"></span>\
                        <span class="border-span2 bottom-right2"></span><div class="num-flex">2</div></div>\
                <div class="mt-number-animate-span border-module">\
                        <span class="border-span2 top-left2"></span>\
                        <span class="border-span2 top-right2"></span>\
                        <span class="border-span2 bottom-left2"></span>\
                        <span class="border-span2 bottom-right2"></span><div class="num-flex">3</div></div>\
                <div class="mt-number-animate-span border-module">\
                        <span class="border-span2 top-left2"></span>\
                        <span class="border-span2 top-right2"></span>\
                        <span class="border-span2 bottom-left2"></span>\
                        <span class="border-span2 bottom-right2"></span><div class="num-flex">4</div></div>\
                <div class="mt-number-animate-span border-module">\
                        <span class="border-span2 top-left2"></span>\
                        <span class="border-span2 top-right2"></span>\
                        <span class="border-span2 bottom-left2"></span>\
                        <span class="border-span2 bottom-right2"></span><div class="num-flex">5</div></div>\
                <div class="mt-number-animate-span border-module">\
                        <span class="border-span2 top-left2"></span>\
                        <span class="border-span2 top-right2"></span>\
                        <span class="border-span2 bottom-left2"></span>\
                        <span class="border-span2 bottom-right2"></span><div class="num-flex">6</div></div>\
                <div class="mt-number-animate-span border-module">\
.........完整代码请登录后点击上方下载按钮下载查看