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 ...
随机推荐
- P2463 [SDOI2008]Sandy的卡片[差分+串拼接后缀数组]
P2463 [SDOI2008]Sandy的卡片 套路都差不多,都是差分后二分答案找lcp.只是这题要把多个串拼接起来成为一个大串,中间用某些值域中没有的数字相隔(最好间隔符都不一样想想为什么),排序 ...
- 【C】字符串常量和字符数组
此次博客是转载某位博主的文章,不过现在找不到了,所以先声明一下. 先贴一段代码: #include <stdio.h> int main(int argc, const char** ar ...
- Chrome检查更新总失败?安装细则讲解
现在 Google Chrome 的稳定版都已经发布 68.0 版本了,我机上还是 54, 本想在线更新一下,结果点击菜单项中的“关于 Google Chrome”后,进入的界面提示“更新失败(错误: ...
- C# 架构模式
单例模式 (Singleton) 单例讲的是当一个类被初次调用时,会产生一个类的实例, 而这个类的实例会贯穿程序的整个生命周期.单例提供了一个全局.唯一的实例. 步骤:1.让类自己创建一个实例:2.提 ...
- 物联网项目开发必读 深度分析MQTT协议优缺点
物联网并不仅仅是一种网络,而是一个新的生态环境,它描述的本质是越来越多的使用物品通过网络连接在一起并可使用单个或者多个的终端设备对它们进行各种控制和使用—当然,工业上的物联网通常连接到的石鼓传感器或者 ...
- js 常用验证
邮箱验证: $(function () { $("#txt_Email").blur(function () { var ema ...
- WPF PasswordBox鼠标进入时程序异常退出的解决办法
最近在开发了一个程序中用到了PasswordBox控件,但是在程序给别人用的时候,鼠标一进入控件时程序就异常退出,查了下windows日志,错误显示如下: 应用程序: WpfPasswordTest2 ...
- InnoSetup自动检测并安装.Net Framework
InnoSetup可在在脚本中插入[Code]代码段,其中的代码可以通过事件驱动,支持的主要事件如下: function InitializeSetup(): Boolean; ——安装程序初始化,返 ...
- 《Java多线程编程核心技术》读后感(二)
方法内的变量为线程安全 package Second; public class HasSelfPrivateNum { public void addI(String username) { try ...
- 优酷电视剧爬虫代码实现一:下载解析视频网站页面(4)补充: Java正则表达式Matcher.group(int group)相关类解析
在Java正则表达式的相关类Matcher中,有如下几个方法: - int groupCount() - String group(int group) - int start(int group) ...