Cet article partage le code d'animation pour JS pour implémenter la parabole du produit ajouté au panier pour votre référence. Le contenu spécifique est le suivant
parapola.js
/ *! * par Zhangxinxu (.com) 2012-12-27 * Vous pouvez visiter http://www.zhangxinxu.com/wordpress/?p=3855 pour obtenir plus d'informations * sous la licence MIT * / var funparabola = fonction (élément, cible, options) {/ * * Les pages Web doivent évidemment une page à l'échelle. Quelques centaines de pixels * Sur la page, nous plaçons deux objets, entre 200 et 800 pixels, nous pouvons mapper à 2 mètres à 8 mètres dans le monde réel, ce qui est 100: 1 * Cependant, cette méthode ne reflète pas cela, donc il n'est pas nécessaire de prêter attention à * / var par défaut = {Speed: 166.67, // La taille des pixels de chaque trame, chaque came 0,001, //, il se réfère en fait à la distance entre la focalisation et la ligne. Vous pouvez l'abstraire en courbure. Cela simule la parabole de lancer un objet, il s'agit donc de la progression d'ouverture: function () {}, complète: function () {}}; var params = {}; Options = Options || {}; for (var key in par défaut) {params [key] = options [key] || par défaut [key]; } var exports = {mark: function () {return this; }, position: function () {return this; }, move: function () {return this; }, init: function () {return this; }}; / * Déterminer la façon de déplacer * ie6-ie8 est le déplacement de marge * ie9 + utiliser la transformation * / var movyestyle = "margin", testDiv = document.CreateElement ("div"); if ("onInput" dans TestDiv) {["", "MS", "WebKit"]. ForEach (fonction (préfixe) {var transform = préfixe + (prefix? "t": "t") + "ransform"; if (transform dans testDiv.Style) {movyleT = transform;}}); } // Déterminez la fonction de courbe de mouvement en fonction des coordonnées de deux points et de la courbure (c'est-à-dire de déterminer les valeurs de a et b) / * formule: y = a * x * x + b * x + c; * / var a = params.curvature, b = 0, c = 0; // La valeur du drapeau de l'opportunité de réaliser le mouvement var flagMove = true; if (élément && target && élément.nodeType == 1 && cible.nodeType == 1) {var rectElement = {}, recttarget = {}; // Déplacez la position du point central de l'élément, la position du point central de l'élément cible var CenterElement = {}, centterarget = {}; // La position de coordonnée de l'élément cible var coordonnées = {}, coordinateTarget = {}; // Marquez les coordonnées de l'élément actuel export.mark = function () {if (flagMove == false) renvoie ceci; if (typeof coordinateelement.x == "Undefined") this.position (); element.setAttribute ("Data-Center", [Coorordement.x, coordinateelement.y] .join ()); Target.SetAttribute ("Data-Center", [coordtarget.x, coordtarget.y] .join ()); retourner ceci; } exports.position = function () {if (flagMove == false) renvoie ceci; var scrollleft = document.DocumentElement.Scrollleft || document.body.scrollleft, scrolltop = document.documentElement.scrolltop || document.body.scrolltop; // position initiale if (movyyle == "margin") {element.style.marginleft = element.style.margintop = "0px"; } else {element.style [movyyle] = "tradlate (0, 0)"; } // Coordonnées des quatre bords recselement = element.getBoundingClientRect (); recttarget = cible.getBoundingClientRect (); // Coordonnées du point central de l'élément mobile CenterElement = {x: rectElement.left + (rectElement.Right - rectElement.left) / 2 + Scrollleft, y: rectElement.top + (recEllement.bottom - rectElement.top) / 2 + scrolltop}; // la position du point central de l'élément cible centterGetTeget = {x: recttarget.left + (recttarget.Right - recttarget.left) / 2 + scrollleft, y: recttarget.top + (recttarget.bottom - recttarget.top) / 2 + scrolltop}; // Convertir en coordonnées de coordonnées relatives COORDEMENT = {x: 0, y: 0}; coordinateTarget = {x: -1 * (CenterElement.x - Centertarget.x), y: -1 * (CenterElement.y - Centertarget.y)}; / * * Parce qu'après (0, 0), donc c = 0 * SO: * y = a * x * x + b * xx; * y1 = a * x1 * x1 + b * x1; * y2 = a * x2 * x2 + b * x2; * Utilisez la deuxième coordonnée: * b = (y2 + a * x2 * x2) / x2 * / // donc b = (coordtarget.y - a * coordinatetarget.x * coordtarget.x) / coordtarget.x; retourner ceci; }; // se déplacer selon cette courbe exports.move = function () {// Si le mouvement de la courbe n'est pas terminé, un nouveau mouvement ne sera plus exécuté si (flagmove == false) renvoie ceci; var startx = 0, rate = coordtarget.x> 0? 1: -1; var Step = function () {// tangent y '= 2ax + b var tangent = 2 * a * startx + b; // = y / x // y * y + x * x = vitesse // (tangente * x) ^ 2 + x * x = vitesse // x = math.sqr (speed / (tangent * tangent + 1)); startx = startx + rate * math.sqrt (params.speed / (tangent * tangent + 1)); // empêche le transfrontalier if ((rate == 1 && startx> coordtarget.x) || (rate == -1 && startx <coordinatetarget.x)) {startx = coordinatetarget.x; } var x = startx, y = a * x * x + b * x; // Marquez la position actuelle, il y a des soupçons d'utilisation des tests ici. En usage réel, vous pouvez commenter cette ligne élément.setAttribute ("Data-Center", [Math.round (x), Math.round (y)]. JOIN ()); // x, y est actuellement les coordonnées et doit être converti en valeur pixel positionnée if (mobystyle == "margin") {element.style.marginleft = x + "px"; element.style.margintop = y + "px"; } else {element.style [movyyle] = "tradlate (" + [x + "px", y + "px"]. join () + ")"; } if (startx! == coordinateTarget.x) {params.progress (x, y); window.requestanimationframe (étape); } else {// Le mouvement est terminé, le rappel exécute params.complete (); FlagMove = true; }}; window.requestanimationframe (étape); flagMove = false; retourner ceci; }; // la méthode d'initialisation export.init = function () {this.position (). Mark (). Move (); }; } Return les exportations;}; / *! requestanimationframe.js * par zhangxinxu 2013-09-30 * / (function () {var dernier = 0; var vendeurs = ['webkit', 'moz']; for (var x = 0; x <vendeurs.length &&! window.requestanimationframe; ++ x) 'Requestanimationframe']; Date (). GetTime (); function (id) {cleartimeout (id);};}} ());utiliser:
/ * élément * / var élément = document.getElementById ("élément"), cible = document.getElementyId ("Target"); // La marque de position de l'élément Parabola var parabola = funparabola (élément, cible) .mark (); // le déclencheur de Parabola Motion Document.body.onClick = function () {élément.style.Marginleft = "0px"; element.style.margintop = "0px"; parabola.init ();};Ajouter au panier de combat réel:
/ * Ce script de démonstration est basé sur iebetter.js, adresse du projet: https://github.com/zhangxinxu/iebetter.js * /// elements et quelques autres variables var eleflyelement = document.QuerySelector ("# flyitem"), eleshopcart = document.queryselect var myParabola = funparabola (eleflyelement, eleshopcart, {Speed: 400, courbure: 0.002, complet: function () {eleflyelement.style.visibilité = "Hidden"; eleshopcart.Queryselect eleshopcart) {[] .slice.call (document.getElementsByClassName ("btncart")). foreach (function (bouton) {Button.addeventListener ("clique Documentation DocumentElement.Scrolltop || MyParabola.Position (). Move ();}); });}Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.