小白技巧：计数动画特效jQuery插件

最新推荐文章于 2025-03-17 17:26:35 发布

长安紫薯

最新推荐文章于 2025-03-17 17:26:35 发布

阅读量684

点赞数 1

CC 4.0 BY-SA版权

分类专栏： front-end 大前端文章标签： html jquery

本文链接：https://blog.youkuaiyun.com/nutony/article/details/119319114

一个很棒的计数动画

计数动画特效jQuery插件

在这里插入图片描述

jquery.countTo.js

(function (factory) {
   
   
    if (typeof define === 'function' && define.amd) {
   
   
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
   
   
        // CommonJS
        factory(require('jquery'));
    } else {
   
   
        // Browser globals
        factory(jQuery);
    }
}(function ($) {
   
   
  var CountTo = function (element, options) {
   
   
    this.$element = $(element);
    this.options  = $.extend({
   
   }, CountTo.DEFAULTS, this.dataOptions(), options);
    this.init();
  };

  CountTo.DEFAULTS = {
   
   
    from: 0,               // the number the element should start at
    to: 0,                 // the number the element should end at
    speed: 1000,           // how long it should take to count between the target numbers
    refreshInterval: 100,  // how often the element should be updated
    decimals: 0,           // the number of decimal places to show
    formatter: formatter,  // handler for formatting the value before rendering
    onUpdate: null,        // callback method for every time the element is updated
    onComplete: null       // callback method for when the element finishes updating
  };

  CountTo.prototype.init = function () {
   
   
    this.value     = this.options.from;
    this.loops     = Math.ceil(this.options.speed / this.options.refreshInterval);
    this.loopCount = 0;
    this.increment = (this.options.to - this.options.from) / this.loops;
  };

  CountTo.prototype.dataOptions = function () {
   
   
    var options = {
   
   
      from:            this.$element.data('from'),
      to:              this.$element.data('to'),
      speed:           this.$element.data('speed'),
      refreshInterval: this.$element.data('refresh-interval'),
      decimals:        this.$element.data