Este artigo compartilha o código de animação para o JS implementar a parábola do produto adicionada ao carrinho de compras para sua referência. O conteúdo específico é o seguinte
parapola.js
/*! * por zhangxinxu (.com) 2012-12-27 * Você pode visitar http://www.zhangxinxu.com/wordpress/?p=3855 para obter mais informações * em MIT License */var FunParabola = Função (elemento, alvo) {/ * * * Páginas precisam de uma barra * se é calculada por uma barra de uma escala * se é que é calculada, que é uma barra de funparabola. Algumas centenas de pixels * na página, colocamos dois objetos, entre 200 ~ 800 pixels, podemos mapear de 2 a 8 metros no mundo real, que é 100: 1 *, no entanto, esse método não reflete isso, portanto, não há necessidade de prestar atenção a */ var padrão = {Speed: 166.67, // O tamanho de pixel de pixel 0,001, // Na verdade, refere -se à distância do foco à linha. Você pode abstraí -lo em curvatura. Isso simula a parábola de jogar um objeto, por isso é o progresso descendente de abertura: function () {}, complete: function () {}}; var params = {}; Opções = Opções || {}; para (chave da var nos padrões) {params [key] = options [key] || padrão [chave]; } var exports = {mark: function () {return this; }, posição: function () {return this; }, mover: function () {return this; }, init: function () {return this; }}; /* Determine a maneira de se mover* IE6-IE8 é deslocamento da margem* ie9+use transform*/ var movestyle = "margem", testDiv = document.createElement ("div"); if ("onInput" no testDiv) {["", "ms", "webkit"]. foreach (function (prefixo) {var transform = prefixo + (prefixo? "t": "t") + "ransform"; if (transformado no testdiv.style) {movesthle = transform =}}); } // Determine a função da curva de movimento com base nas coordenadas de dois pontos e curvatura (ou seja, determine os valores de A e B) /*Fórmula: y = a*x*x + b*x + c; */ var a = params.curvature, b = 0, c = 0; // o valor do sinalizador de executar o movimento var flagMove = true; if (element && Target && element.nodEType == 1 && Target.nodetype == 1) {var retreLement = {}, retTarget = {}; // mova a posição do ponto central do elemento, a posição do ponto central do elemento de destino var centralElement = {}, centrtarget = {}; // A posição de coordenada do elemento de destino var coordinateElement = {}, coordinateTarget = {}; // marque as coordenadas do elemento atual exports.mark = function () {if (flagMove == false) retornar isso; if (typeof coordinateElement.x == "indefinido") this.position (); element.SetAttribute ("Data-Center", [coordElement.x, coordenateElement.y] .Join ()); Target.setAttribute ("Data-Center", [coordtarget.x, coordtarget.y] .Join ()); devolver isso; } exports.position = function () {if (flagMove == false) return This; var scrollLeft = document.documentElement.scrollleft || document.body.scrollleft, scrolltop = document.documentElement.scrolltop || document.body.scrolltop; // posição inicial if (moveStyle == "margem") {element.style.marginleft = element.style.margintop = "0px"; } else {element.style [moveStyle] = "tradução (0, 0)"; } // coordenadas das quatro arestas retrement = element.getBoundingClientRect (); retTarget = Target.getBoundingClientRect (); // coordenadas do ponto central do elemento móvel centralElement = {x: rectElement.left + (rectElement.right - retElement.left) / 2 + rollleft, y: rectElement.top + (rectElement.bottom - rectElement.top) / 2 + scrollontop}; // A posição do ponto central do elemento de destino Centettarget = {x: retTarget.left + (retTarget.right - retTarget.left) / 2 + rollleft, y: retTarget.top + (retTarget.bottom - retTarget.top) / 2 + rolloTop}; // converter para coordenação de coordenadas relativas coordenamento = {x: 0, y: 0}; coordinateTarget = {x: -1 * (CenterElement.x - Centetarget.x), y: -1 * (CenterElement.y - Centettarget.y)}; / * * Porque depois (0, 0), então c = 0 * então: * y = a * x * x + b * xx; * y1 = a* x1* x1 + b* x1; * y2 = a* x2* x2 + b* x2; * Use a segunda coordenada: * b = (y2+ a * x2 * x2) / x2 * / / / então b = (coordtarget.y - a * coordinateTarget.x * coordtarget.x) / coordtarget.x; devolver isso; }; // mova -se de acordo com esta curva exports.move = function () {// Se o movimento da curva não tiver terminado, um novo movimento não será mais executado se (flagmove == false) retornar isso; var startx = 0, taxa = coordtarget.x> 0? 1: -1; var step = function () {// tangente y '= 2ax + b var tangente = 2 * a * startx + b; // = y / x // y*y + x*x = velocidade // (tangente*x)^2 + x*x = velocidade // x = math.sqr (velocidade / (tangente*tangente + 1)); startx = startx + taxa * math.sqrt (params.speed / (tangente * tangente + 1)); // Prevenção de border cruzada if ((rate == 1 && startx> coordtarget.x) || (rate == -1 && startx <coordinateTarget.x)) {startx = coordinateTarget.x; } var x = startx, y = a * x * x + b * x; // Marque a posição atual, há suspeita de uso aqui. No uso real, você pode comentar este elemento de linha.SetAttribute ("Data-Center", [Math.Round (x), Math.Round (y)]. Junção ()); // x, y atualmente são as coordenadas e precisam ser convertidas no valor de pixel posicionado se (movestyle == "margem") {element.style.marginleft = x + "px"; element.style.margintop = y + "px"; } else {element.style [moveStyle] = "translate (" + [x + "px", y + "px"]. junção () + ")"; } if (startx! == coordinateTarget.x) {params.progress (x, y); window.requestanimationframe (etapa); } else {// O movimento acabou, o retorno de chamada executa params.complete (); flagMove = true; }}; window.requestanimationframe (etapa); flagmove = false; devolver isso; }; // O método de inicialização exports.init = function () {this.Position (). Mark (). Move (); }; } retornar exportações;};/*! requestanimationframe.js * por zhangxinxu 2013-09-30 */(function () {var linTime = 0; var fornecedores = ['webkit', 'moz']; para (var x = 0; x <window.rent.length &&! window.requestanimationFrame; +x) {wakning.rent.rent.rent.rent.rent.rent.rent.rent.lenimatinganfReAnMationAnmationAnmation/wakning (wakningnerating]; 'Requestanimationframe']; Data (). GetTime (); function (id) {clearTimeout (id);usar:
/ * elemento */var elemento = document.getElementById ("elemento"), Target = document.getElementById ("Target"); // a marca de posição do elemento parabola var parabola = funparabola (elemento, alvo) .Mark (); // o gatilho do parabola document.GodoBody.OnClick = function). element.style.margintop = "0px"; parabola.init ();};Adicione ao carrinho de compras Combate real:
/ * Este script de demonstração é baseado no iebetter.js, endereço do projeto: https://github.com/zhangxinxu/iebetter.js * //////tigys e algumas outras variáveis var eleflelement = documerset.QuerySelector ("#FlyItem"), ELESHOPCART = Document.QuerySector (" MyParabola = FunParabola (Eleflelement, ELESHOPCART, {Speed: 400, Curvature: 0.002, Complete: function () {eleflelement.style.visibility = "Hidden"; ELESHOPCART.QuerySelector ("span). ELESHOPCART) {[] .slice.call (document.getElementsByclassName ("btncart")). foreach (function (button) {button.addeventListener ("clique", funclrollFOr! Document.DocumentEless.Scrolltop ||. myParabola.Position (). Move (); });}O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.