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

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. Java内部类复习

    package com.t_06; import org.junit.Test; import com.t_06.StaticClass.StaticInnerClass; /** * 一个类的定义放 ...

  2. linux 进程学习笔记-进程退出/终止进程

    <!--[if !supportLists]-->Ÿ <!--[endif]-->退出/终止进程 void _exit(int status) 与 void exit(int ...

  3. TCP协议与流通信

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! TCP(Transportation Control Protocol)协议与IP ...

  4. CodeForces 547E:Mike and Friends(AC自动机+DFS序+主席树)

    What-The-Fatherland is a strange country! All phone numbers there are strings consisting of lowercas ...

  5. MyEclipse修改Servlet模板

    进入myeclipse的安装路径 然后进入plugins文件夹 打开搜索框,输入 *wizard* 找到名字是 com.genuitec.eclipse.wizards_11.5.0.me201310 ...

  6. 【Jmeter】Jmeter聚合报告分析

    Label:每个 JMeter 的 element(例如 HTTP Request)都有一个 Name 属性,这里显示的就是 Name 属性的值 #Samples:表示你这次测试中一共发出了多少个请求 ...

  7. python find()用法

    案例: ### 1 ### str = "01213456" if str.find("23"): print "YES!" else: p ...

  8. JS---设计简易日历

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. 三台主机搭建LAMP(apache、mariadb、php)

    实验环境:均是CentOS7 httpd:172.16.254.88   2.4.6 PHP:172.16.250.140 5.4.16 mariadb:172.16.250.94 5.5.52 第三 ...

  10. sql web Admin 源码.net 升级

    http://www.cnblogs.com/foundation/archive/2008/10/07/1305297.html