<!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. 【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 13—Clustering 聚类

    Lecture 13 聚类 Clustering 13.1 无监督学习简介  Unsupervised Learning Introduction 现在开始学习第一个无监督学习算法:聚类.我们的数据没 ...

  2. shell编程——日志输出的同时显屏

    在执行脚本的时候我们常常需要将执行过程全部输出到日志里,以备出现报错时可以跟踪分析,开始我用的是exec: exec 1>info.log #把全部执行过程输出到info日志中 exec 2&g ...

  3. 基于NodeJS的14款Web框架

    摘要: 在几年的时间里,Node.js逐渐发展成一个成熟的开发平台,吸引了许多开发者.有许多大型高流量网站都采用Node.js进行开发,像PayPal, 此外,开发人员还可以使用它来开发一些快速移动W ...

  4. sax解析xml文件，封装到对象中

    创建User.java类 public class User { private String id; private String name; private String age; private ...

  5. Creating Procedural Textures

    [Creating Procedural Textures] 由程序主生贴图,然后设置给Material.首先定义需要的数据: 在Start方法中完成初始化,注意设置的是_MainTex. 实现Gen ...

  6. 15-Call to your teacher（有向图的连通判断）

    链接:https://www.nowcoder.net/acm/contest/76/F来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K ...

  7. 8、技术分析fastJson使用

    一.导入包 二.使用 package com.itheima.test; import java.util.ArrayList; import java.util.List; import org.j ...

  8. laravel form表单提交

    控制器 中间层 中间层

  9. 根据dateutil计算从前到现在过去多少时间

    import datetime from dateutil import relativedelta while 1: birthday = input(">>>" ...

  10. mysql 字符串操作

    -- 字符串的长度 SELECT LENGTH('abc'),LENGTH('我的家'); SELECT CHAR_LENGTH('abc'),CHAR_LENGTH('我的家'); -- 合并字符串 ...