jQuery 数字滚动插件
这几天闲来没事写的,有不对的地方还请多多指点
CSS:
.digital-beating { display:inline-block; margin:; padding:0 2px;}
.digital-beating i { display:inline-block; width:17px; height:30px; margin:; padding:; background:url(../images/icon_0-9.jpg) no-repeat 0 0; text-align:center; line-height:30px;}
.digital-beating i.d { background-position:-4px -300px; width:9px;}
HTML:
<span id="char_Count1" class="digital-beating" data-num="212.0555"></span><br />
<span id="char_Count2" class="digital-beating" data-num="123456"></span><br />
<span id="char_Count3" class="digital-beating" data-num="212.0555"></span><br />
JS:
/***
* jQuery plugin dBeat()
* Function : 数字滚动
* Version : 0.3
* Author : Cymmint
* Date : 2015-02-13 10:50
*/
;(function($){
//支持Firefox backgroundPosition plugin
$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.pos === 0 && typeof fx.end == 'string') {
var start = $.css(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1]; function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
}); //digital beating plugin
$.fn.dBeat = function(opts){
var define = {
loop : true, //循环滚动|循环次数, [true|false|正整数]
real : true, //真实数据
dec : 0, //小数位数
high : 30, //数字行高,U.px
range : 1000, //自增区间, 当real为true时, range值被舍弃
time : 3000, //循环滚动间隔时间, U.ms
speed : 1000, //数字滚动速度,此参数必须小于time U.ms
t_out : 0 //清除循环
}; opts = $.extend({}, define, opts); var methods = {
getNum : function(_this){ //Get data number
var num = _this.data("num");
num = isNaN(num) ? 0 : num*1;
return num.toFixed(opts.dec);
},
getRandom : function() { //Random
var r = opts.range == null || opts.range == "" || isNaN(opts.range) ? 1000 : opts.range;
return Math.random() * (r + 1);
},
beat : function(_this){ //Number beating
_this.find("i:not('.d, .e')").each(function(){
var self = $(this),
data = {}; if (navigator.userAgent.toLocaleLowerCase().match(/firefox/) != null) {
data.backgroundPosition = "0 -" + self.attr("num") * opts.high + "px";
} else {
data.backgroundPositionY = -self.attr("num") * opts.high;
}
self.animate(data, opts.speed);
});
},
setLabel : function(_this, num){ //Set in the digital DOM
var tag = _this.find("i"),
len = tag.length - num.length,
htm = ""; if (len > 0) {
_this.find("i:lt("+ len +")").remove();
tag = _this.find("i");
}
len = tag.length; for (var i=num.length-1; i>=0; i--) {
if (len-- > 0) {
if (num.charAt(i) == ".") {
tag.eq(len).attr("num", 10);
} else {
if (num.charAt(i) == tag.eq(len).attr("num")) {
tag.eq(len).addClass("e");
} else {
tag.eq(len).attr("num", num.charAt(i));
tag.eq(len).removeClass("e");
}
}
} else {
if (num.charAt(i) == ".") {
htm = '<i class="d" num="10"></i>' + htm;
} else {
htm = '<i num="'+ num.charAt(i) +'"></i>' + htm;
}
}
}
_this.prepend(htm);
},
main : function(_this){
var num = this.getNum(_this); //真实数据滚动 if (!opts.real) { //伪数据滚动
num = (num*1 + this.getRandom()*1).toFixed(opts.dec);
} _this.data("num", num);
this.setLabel(_this, num);
this.beat(_this);
if (opts.real && typeof opts.data === "function") {
opts.data.call(_this);
} if (opts.loop) {
opts.t_out = setTimeout(function(){
methods.main(_this);
}, opts.time);
}
if (/^\d+$/.test(opts.loop) && !--opts.loop) {
clearTimeout(opts.t_out);
}
}
}; return this.each(function(){
var _this = $(this);
methods.main(_this);
});
};
})(jQuery);
插件JS
CALL:
$(function(){
$("#char_Count1").dBeat({
dec : 2,
loop : true,
real : false,
time : 3000,
data : function(){
var num = 0;
num = getRandom(); //伪ajax动态获取数据
$(this).data("num", num);
}
});
});
function getRandom() {
var r = 100000;
return Math.random() * (r + 1);
}
IMG:

jQuery 数字滚动插件的更多相关文章
- jquery 数字滚动方法
jquery 数字滚动方法用的是countUp.js这个插件 target = 目标元素的 ID:startVal = 开始值:endVal = 结束值:decimals = 小数位数,默认值是0:d ...
- 【精心推荐】12款很好用的 jQuery 图片滚动插件
这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...
- Flexslider - 响应式的 jQuery 内容滚动插件
FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发 ...
- 10款很好用的 jQuery 图片滚动插件
jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...
- liMarquee – jQuery无缝滚动插件(制作跑马灯效果)
liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...
- (转)15个非常棒的jQuery无限滚动插件【瀑布流效果】
原文地址:http://www.cnblogs.com/lyw0301/archive/2013/06/19/3145084.html 现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布 ...
- 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)
像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...
- 15个非常棒的jQuery无限滚动插件【瀑布流效果】
现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布流).如果你碰巧观察Pinterest的网站,如Facebook,Twitter和deviantART的,你会发现无限滚动的动作,当旧的 ...
- jQuery数字滚动(模拟网站人气、访问量递增)原创
插件描述:实现数字上下滚动,模拟网站人气.访问量递增的动画效果,兼容性如下: 使用方法 $(el).runNum(val,params); 参数详解 val:数值型(默认70225800): pa ...
随机推荐
- 2018.3.3 How too much fructose may cause liver damage
Fructose is the sweetest of the natural sugars. As its name suggests, it is found mainly in fruits. ...
- #基础概念#之tensor
中译名:张量 定义: from wiki: In mathematics, tensors are geometric objects that describe linear relations b ...
- Collaborative Index Embedding for Image Retrieval
最近看了一篇比较好的文章,效果很好,简单记录一下. 这篇文章的核心思想是,融合两种不同类型的特征.文章中用的是SIFT和CNN提取的特征.还是神经大法好啊. 第一步就是建立两种不同特征的索引,文章用的 ...
- django 模板中通过变量替代key取字典内容
模板中通过变量替代key取字典内容 templatetags/├── get_item.py├── __init__.py ###get_item.py # coding=utf-8 from dja ...
- 洛谷P1330封锁阳光大学——图的染色
题目:https://www.luogu.org/problemnew/show/P1330 此题我最初没有思路,暴搜而爆0: 然后才明白关键在于把所有点分成两类,因为可以发现点之间的关系是存在两两对 ...
- Set connectionId threw an exception.
今天调试一个WPF程序时,出现一个问题. 程序运行后抛出异常, "Set connectionId threw an exception. XXXXXXXXXX",原因是依赖的一个 ...
- bootstrap模版兼容IE浏览器代码嵌入
1. bootstrap模板为使IE6.7.8版本(IE9以下版本)浏览器兼容html5新增的标签,引入下面代码文件即可. <script src="https://oss.maxc ...
- SpringBoot @RequestBody 中文乱码
今天突然想学习一下Restful风,详细的我就不赘述了,我的理解是同一个请求路径根据请求方式不同进行不同的处理 如四种提交方式,这里推荐一个插件Postman,可以模仿各种请求类型,自行百度安装吧 G ...
- SSM之全局异常处理器
1. 异常处理思路 首先来看一下在springmvc中,异常处理的思路: 如上图所示,系统的dao.service.controller出现异常都通过throws Exception向上抛出,最后 ...
- POJ-3617
Best Cow Line Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 25616 Accepted: 6984 De ...