Maison > Article > interface Web > js implémentation d'un exemple de code d'effets spéciaux à incrément numérique
Cet article présente principalement l'implémentation JS d'effets d'incrémentation numérique imitant Alipay My Wealth, qui a une très bonne valeur de référence. Jetons un coup d'œil avec l'éditeur ci-dessous
Vendredi dernier, en réponse aux besoins temporaires de l'entreprise, nous avons résolu le site officiel en une journée (ps : relativement simple haha). demande qui consiste à augmenter le nombre à une valeur spécifiée, en fait, écrire du JS n'est pas compliqué, mais j'ai trouvé un petit plug-in js qui est léger et simple, et il est également très simple et pratique à utiliser. utiliser. Partagez-le ici avec vos petits amis, prenez-le si vous l'aimez.
Ce qui précède est l'effet de ce plug-in, voyons comment l'utiliser
Tout d'abord : voici un bref liste de la partie 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>
Comprenons deux éléments clés ci-dessus :
données à thisAttributContrôlez la valeur finale que vous souhaitez incrémenter
data-speed La signification de ceci en anglais est très clair Cela signifie que la vitesse d'augmentation des données
ps : La classe et l'identifiant ici peuvent être ajustés en fonction des modifications de chacun,
Deuxième : La partie JS est également le code principal du plug-in
$.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) };
Ce qui précède est tout le code, la partie CSS ne sera pas affichée ici Si vous le souhaitez. téléchargez la démo, cliquez pour la télécharger ci-dessous !
En fait, ce plug-in est très évolutif Quant au type d'affichage que vos amis aiment, vous pouvez le modifier vous-même !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!