天天看點
傳回

利用CountUp.js 實作數字跳轉效果

利用CountUp.js 實作數字跳轉效果
  • countup.js 
<!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="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   <script src="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>
  • test.html 
<!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="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="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>

具體的其他參數和方法可以參照

https://inorganik.github.io/countUp.js/
javascript/jquery
上一篇: CountUp.js – 讓數字以非常有趣的動畫方式顯示
下一篇: python數字滾動效果_vue 實作數字滾動增加效果

繼續閱讀