Este artículo comparte el código de animación para JS para implementar la parábola del producto agregado al carrito de compras para su referencia. El contenido específico es el siguiente
parapola.js
/*! * Por zhangxinxu (.com) 2012-12-27 * Puede visitar http://www.zhangxinxu.com/wordpress/?p=3855 para obtener más información * bajo la licencia de MIT */var funparabola = function (elemento, target, opciones) {/ * * Las páginas web necesitan una barra de escala * si se calcula en base a 1 pixel, es obvio que es obviamente obviamente obviamente. mueve unos pocos cientos de píxeles * En la página, colocamos dos objetos, entre 200 ~ 800 píxeles, podemos asignar a 2 metros a 8 metros en el mundo real, que es 100: 1 * Sin embargo, este método no refleja esto, no es necesario prestar atención a */ var predeterminados = {velocidad: 166.67, // El tamaño de los mezclas de cada cuadro, cada cuadro (para la mayoría de Curvatura: 0.001, // En realidad se refiere a la distancia desde el enfoque hasta la línea. Puede abstraerlo a la curvatura. Esto simula la parábola de tirar un objeto, por lo que es la apertura de progreso hacia abajo: function () {}, completa: function () {}}; var params = {}; Opciones = Opciones || {}; for (clave var en defaults) {params [clave] = opciones [clave] || valores predeterminados [clave]; } var exports = {mark: function () {return esto; }, posición: function () {return esto; }, mover: function () {return esto; }, init: function () {return esto; }}; /* Determine la forma de mover* IE6-ie8 es el desplazamiento de margen* ie9+use transform*/ var moveStyle = "margen", testDiv = document.createElement ("div"); if ("onInput" en testDiv) {["", "ms", "webkit"]. foreach (function (prefix) {var transform = prefix + (prefix? "t": "t") + "ransform"; if (transformación en testdiv.style) {movestyle = transform;}}); } // Determine la función de la curva de movimiento basada en las coordenadas de dos puntos y la curvatura (es decir, determine los valores de a y b) /*fórmula: y = a*x*x + b*x + c; */ var a = params.curvature, b = 0, c = 0; // El valor del indicador de si realizar el movimiento var flagMove = true; if (elemento && target && element.nodeType == 1 && target.nodeType == 1) {var rectelement = {}, rectTarget = {}; // Mueve la posición del punto central del elemento, la posición del punto central del elemento de destino var CenterElement = {}, centerTarget = {}; // La posición de coordenada del elemento de destino var coordenateElement = {}, coordInAtetArget = {}; // Marque las coordenadas del elemento actual exports.mark = function () {if (flagMove == false) devuelve esto; if (typeOf coordineateElement.x == "Undefinado") this.Position (); element.setAttribute ("Data-Center", [CoordElement.x, CoordineElement.y] .Join ()); Target.SetAttribute ("Data-Center", [coordTarget.x, coordTarget.y] .Join ()); devolver esto; } exports.position = function () {if (flagMove == false) devuelve esto; var scrollleft = document.documentelement.scrollleft || document.body.scrollleft, scrolltop = document.documentelement.scrolltop || document.body.scrolltop; // Posición inicial if (Movestyle == "Margin") {element.style.marginleft = element.style.margintop = "0px"; } else {element.style [Movestyle] = "traducir (0, 0)"; } // coordenadas de los cuatro bordes rectelement = element.getBoundingClientRect (); rectTarget = target.getBoundingClientRect (); // coordenadas del punto central del elemento móvil CenterElement = {x: rectelement.left + (rectelement.right - rectelement.left) / 2 + scrollleft, y: rectelement.top + (rectelement.bottom - rectelement.top) / 2 + scrolltop}; // La posición del punto central del elemento de destino centerTarget = {x: rectTarget.left + (rectTarget.right - rectTarget.left) / 2 + scrollleft, y: rectTarget.top + (recttarget.bottom - rectTarget.top) / 2 + scrolltop}; // Convertir en coordenación de posición de coordenada relativa = {x: 0, y: 0}; CoordInAtetArget = {x: -1 * (CenterElement.x - CenterTarget.x), y: -1 * (CenterElement.y - CenterTarget.y)}; / * * Porque después (0, 0), entonces c = 0 * SO: * y = A * x * x + b * xx; * y1 = a* x1* x1 + b* x1; * y2 = a* x2* x2 + b* x2; * Use la segunda coordenada: * b = (y2+ a * x2 * x2) / x2 * / // entonces b = (coordTarget.y - a * coordinatetArget.x * coordTarget.x) / coordTarget.x; devolver esto; }; // Muévase de acuerdo con esta curva exports.move = function () {// Si el movimiento de la curva no ha finalizado, una nueva moción ya no se ejecutará si (flagMove == false) devuelve esto; var startx = 0, tasa = coordTarget.x> 0? 1: -1; var step = function () {// tangent y '= 2ax + b var tangent = 2 * a * startx + b; // = y / x // y*y + x*x = velocidad // (tangent*x)^2 + x*x = velocidad // x = math.sqr (velocidad / (tangent*tangent + 1)); startx = startx + tasa * math.sqrt (params.speed / (tangent * tangent + 1)); // Evite el border transversal if ((tasa == 1 && startx> coordTarget.x) || (tasa == -1 && startx <coordInateTarget.x)) {startx = coordInateTarget.x; } var x = startx, y = a * x * x + b * x; // Marca la posición actual, hay sospecha de uso de pruebas aquí. En uso real, puede comentar esta línea elemento // x, y es actualmente las coordenadas y deben convertirse en el valor de píxel posicionado if (Movestyle == "margin") {element.style.marginleft = x + "px"; element.style.margintop = y + "px"; } else {element.style [Movestyle] = "traduce (" + [x + "px", y + "px"]. Join () + ")"; } if (startx! == coordinatetArget.x) {params.progress (x, y); Window.RequestanimationFrame (paso); } else {// El movimiento ha terminado, la devolución de llamada ejecuta params.complete (); FlagMove = True; }}; Window.RequestanimationFrame (paso); flagMove = false; devolver esto; }; // El método de inicialización exports.init = function () {this.position (). Mark (). Move (); }; } exportaciones de retorno;};/*! requestAnimationFrame.js * por zhangxinxu 2013-09-30 */(function () {var lasttime = 0; var proves = ['webkit', 'moz']; for (var x = 0; x <vendors.length &&! window.requestanimationFrame; ++ x) {window.requestanimationframe = window = window = window 'RequestAnimationFrame']; Date (). GetTime (); función (id) {ClearTimeOut (id);usar:
/ * elemento */var elemento = document.getElementById ("elemento"), target = document.getElementById ("target"); // La marca de posición del elemento parabola var parabola = funparabola (elemento, target) .mark (); // El activador de la parabola movimiento.Body.OncLick = function () {element.style.marginleft = "0px" 0px "; element.style.margintop = "0px"; parabola.init ();};Agregue al carrito de compras Combate real:
/ * Este script de demostración se basa en iebetter.js, dirección del proyecto: https://github.com/zhangxinxu/iebetter.js * /// elementos y algunas otras variables var eleflyelement = document.Queryselector ("#flyitem"), eleshopCart = document.QuiteSelector ("#shopcart"); Var número = 0; var myparabola = funparabola (eleflyElement, eleshopCart, {speed: 400, curvature: 0.002, completa: function () {eleflyelement.style.visibility = "hidden"; eleshopcart.queryselector ("span"). innerhtml = ++ numberIm; ELESHOPCART) {[] .slice.call (document.getElementsByClassName ("btnCart")). foreach (function (botutet) {button.adDeventListener ("click", function () {// scroll scrollleft = document.DocumentEleement.scrollleft || document.body.scrollleft || 0, scrollleft = scrollleft = Document.DocumentElement.scrollTop || myParabola.Position (). Move (); });}Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.