利用CountUp.js 实现数字跳转效果

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <script src="${pageContext.request.contextPath}/script/plugins/inspinia/js/jquery-2.1.1.js"></script>
    <script src="${pageContext.request.contextPath}/script/js/countUp.js"></script>
</head>
<body>

<h2 id="number"></h2>

<script type="text/javascript">

    numberJump('number',123456,'km')

    function numberJump(elementId, target, suffix) {
        if (!$('#' + elementId).attr('data-src')) {
            $('#' + elementId).attr('data-src', 0);
        }

        var src = $('#' + elementId).attr('data-src');
        if (src == target) {
            return;
        }

        var options = {
            useEasing: true,
            useGrouping: true,
            separator: ',',
            decimal: '.',
            suffix: suffix || ''
        };
        var demo = new CountUp(elementId, src, target, 0, 4, options);
        demo.start();

        $('#' + elementId).attr('data-src', target);
    }
</script>

</body>

</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容