<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>jQuery动态数字翻滚计数到指定数字的文字特效代码</title>

</head>

<body>

  <p class="timer count-title" id="count-number" data-to="68" data-speed="1500"></p>

  <script src='http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js'></script>

  <script src="js/index.js"></script>

</body>

</html>

网上找的插件。

js代码：

    $.fn.countTo = function (options) {

        options = options || {};

        return $(this).each(function () {

            // set options for current element

            var settings = $.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')

            }, options);

            // how many times to update the value, and how much to increment the value on each update

            var loops = Math.ceil(settings.speed / settings.refreshInterval),

                increment = (settings.to - settings.from) / loops;

            // references & variables that will change with each update

            var self = this,

                $self = $(this),

                loopCount = 0,

                value = settings.from,

                data = $self.data('countTo') || {};

            $self.data('countTo', data);

            // if an existing interval can be found, clear it first

            if (data.interval) {

                clearInterval(data.interval);

            }

            data.interval = setInterval(updateTimer, settings.refreshInterval);

            // initialize the element with the starting value

            render(value);

            function updateTimer() {

                value += increment;

                loopCount++;

                render(value);

                if (typeof(settings.onUpdate) == 'function') {

                    settings.onUpdate.call(self, value);

                }

                if (loopCount >= loops) {

                    // remove the interval

                    $self.removeData('countTo');

                    clearInterval(data.interval);

                    value = settings.to;

                    if (typeof(settings.onComplete) == 'function') {

                        settings.onComplete.call(self, value);

                    }

                }

            }

            function render(value) {

                var formattedValue = settings.formatter.call(self, value, settings);

                $self.html(formattedValue);

            }

        });

    };

    $.fn.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

    };

    function formatter(value, settings) {

        return value.toFixed(settings.decimals);

    }

  // custom formatting example

  $('#count-number').data('countToOptions', {

    formatter: function (value, options) {

      return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');

    }

  });

  // start all the timers

  $('.timer').each(count);  

  function count(options) {

    var $this = $(this);

    options = $.extend({}, options || {}, $this.data('countToOptions') || {});

    $this.countTo(options);

  }

jQuery动态数字翻滚计数到指定数字的文字特效代码的更多相关文章

  1. 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...

  2. jQuery 判断是否为数字的方法 及 转换数字函数

    <script language="javascript"> var t=$("#id").val();//这个就是我们要判断的值了 if(!isN ...

  3. 使用JFileChooser实现在指定文件夹下批量添加根据“数字型样式”或“非数字型样式”命令的文件夹

    2018-11-05 20:57:00开始写 Folder.java类 import javax.swing.JFrame; import javax.swing.JPanel; import jav ...

  4. oracle 重置序列从指定数字开始的方法详解

    原文 oracle 重置序列从指定数字开始的方法详解 重置oracle序列从指定数字开始 declare n ); v_startnum ):;--从多少开始 v_step ):;--步进 tsql ...

  5. 定义一个类：实现功能可以返回随机的10个数字，随机的10个字母， 随机的10个字母和数字的组合；字母和数字的范围可以指定，类似（1~100）（A~z）

    #习题2:定义一个类:实现功能可以返回随机的10个数字,随机的10个字母, #随机的10个字母和数字的组合:字母和数字的范围可以指定 class RandomString(): #随机数选择的范围作为 ...

  6. A:与指定数字相同的数的个数

    总时间限制:  1000ms 内存限制:  65536kB 描述 输出一个整数序列中与指定数字相同的数的个数. 输入 输入包含三行:第一行为N,表示整数序列的长度(N <= 100):第二行为N ...

  7. Java初学者作业——编写 Java 程序，让用户输入指定数字实现产生随机数。

    返回本章节 返回作业目录 需求说明: 编写 Java 程序,让用户输入指定数字实现产生随机数.运行效果如下: 实现思路: 定义两个变量start和end来保存起始和结束值. 通过结束值减起始值得到变化 ...

  8. MySQL设置字段从指定数字自增，比如10000

    MySQL设置字段从指定数字自增,比如10000. 方式一 方式二 方式一 此时就解决了MySQL从指定数字进行自增 CREATE TABLE hyxxb( hyid INT AUTO_INCREME ...

  9. jquery动态添加的元素不能直接应用事件方法的时候

    对于由 jQuery 动态生成的元素,如用 jQuery 给元素添加 class,或者直接添加一对 p 标签,不能直接绑定常用的事件,如 click.因为这些元素属于动态生成,除非采用 onclick ...

随机推荐

  1. 关于PHP如何用实现防止用户在浏览器上使用后退功能重复提交输入

    $(function(){ if(window.history && window.history.pushState){ $(window).on('popstate',functi ...

  2. 并发编程和MySQL总结

    1️⃣  并发编程主要内容: 操作系统工作原理介绍.线程.进程演化史.特点.区别.互斥锁.信号.事件.join.GIL.进程间通信.管道.队列. 生产者消费者模型.异步模型.IO多路复用模型.sele ...

  3. Java如何快速修改Jar包里的文件内容

    需求背景:写了一个实时读取日志文件以及监控的小程序,打包成了Jar包可执行文件,通过我们的web主系统上传到各个服务器,然后调用ssh命令执行.每次上传前都要通过解压缩软件修改或者替换里面的配置文件, ...

  4. Node.js中流程控制

    Node.js中的流程控制可以使用async,在使用之前需要先安装,使用npm安装 npm install async --g 下面主要介绍4种流程控制的方式: 1.串行无关联:async.serie ...

  5. mysql sql left right inner join区别及效率比较

    一．Join语法概述 join 用于多表中字段之间的联系,语法如下: ... FROM table1 INNER|LEFT|RIGHT JOIN table2 ON conditiona table1 ...

  6. Emgu CV的配置以及在VS 2012中进行图像处理的步骤和实例

    说明: 1.所使用的Emgu CV是目前的最新版本3.1.0,下载链接为:https://sourceforge.net/projects/emgucv/files/emgucv/3.1.0/(我选的 ...

  7. Tftp上传、下载

    上传 tftp -g -r filename serverip 下载 tftp -p -l filename serverip

  8. [C++] Pure Virtual Function and Abstract Class

    Pure Virtual Function Abstract Class

  9. code1068 乌龟棋

    暴力显然不行,所以考虑dp 记f[i][j][k][l]为使用i张1,j张2,k张3,l张4所得到的最大分数. 对于每个f[i][j][k][l],都可以由i-1张1,j张2,k张3,l张4所得到, ...

  10. ethtool -p eth0 物理口一个灯在不停的闪烁

    摘自:https://blog.csdn.net/morigejile/article/details/78598645 你的  服务器有多个网卡并且已经配置好运行当中,你却没记得eth0.eth1. ...