www.qjdy.com-奇迹赌场 > 佳美特设计 > css部分就不在这里显示了

原标题:css部分就不在这里显示了

浏览次数:96 时间:2019-08-08

js 数字递增特效 仿支付宝小编的财物 HTML5,jshtml5

上周五应着公司临时需求,一天的时间解决掉官网(ps:比较简单哈哈),需求里面有一个特效就是数字递增到指定的数值,其实JS写也不复杂的,但是我发现一个js小插件,这个插件轻巧简单,用起来也非常简单实用。在这里分享给小盆友们吧,喜欢的直接拿走。

地点就是以此插件的作用,大家来看一下怎么使用的啊

率先: HTML部分这里差不离列举四个

 <div class="counter col_fourth">
     <h2 class="timer count-title" id="count-number" data-to="300" data-speed="1500"></h2>
     <p class="count-text ">小月博客</p>
 </div>

 

上边我们来打探五个非常重要的东西:

  • data-to   那脾性情决定你最后要递增的数值是不怎么
  • data-speed    这几个看日语的野趣就很精晓了正是意味着数据递增的速度了

ps: 这里的class和id  依据我们各自的改变去调度就好了,

其次:JS部分也是插件的主导代码

$.fn.countTo = function(a) {
     a = a || {};
     return $(this).each(function() {
         var c = $.extend({},
         $.fn.countTo.defaults, {
             from: $(this).data("from"),
             to: $(this).data("to"),
             speed: $(this).data("speed"),
             refreshInterval: $(this).data("refresh-interval"),
             decimals: $(this).data("decimals")
         }, a);
     var h = Math.ceil(c.speed / c.refreshInterval),
     i = (c.to - c.from) / h;
     var j = this,
     f = $(this),
     e = 0,
     g = c.from,
     d = f.data("countTo") || {};
     f.data("countTo", d);
     if (d.interval) {
         clearInterval(d.interval)
     }
     d.interval = setInterval(k, c.refreshInterval);
     b(g);
     function k() {
         g  = i;
         e  ;
         b(g);
         if (typeof(c.onUpdate) == "function") {
             c.onUpdate.call(j, g)
         }
         if (e >= h) {
             f.removeData("countTo");
             clearInterval(d.interval);
             g = c.to;
             if (typeof(c.onComplete) == "function") {
                 c.onComplete.call(j, g)
             }
         }
     }
     function b(m) {
         var l = c.formatter.call(j, m, c);
         f.html(l)
     }
 })
};
$.fn.countTo.defaults = {
     from: 0,
     to: 0,
     speed: 1000,
     refreshInterval: 100,
     decimals: 0,
     formatter: formatter,
     onUpdate: null,
     onComplete: null
};
function formatter(b, a) {
     return b.toFixed(2)
}
$("#count-number").data("countToOptions", {
     formatter: function(b, a) {
         return b.toFixed(2).replace(/B(?=(?:d{3}) (?!d))/g, ",")
     }
});
$(".timer").each(count);
function count(a) {
     var b = $(this);
     a = $.extend({},
     a || {},
     b.data("countToOptions") || {});
     b.countTo(a)
};

 

以上正是代码的满贯了,css部分就不在这里显得了,demo下载的同伴在下边点击下载吧!

事实上这一个插件可扩张性相当大的,至于小同伙喜欢如何样子的显得自个儿出手改动呢!

 

demo下载请点击

 

 

 

数字递增特效 仿支付宝小编的能源 HTML5,jshtml5 那礼拜三应着公司有的时候供给,一天的日子化解掉官方网站(ps:比较轻巧哈哈),要求里面有二个...

本文由www.qjdy.com-奇迹赌场发布于佳美特设计,转载请注明出处:css部分就不在这里显示了

关键词: BBIN真人视讯

上一篇:今天开始小编为大家系统整理关于正则表达式的

下一篇:没有了