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

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

代码语言：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 //保留几位小数点
.........完整代码请登录后点击上方下载按钮下载查看