In diesem Artikel wird hauptsächlich die JS-Implementierung digitaler Inkrementierungseffekte vorgestellt, die Alipay My Wealth imitiert und einen sehr guten Referenzwert hat. Schauen wir es uns mit dem Redakteur unten an
Letzten Freitag haben wir als Reaktion auf den vorübergehenden Bedarf des Unternehmens die offizielle Website an einem Tag gelöst (ps: relativ einfach, haha). Es gibt einen besonderen Effekt in der Die Anforderung besteht darin, die Zahl auf einen bestimmten Wert zu erhöhen. Tatsächlich ist das Schreiben von JS nicht kompliziert, aber ich habe ein kleines JS-Plug-In gefunden, das leicht und einfach ist und auch sehr einfach und praktisch ist verwenden. Teile es hier mit deinen kleinen Freunden, nimm es, wenn es dir gefällt.
Das Obige ist der Effekt dieses Plug-Ins. Schauen wir uns an, wie man es verwendet
Erstens: Hier ist eine kurze Beschreibung Liste des HTML-Teils
<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>
Lassen Sie uns zwei wichtige Dinge oben verstehen:
Daten-zu diesesAttributSteuern Sie den Endwert, den Sie erhöhen möchten
Datengeschwindigkeit Die Bedeutung davon auf Englisch ist sehr klar Es bedeutet, dass die Geschwindigkeit der Daten zunimmt
ps: Die Klasse und die ID hier können entsprechend den eigenen Modifikationen jedes Einzelnen angepasst werden,
Zweitens: Der JS-Teil ist auch der Kerncode des Plug-Ins
$.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)
};Das Obige ist der gesamte Code, der CSS-Teil wird hier nicht angezeigt, wenn Sie möchten Laden Sie die Demo herunter, klicken Sie unten, um sie herunterzuladen!
Tatsächlich ist dieses Plug-in sehr skalierbar. Was die Anzeige angeht, können Sie sie selbst ändern!
Das obige ist der detaillierte Inhalt vonjs-Implementierung des Beispielcodes für digitale Inkrement-Spezialeffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
