这几天闲来没事写的,有不对的地方还请多多指点

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 数字滚动插件的更多相关文章

  1. jquery 数字滚动方法

    jquery 数字滚动方法用的是countUp.js这个插件 target = 目标元素的 ID:startVal = 开始值:endVal = 结束值:decimals = 小数位数,默认值是0:d ...

  2. 【精心推荐】12款很好用的 jQuery 图片滚动插件

    这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...

  3. Flexslider - 响应式的 jQuery 内容滚动插件

    FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发 ...

  4. 10款很好用的 jQuery 图片滚动插件

    jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...

  5. liMarquee – jQuery无缝滚动插件(制作跑马灯效果)

    liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...

  6. (转)15个非常棒的jQuery无限滚动插件【瀑布流效果】

    原文地址:http://www.cnblogs.com/lyw0301/archive/2013/06/19/3145084.html 现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布 ...

  7. 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)

    像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...

  8. 15个非常棒的jQuery无限滚动插件【瀑布流效果】

    现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布流).如果你碰巧观察Pinterest的网站,如Facebook,Twitter和deviantART的,你会发现无限滚动的动作,当旧的 ...

  9. jQuery数字滚动(模拟网站人气、访问量递增)原创

    插件描述:实现数字上下滚动,模拟网站人气.访问量递增的动画效果,兼容性如下: 使用方法 $(el).runNum(val,params);   参数详解 val:数值型(默认70225800): pa ...

随机推荐

  1. win7 jdk1.7配置环境变量

    1.安装目录,C:\Program Files\Java

  2. PHP中读写文件

    在PHP中读写文件,可以用到一下内置函数: 1.fopen(创建文件和打开文件) 语法: 复制代码代码如下:fopen(filename,mode) filename,规定要打开的文件.mode,打开 ...

  3. Virtual Codeforces Round #392 (Div. 2)

    下午闲来无事开了一场Virtual participation 2h就过了3道水题...又跪了..这只是Div. 2啊!!! 感觉这次直接就是跪在了读题上,T1,T2读题太慢,T3还把题读错了 要是让 ...

  4. uC/OS-II源码分析(一)

    下载地址:http://www.micrium.com/ 它的特点: 1)开源, 2)可移植性,绝大部分代码用C写,硬件相关部分用汇编写, 3可固化, 4)可剪裁,这通过条件编译实现,使用#defin ...

  5. Robot Framework基础学习(六)

    网页弹窗 参考:http://blog.csdn.net/Allan_shore_ma/article/details/65629246 常见的网页弹窗,有如下几类: alert ajax ifram ...

  6. Web 字体的选择和运用

    首先来看一则设计师和前端小白的日常,这是使用 Mac OS 的设计师给的效果图 这是使用 Windows 开发的实际产品页面 我跟你们说,设定字体要按照基本法! (PS: 以上截图不代表网站真实面貌, ...

  7. Python中的数据结构和算法

    一.算法 1.算法的时间复杂度 大 O 记法,是描述算法复杂度的符号O(1) 常数复杂度,最快速的算法. 取数组第 1000000 个元素 字典和集合的存取都是 O(1) 数组的存取是 O(1) O( ...

  8. Django 的 路由系统

    Django 的路由系统 URL 配置(URLconf)就像Django 锁支撑网站的目录. 它的本质就是URL 与要为该URL 调用的视图函数之间的映射表. 你就是以这种方式告诉Django, 对于 ...

  9. Linux/Unix中的命令提示符prompt

    用惯了DOS的伙计刚用Unix时最想干的事情就是想把Unix搞得像DOS一些, 其中的一条就是把Unix的提示符设置成$p$g那样的.下面就说一说做的方法. 不同的SHELL设置的方法不同,比较方便的 ...

  10. JEECMS-新闻内容中遍历批量上传的图片

    [#list content.pictures as p] <li value="${p_index+1}"> <img src="${p.imgPat ...