<!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. excel解析的几种实现方法

  2. textarea文本域的高度随内容的变化而变化

    用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条. CSS代码: 复制代码 代码如下: .t_area{ width:300px; overflow-y:visible } & ...

  3. iOS无网络提示或无数据提示空白页

    在我们平常我们用的app当中,当你在信号不好网络错误的时候,一般都会有个提示:“网络错误请点击重试~” 的话术,或者说当你浏览某一页的时候,没有数据,也会提示:“暂无数据,请搞点动静” 之类的话术. ...

  4. labelimg

    ------------------------labelimg------------------------- cd /home/luo/TensorflowProject/labelImg py ...

  5. linux系统的命令组与函数

    一.命令组 许多时候,我们在shell操作上,需要在一定条件下一次执行多个命令,也就是说,要么不执行,要么就全执行,而不是每次依序的判断是否要执行下一个命令.或是,需要从一些命令执行优先次顺中得到豁免 ...

  6. 908D New Year and Arbitrary Arrangement

    传送门 分析 代码 #include<iostream> #include<cstdio> #include<cstring> #include<string ...

  7. Python和JavaScript间代码转换4个工具

    Python 还是 JavaScript?虽然不少朋友还在争论二者目前谁更强势.谁又拥有着更为光明的发展前景,但毫无疑问,二者的竞争在 Web 前端领域已经拥有明确的答案.立足于浏览器平台,如果放弃 ...

  8. 白盒测试实践--Day5

    累计完成任务情况: 阶段内容 参与人 完成个人情况说明并提交作业 全体 汇总作业,查漏补缺,完成代码测试总结 小靳.小龙 完成测试小结 小黄.小尹 完成静态代码检查结果报告 小靳 完成JUnit脚本编 ...

  9. [GO]文件的收发服务器

    发送方 package main import ( "fmt" "os" "net" "io" ) //发送文件内容 f ...

  10. CodeForces 427A Police Recruits (水题)

    题意:给定 n 个数,有正数和-1, -1表示罪犯,正数表示招了几个警察,一个警察只能看一个罪犯,并且要按顺序,问你有多少罪犯逃脱. 析:很简单么,从开始扫到最后,把是正数就加上,是-1判断剩余警察大 ...