页面数字递增变化

PROMULGATOR

walk-liuyan

江苏省南京市

← jQuery宽高的理解和应用

→ CSS3图片滤镜效果

相关代码

自动数字变化

页面数字递增变化

计数增长效果

按钮hover变化

背景颜色随文字滚动变化

数字自动动态增长

Html

Css

Js

let num = 0

function changeNum() {
    $.fn.countTo = function(a) {
        a = a || {};
        return $(this).each(function() {
            var c = $.extend({},
                $.fn.countTo.defaults, {
                    from: $(this).data("from"),
                    to: $(this).data("to"),
                    speed: $(this).data("speed"),
                    refreshInterval: $(this).data("refresh-interval"),
                    decimals: $(this).data("decimals")
                }, a);
            var h = Math.ceil(c.speed / c.refreshInterval),
                i = (c.to - c.from) / h;
            var j = this,
                f = $(this),
                e = 0,
                g = c.from,
                d = f.data("countTo") || {};
            f.data("countTo", d);
            if (d.interval) {
                clearInterval(d.interval)
            }
            d.interval = setInterval(k, c.refreshInterval);
            b(g);

function k() {
                g += i;
                e++;
                b(g);
                if (typeof(c.onUpdate) == "function") {
                    c.onUpdate.call(j, g)
                }
                if (e >= h) {
                    f.removeData("countTo");
                    clearInterval(d.interval);
                    g = c.to;
                    if (typeof(c.onComplete) == "function") {
                        c.onComplete.call(j, g)
                    }
                }
            }

function b(m) {
                var l = c.formatter.call(j, m, c);
                f.html(l)
            }
        })
    };
    $.fn.countTo.defaults = {
        from: 0,
        to: 0,
        speed: 500,
        refreshInterval: 100,
        decimals: 0,
        formatter: formatter,
        onUpdate: null,
        onComplete: null
    };

function formatter(b, a) {
        return b.toFixed(0)
    }

$("#count-number27").data("countToOptions", {
        formatter: function(b, a) {
            console.log(b)
            if (b >= 100) {
                $('#addTxt').text('+')
            }
            return b.toFixed(0).replace(/\B(?=(?:\d{3})+(?!\d))/g, ",")
        }
    });
    $("#count-number30").data("countToOptions", {
        formatter: function(b, a) {
            return b.toFixed(0).replace(/\B(?=(?:\d{3})+(?!\d))/g, ",")
        }
    });
    $("#count-number15").data("countToOptions", {
        formatter: function(b, a) {
            return b.toFixed(0).replace(/\B(?=(?:\d{3})+(?!\d))/g, ",")
        }
    });
    $(".timer").each(count);

function count(a) {
        var b = $(this);
        a = $.extend({},
            a || {},
            b.data("countToOptions") || {});
        b.countTo(a)
    };
}
/* 当页面滚动到某个元素的时候，该动画会呈现，同时只执行一次。加个判断条件即可
 if (($(window).scrollTop() > $('#gudingshouyi').offset().top - 500) && (num < 2)) {
        num += 1
        changeNum()
    }
*/
if (num < 2) {
    num += 1
    changeNum()
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

页面数字递增变化



代码描述：页面数字递增变化的代码

将以上代码复制到页面，并且自己写好判断条件，即可使用

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>页面数字递增变化-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号