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);

插件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:

时间: 2024-10-09 06:25:40

jQuery 数字滚动插件的相关文章

jQuery无缝滚动插件

插件代码 ;(function ($) { // jQuery marquee 插件 $.fn.marquee = function (options) { // 默认设置 var defaults = { derection: "top", interval: 50 }; // 合并后的参数设置 var options = $.extend(defaults, options); var $mar = $(this), original = $mar.children().first

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

FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发中试试. 温馨提示:响应式效果需要再 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中才支持. 效果演示     插件下载 使用示例: <div class="flexslider"> <ul class="slides"&g

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

jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好用的 jQuery 图片滚动插件分享给大家. 1.Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次! 在线演示 源码下载 2.Slides Slides 是一款精巧的

liMarquee – jQuery无缝滚动插件

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><title>jQuery无缝滚动插件liMarquee演示-向上滚动_dowebok</title><link rel="stylesheet" href="css/liMarquee.css"><style>

jquery数字打分插件与嵌入到EasyUI datagrid中的示例

这阵儿是断续折腾定性考评表打分的事儿了.虽是UI菜鸟,但却一直想让用户在操作上更加方便,之前基于"jQuery星级评分插件"实现了一个评分界面(因为比较简单,就不做总结了),用户反应还不错. 这一次的评分表中,各项分值的特点有:一是每个评分项的分值均不太一样:二是分值为整数,但分值范围大,从-1000到+1000都存在.若是采用在datagrid中嵌入编辑框的形式实现的话,总是觉得让用户使用不太方便,所以内心非常想做一个数字插件,然后就搜到中意的例子--"简单的jQuery用

jQuery视差滚动插件,(附原理分析,调用方法)

演示地址:http://www.jq22.com/jquery-info1799 jquery插件,使用验证过可用. 分析源代码后总结原理:设置background样式为fixed,判断浏览器滚动距离,当在视窗范围内时,调用$(window).scroll.并根据所设置的速度比例,进行同步滚动. 调用时,设置三个必要参数:data-speed,data-type,background样式为fixed <div data-speed="4" data-type="back

45个炫酷的jquery图片滚动插件

1. Agile jQuery Carousel Highly customizable jQuery Carousel plugin so you can build according to your requirements. JSON data format is used to provide easier integration with external data or data from your CMS. Use it for agile web development. Th

Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你.Nivo Slider首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色:? 16个独特的过渡效果? 简洁和有效的标记? 加载参数设置?

jQuery文字和图片列表滚动插件

这是一款可以使任何文字和图片列表进行水平和垂直滚动的jQuery插件.该jquery列表滚动插件可以使用任何列表.任何尺寸和任何内容.它可以设置水平和垂直滚动,自动滚动和无限循环滚动,非常适用于滚动新闻的制作. 该jQuery文字图片滚动插件的特点和一些注意事项如下: 使用非常简单. 可以在任何形式的列表. 列表中的元素可以是文字.图片等等. 列表中的元素不能是固定定位,或者是相同的元素. 列表元素可以水平或垂直滚动. 可以使列表简单滚动或无限循环滚动. 可以手动滚动列表,也可是设置为自动滚动.