この記事では主に、非常に優れた参考値を持つ Alipay My Wealth のデジタル インクリメント特殊効果を実現するための js を紹介します。編集者と一緒に見てみましょう
先週の金曜日、会社の一時的なニーズに応えて、公式ウェブサイトを1日で完成させました(追伸:比較的簡単です笑)需要が増加するという特別な効果があります。実際には、これは JS で書かれています。複雑ではありませんが、このプラグインは軽くてシンプルで、非常にシンプルで実用的です。ここで小さなお友達と共有して、気に入ったら受け取ってください。
上記はこのプラグインの効果です。使い方を見てみましょう
最初に、HTML 部分の簡単なリストを次に示します
<p class="counter col_fourth"> <h2 class="timer count-title" id="count-number" data-to="300" data-speed="1500"></h2> <p class="count-text ">小月博客</p> </p>
上記の 2 つの重要なことを理解しましょう:
data-to この 属性 は、増分する最終値を制御します
data-speed 英語でのこれの意味は非常に明確で、データの速度を意味しますインクリメント
追記: ここの クラス と ID は、各自の変更に従って調整できます。
2 番目: 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部分はここにありません デモをダウンロードしたい場合は、以下をクリックしてダウンロードしてください。
実際、このプラグインは非常に拡張性が高く、好みの表示に変更することができます。
【関連おすすめ】
3. php.cn Dugu Jiijian (3) - JavaScriptビデオチュートリアル
以上がjs 実装 (私の富の模倣) デジタル インクリメント特殊効果コードを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。