jquery数字增加动画效果-html代码-BFW代码库

jquery数字增加动画效果

代码语言：html

所属分类：动画

代码描述：jquery数字增加动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
@charset "utf-8";* {
        box-sizing: border-box;
        -webkit-appearance: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none
    }

        *:focus {
            outline: none
        }

        html {
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            height: 100%
        }

        body {
            margin: 0;
            font-size: 14px;
            line-height: 1.5;
            font-family: 微软雅黑,microsoft yahei;
            color: #333;
            background: #fff
        }

        body,div,span,object,iframe,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,q,dl,dt,dd,ol,ul,li,fieldset,form,legend,caption,tbody,tfoot,thead,article,aside,dialog,figure,footer,header,hgroup,nav,section {
            padding: 0;
            margin: 0
        }

        ul,li {
            list-style: none
        }

        img {
            border: 0;
            vertical-align: middle;
            max-width: 100%
        }

        .clearfix:after {
            content: "";
            display: block;
            clear: both;
            height: 0;
            visibility: hidden
        }

        .clearfix {
            zoom: 1
        }

        .main {
            padding: 100px 0;
            margin: 0 auto;
            max-width: 1000px
        }

        .numCount {
            margin: 0 -10px
        }

        .numCount li {
            float: left;
            width: 25%;
            text-align: center
        }

        .numCount li .item {
            margin: 0 10px
        }

        .numCount li .numU {
            line-height: 1.3
        }

        .numCount li .numCX {
            font-size: 54px;
            color: #42b983
        }

        .numCount li .numU .unitC {
            font-size: 100%;
            line-height: 1.3;
            margin-left: .3em
        }

        .numCount li .numU sup {
            vertical-align: top
        }

        .numCount li .numU sub {
            vertical-align: baseline
        }

@media(max-width:800px) {
            .numCount li .numCX {
                font-size: 36px
            }}

@media(max-width:640px) {
            .numCount li .numCX {
                font-size: 7vw
            }}

@media(max-width:480px) {
            .numCount {
                font-size: .5vw
            }}
    </style>
</head>
<body>
    <div class="main">
        <div class="numCount">
            <ul class="clearfix">
                <li>
                    <div class="item">
                        <div class="numU">
                            <span class="numCX" data-startVal="0" data-endVal="363567" data-speed="4" data-decimals="0" id="mumC1">0</span>
                        </div>
                        <div class="indc">
                            股权代码
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item">
                        <div class="numU">
                            <span class="numCX" data-startVal="0" data-endVal="2000" data-speed="4" data-decimals="0" id="mumC2">0</span><sub class="unitC">年</sub>
                        </div>
                        <div class="indc">
                           .........完整代码请登录后点击上方下载按钮下载查看