jQuery 数字滚动插件
这几天闲来没事写的,有不对的地方还请多多指点
CSS:
.digital-beating { display:inline-block; margin:0; padding:0 2px;} .digital-beating i { display:inline-block; width:17px; height:30px; margin:0; padding:0; 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);
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:
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。