Dieser Artikel teilt den Animationscode für JS mit, um Parabola des Produkts zu implementieren, das im Einkaufswagen als Referenz hinzugefügt wurde. Der spezifische Inhalt ist wie folgt
parapola.js
/*! * Von Zhangxinxu (.com) 2012-12-27 * Sie können http://www.zhangxinxu.com/wordpress/?p=3855 besuchen, um mehr Informationen zu erhalten Hundert Pixel * Auf der Seite platzieren wir zwei Objekte, zwischen 200 ~ 800 Pixel, wir können 2 Meter bis 8 Meter in der realen Welt zu kartieren, was 100: 1 ist. Diese Methode spiegelt dies jedoch nicht wider, sodass keine Aufmerksamkeit auf */ var -Standardeinstellungen = {Geschwindigkeit: 166.67, // Die Pixel -Rahmengröße von jedem Frame, jeweils. 0,001, // Es bezieht sich tatsächlich auf den Abstand vom Fokus zur Linie. Sie können es in Krümmung abstrakt. Dies simuliert die Parabola, ein Objekt zu werfen, daher ist es der Öffnungsverlauf: Funktion () {}, vollständig: function () {}}; var params = {}; Optionen = Optionen || {}; für (varschlüssel in Standards) {Params [Schlüssel] = Optionen [Schlüssel] || Standardeinstellungen [Schlüssel]; } var expors = {mark: function () {return this; }, Position: function () {return this; }, move: function () {return this; }, init: function () {return this; }}; /* Bestimmen Sie den Weg zum Bewegen. if ("onInput" in testDiv) {["", "ms", "webkit"]. foreach (Funktion (Präfix) {var Transformation = Präfix + (Präfix? } // Bestimmen Sie die Bewegungskurvenfunktion basierend auf den Koordinaten von zwei Punkten und Krümmung (dh die Werte von a und b) /*Formel: y = a*x*x + b*x + c; */ var a = params.curvature, b = 0, c = 0; // Der Flag -Wert, ob Bewegungs var flagmove = true ausführt; if (element && target && element.nodetype == 1 && target.nodetype == 1) {var rectelement = {}, rectTarget = {}; // Verschieben Sie die Mittellopunktposition des Elements, die Mittelpunktposition des Zielelements var centrum // Die Koordinatenposition des Zielelements var coordinateElement = {}, Coordinatetarget = {}; // markieren Sie die Koordinaten des aktuellen Elements exports.mark = function () {if (flagmove == false) geben dies zurück; if (typeof coordinateElement.x == "undefined") this.position (); element.setAttribute ("data-center", [koordelement.x, coordinateElement.y] .join ()); target.setAttribute ("data-center", [coordarget.x, coordarget.y] .join ()); gib dies zurück; } exports.position = function () {if (flagmove == false) geben dies zurück; var scrollleft = document.documentElement.scrollleft || document.body.scrollleft, scrolltop = document.documentElement.scrolltop || document.body.scrolltop; // Anfangsposition if (movestyle == "margin") {Element.Style.Marginleft = element.style.margintop = "0px"; } else {Element.Style [movestyle] = "übersetzen (0, 0)"; } // Koordinaten der vier Kanten rectelement = element.getBoundingClientRect (); rectTarget = target.getBoundingClientRect (); // Koordinaten des Mittelpunkts des sich bewegenden Elements CenterElement = {x: rectelement.left + (rectelement.Right - rectelement.left) / 2 + scrollleft, y: rectelement.top + (rectelement.bottom - rectelement.top) / 2 + scrolltop}; // Die Mittelpunktposition des Zielelements centertarget = {x: rectTarget.left + (rectTarget.Right - rectTarget.left) / 2 + scrollleft, y: rectTarget.top + (rectTarget.bottom - rectTarget.top) / 2 + scrolltop}; // in die relative Koordinatenpositionskoordelement konvertieren = {x: 0, y: 0}; Coordinatetarget = {x: -1 * (CenterElement.x - Centertarget.x), y: -1 * (CenterElement.y - Centertarget.y)}; / * * Weil nach (0, 0), also c = 0 * so: * y = a * x * x + b * xx; * y1 = a* x1* x1 + b* x1; * y2 = a* x2* x2 + b* x2; * Verwenden Sie die zweite Koordinate: * b = (y2+ a * x2 * x2) / x2 * / // so b = (koordelte.y - a * coordinatetarget.x * coordTarget.x) / coordTarget.x; gib dies zurück; }; // Entsprechend dieser Kurve Exports.move = function () {// Wenn die Kurvenbewegung nicht beendet ist, wird eine neue Bewegung nicht mehr ausgeführt, wenn (Flagmove == false) dies zurücksetzt; var startx = 0, rate = cOCTORTARGET.x> 0? 1: -1; var Step = function () {// Tangent y '= 2AX + B var tangent = 2 * a * startx + b; // = y / x // y*y + x*x = Geschwindigkeit // (Tangente*x)^2 + x*x = Geschwindigkeit // x = math.sqr (Speed / (Tangente*Tangente + 1)); startx = startx + rate * math.sqrt (params.speed / (Tangente * Tangente + 1)); // Cross -Border if ((rate == 1 && startx> cOCTORTARGET.X) || (rate == -1 && startx <coordinatetarget.x)) {startx = coordinatetarget.x; } var x = startx, y = a * x * x + b * x; // Markieren Sie die aktuelle Position, hier besteht der Verdacht auf die Verwendung von Tests. In der tatsächlichen Verwendung können Sie dieses Zeilenelement. // x, y ist derzeit die Koordinaten und muss in den positionierten Pixelwert konvertiert werden, wenn (movestyle == "margin") {Element.Style.Marginleft = x + "px"; element.style.margintop = y + "px"; } else {Element.Style [movestyle] = "Translate (" + [x + "px", y + "px"]. join () + ")"; } if (startx! window.RequestanimationFrame (Schritt); } else {// Die Bewegung ist vorbei, der Rückruf führt params.complete () aus; flagmove = true; }}; window.RequestanimationFrame (Schritt); flagmove = false; gib dies zurück; }; // Die Initialisierungsmethode exports.init = function () {this.position (). Mark (). Move (); }; } return expors;};/*! RequestAnimationFrame.js * von Zhangxinxu 2013-09-30 */(function () {var lastTime = 0; var-Anbieter = ['webkit', 'mOZ']; für (var x = 0; x <Anbieter.Length &&! 'RequestArationFrame']; Date () GetTime (); Funktion (ID) {ClearTimeout (ID);verwenden:
/* element */var element = document.getElementById("element"), target = document.getElementById("target");// The position mark of the parabola element var parabola = funParabola(element, target).mark();// The trigger of parabola motion document.body.onclick = function() { element.style.marginLeft = "0px"; Element.Style.Margintop = "0px"; parabola.init ();};Fügen Sie zum Einkaufswagen den tatsächlichen Kampf hinzu:
/ * Dieses Demo -Skript basiert auf Iebetter.js, Projektadresse: https://github.com/zhangxinxu/iebetter.js * /// Elemente und einige andere Variablen var EflyElement = document.querySelector ("#flyitem"), eleselyel.queryselector ("#"#"#shopcart". var myparabola = funParabola (EleflyElement, Eleshopcart, {Speed: 400, Krümmung: 0,002, vollständig: function () {EleflyElement eleshopcart) {[] .slice.call (document.getElementsByClassName ("btncart")). foreach (function (button) {button.adDeVentListener ("click", function () {// Scrollgröße var scrollleft = document.documentel.scrollleft || Dokument.DocumentElement.Scrolltop ||. MyParabola.Position (). Move (); });}Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.