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 ...
随机推荐
- python raw string
path = r'C:\a\b\c.txt' r'字符串' 是raw 字符串的意思, 其中的字符串不会转义,即不解释 \ . 作用之一:可以用来保存Windows的路径,直接从资源管理器复制来粘贴,不 ...
- 微信小程序module.exports 模块化
//common.js var studentList = [ { name: "xiaoming", age: "22" ...
- Qt容器组件(一)之QGroupBox、QScrollArea、QToolBox、QTabWidget
QT中有九种容器组件,分别是组合框QGroupBox.滚动区QScrollArea.工具箱QToolBox.选项卡QTabWidget.控件栈QWidgetStack.框架QFrame.组件QWidg ...
- 解决CentOS 7安装zabbix 3.0 无法启动zabbix-server的问题[segfault at 18 ip 00007f78842b4bd0 sp 00007fff1995a818 error 4 in libpthread-2.17.so[7f78842ab000+16000]]
解决CentOS 7安装zabbix 3.0 无法启动zabbix-server的问题 [root@localhost sbin]# service zabbix-server start Redir ...
- Elasticsearch5.X Mapping详解
0.引言 在关系型数据库如Mysql中,设计库表需要注意的是: 1)需要几个表: 2)每个表有哪些字段: 3)表的主键及外键的设定——便于有效关联. 表的设计遵守范式约束,考虑表的可扩展性,避免开发后 ...
- POJ - 2955 Brackets括号匹配(区间dp)
Brackets We give the following inductive definition of a “regular brackets” sequence: the empty sequ ...
- HRBUST - 1819 石子合并问题--圆形版(区间dp+环形+四边形优化)
石子合并问题--圆形版 在圆形操场上摆放着一行共n堆的石子.现要将石子有序地合并成一堆.规定每次只能选相邻的两堆合并成新的一堆,并将新的一堆石子数记为该次合并的得分.请编辑计算出将n堆石子合并成一堆的 ...
- Servlet拦截匹配规则可以自已定义,拦截哪种URL合适?
Servlet拦截匹配规则可以自已定义,拦截哪种URL合适? 当映射为@RequestMapping("/user/add")时,为例: 1.拦截*.do.*.htm, 例如:/u ...
- public,protect,private访问权限
第一:private, public, protected 访问标号的访问范围. private:只能由1.该类中的函数.2.其友元函数访问.不能被任何其他访问,该类的对象也不能访问. protect ...
- JAVA企业级开发-xml基础语法&约束&解析(04)
一.什么是xml html:超文本标记语言.它主要是用来封装页面上要显示的数据,最后通过浏览器来解析html文件,然后把数据展示在浏览器上.同样我们可以使用JS和DOM技术对html文件进行解析和操作 ...