美文网首页
利用CountUp.js 实现数字跳转效果

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

作者: 一颗北上广的心 | 来源:发表于2018-08-24 11:07 被阅读0次
    <%@ 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>
    

    相关文章

      网友评论

          本文标题:利用CountUp.js 实现数字跳转效果

          本文链接:https://www.haomeiwen.com/subject/etrbiftx.html