Maison > interface Web > js tutoriel > le corps du texte

js implémentation d'un exemple de code d'effets spéciaux à incrément numérique

怪我咯
Libérer: 2017-07-06 11:34:42
original
3316 Les gens l'ont consulté

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>
Copier après la connexion

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)
};
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal