<!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. Gouraud Shading

    [Gouraud Shading] Gouraud Shading (高洛德着色/高氏着色) 这种着色的效果要好得多,也是在游戏中使用最广泛的一种着色方式.它可对3D模型各顶点的颜色进行平滑.融合处理 ...

  2. 原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

    一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...

  3. git 忽略文件.gitignore

    # 此为注释– 将被Git 忽略 *.a # 忽略所有.a 结尾的文件 !lib.a # 但lib.a 除外 /TODO # 仅仅忽略项目根目录下的TODO 文件,不包括subdir/TODO bui ...

  4. ajax+servlet 简易时间效果

    <!DOCTYPE html> <html> <head> <title>index.html</title> <meta name= ...

  5. Linux cheat命令

    一.简介 cheat是在GNU通用公共许可证下,为Linux命令行用户发行的交互式备忘单应用程序.它提供显示Linux命令使用案例,包括该命令所有的选项和简短但尚可理解的功能. 二.安装配置 安装步骤 ...

  6. nginx内置变量详解-乾颐堂

    nginx的配置文件中可以使用的内置变量以美元符$开始,也有人叫全局变量.其中,部分预定义的变量的值是可以改变的. $arg_PARAMETER 这个变量值为:GET请求中变量名PARAMETER参数 ...

  7. meshconverters

    https://github.com/RobotLocomotion/meshConverters meshconverters $ mkdir build && cd build $ ...

  8. maven配置logback

    [背景] 刚接触大数据项目,在生产环境中经常需要使用日志来判定一些问题的原因. 一直以来都在使用System.out.println的标准输出来往控制台上打印日志.这种方法对性能影响很大不说,查看日志 ...

  9. 实践作业4---DAY3阶段二。

    第二阶段是用户调研,我们小组选择了一个5班的同学,作为采访对象.采访比较详实,但是样本太少,不太有说服力. 具体采访详情如下: 问:请问您使用喜欢发表Blog么? 答:肯定有啊. 问:都用什么网站发表 ...

  10. vs2015发布网站至azure web应用服务

    进入www.azure.cn管理门户 1,左下角新建web应用,实例如下,url设置为demo(有防止重名判断) 2,进入demo配置页(左侧web应用下点击demo) 3,demo首页,下载配置文件 ...