<!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. 什么是web资源????

    所谓 web 资源即放在 Internet 网上供外界访问的文件或程序,又根据它们呈现的效果及原理不同,将它们划分为静态资源和动态资源. 1. 什么是静态资源 静态资源是浏览器能够直接打开的,一个 j ...

  2. iss 默认上传大小为30 M

    在 Windows7(iis7.5).Win2008(iis 7.0)和Win2003(iis 6.0) 中,默认设置是特别严格和安全的,这样可以最大限度地减少因以前太宽松的超时和限制而造成的攻击.指 ...

  3. Android 定时重复启动弹出窗口。

    本来想着用handlerpostdelay就可以实现,没想到演示后关闭应用居然报错. 后来想到是没有了activity. ((Activity)context).isFinishing() 可以传入c ...

  4. HttpServletResponse返回页面弹窗

    下载方法: @RequestMapping(value = "/download.htm") public void downLoadFile(String id,HttpServ ...

  5. H5 继承

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签 ...

  6. make: *** No rule to make target `build', needed by `default'. Stop.

    [root@xx nginx-1.8.0]# makemake: *** No rule to make target `build', needed by `default'.  Stop. [ro ...

  7. Halcon中一些突然想不起来但确实有用的算子

    1.Develop dev_display  在现有图形窗口中显示图像目标. dev_set_color   设置一个或更多输出颜色,通常用于设置region或者xld的颜色. dev_set_dra ...

  8. 泛型、反射和抽象工厂结合解决多DB问题

  9. IntelliJ IDEA 注册码及相关资源

    原文地址 http://idea.lanyus.com/ *.lanyus.com下的全部授权服务器已遭JetBrains封杀,请使用http://idea.qinxi1992.cn 或者搭建自己的I ...

  10. 使用UrlRewriteFilter对url进行更替

    一般来说,使用struts之后url的访问实际上访问的是action的地址,为了不让该地址暴露给别人,可以采用UrlRewriteFilter来对url进行重写. 首先,在web.xml里面配置: & ...