微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

用于动画编号的Jquery插件

我正在对服务器进行ajax调用,然后更新一些统计信息.我想要一个能够激活数字的插件.

例如初始值= 65
ajax call = 98后的值

在2秒的时间内,显示的值从65增加到98,用户可以看到 – 就像数字速度表或转速计一样.

我的搜索没有让我找到一个插件.有人知道这样的插件吗?

解决方法

它没有持续时间,但它有点接近.我不确定如何整合持续时间,并且必须相当快地将它们放在一起.
(function($) {
    $.fn.animateNumber = function(to) {
        var $ele = $(this),num = parseInt($ele.html()),up = to > num,num_interval = Math.abs(num - to) / 90;

        var loop = function() {
            num = Math.floor(up ? num+num_interval: num-num_interval);
            if ( (up && num > to) || (!up && num < to) ) {
                num = to;
                clearInterval(animation)
            }
            $ele.html(num);
        }

        var animation = setInterval(loop,5);
    }
})(jQuery)

var $counter = $("#counter");
$counter.animateNumber(800);
<span id="counter">100</span>

原文地址:https://www.jb51.cc/jquery/181437.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐