countUp 计数器数字滚动特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

20 79 27



特效描述:计数器 数字滚动。countUp计数器数字滚动,基于moment制作的日期时间选取,点击弹出日历表格

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/count.js"></script>

3. HTML代码

    <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">成立</div>
                    </div>
                </li>
                <li>
                    <div class="item">
                        <div class="numU"><span class="numCX" data-startVal="0" data-endVal="940" data-speed="4" data-decimals="0" id="mumC3">0</span><sub class="unitC">(万元)</sub></div>
                        <div class="indc">注册资本</div>
                    </div>
                </li>
                <li>
                    <div class="item">
                        <div class="numU"><span class="numCX" data-startVal="0" data-endVal="5000" data-speed="4" data-decimals="0" id="mumC4">0</span><sup class="unitC">+</sup></div>
                        <div class="indc">优质客户</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
    $(function(){
        var countCXArr = [];
        var countCX=function (){
            $('.numCount').each(function(i, dom) {
                if(countCXArr[i] && countCXArr[i] === true){
                    return;
                }
                var sT;
                var ncTop;
                sT = $(window).scrollTop();
                ncTop = $(dom).offset().top;
                var id,decimals, startVal, endVal, duration; 
                if (sT > ncTop-$(window).height() && sT < ncTop) {
                    $(dom).find('.numCX').each(function(){
                        id=$(this).attr('id');
                        decimals = $(this).attr('data-decimals'),
                        startVal = $(this).attr('data-startVal'),
                        endVal = $(this).attr('data-endVal'),
                        duration = $(this).attr('data-speed'); 
                        new CountUp(id, startVal, endVal, decimals, duration, {
                            useEasing: true,//效果
                            separator: ''//数字分隔符
                        }).start();// target:目标元素id, startVal:你想要开始的值, endVal:你想要到达的值, decimals:小数位数,默认值为0, duration:动画持续时间为秒,默认值为2, options:选项的可选对象
                        countCXArr[i] = true;
                    })         
                }
            }) 
        }
        countCX();	
        $(window).on("scroll",function() {
            countCX();	
        })	
    });
    </script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到