This article shares the animation code for js to implement parabola of product added to shopping cart for your reference. The specific content is as follows
parapola.js
/*! * by zhangxinxu(.com) 2012-12-27 * you can visit http://www.zhangxinxu.com/wordpress/?p=3855 to get more information * under MIT license*/var funParabola = function(element, target, options) { /* * Web pages need a scale bar* If it is calculated based on 1 pixel, it is obviously inappropriate, because the page always moves a few hundred pixels* On the page, we place two objects, between 200~800 pixels, we can map to 2 meters to 8 meters in the real world, which is 100:1 * However, this method does not reflect this, so there is no need to pay attention to */ var defaults = { speed: 166.67, // The pixel size of each frame moves, each frame (for most displays) is about 16~17 milliseconds curvature: 0.001, // It actually refers to the distance from the focus to the line. You can abstract it into curvature. This simulates the parabola of throwing an object, so it is the opening downward progress: function() {}, complete: function() {} }; var params = {}; options = options || {}; for (var key in defaults) { params[key] = options[key] || defaults[key]; } var exports = { mark: function() { return this; }, position: function() { return this; }, move: function() { return this; }, init: function() { return this; } }; /* Determine the way to move* IE6-IE8 is margin displacement* IE9+Use transform */ var moveStyle = "margin", testDiv = document.createElement("div"); if ("oninput" in testDiv) { ["", "ms", "webkit"].forEach(function(prefix) { var transform = prefix + (prefix? "T": "t") + "ransform"; if (transform in testDiv.style) { moveStyle = transform; } }); } // Determine the motion curve function based on the coordinates of two points and curvature (that is, determine the values of a and b) /* Formula: y = a*x*x + b*x + c; */ var a = params.curvature, b = 0, c = 0; // The flag value of whether to perform motion var flagMove = true; if (element && target && element.nodeType == 1 && target.nodeType == 1) { var rectElement = {}, rectTarget = {}; // move the center point position of the element, the center point position of the target element var centerElement = {}, centerTarget = {}; // The coordinate position of the target element var coordinateElement = {}, coordinateTarget = {}; // Mark the coordinates of the current element exports.mark = function() { if (flagMove == false) return this; if (typeof coordinateElement.x == "undefined") this.position(); element.setAttribute("data-center", [coordElement.x, coordinateElement.y].join()); target.setAttribute("data-center", [coordTarget.x, coordTarget.y].join()); return this; } exports.position = function() { if (flagMove == false) return this; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft, scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // Initial position if (moveStyle == "margin") { element.style.marginLeft = element.style.marginTop = "0px"; } else { element.style[moveStyle] = "translate(0, 0)"; } // Coordinates of the four edges rectElement = element.getBoundingClientRect(); rectTarget = target.getBoundingClientRect(); // Coordinates of the center point of the moving element centerElement = { x: rectElement.left + (rectElement.right - rectElement.left) / 2 + scrollLeft, y: rectElement.top + (rectElement.bottom - rectElement.top) / 2 + scrollTop }; // The center point position of the target element centerTarget = { x: rectTarget.left + (rectTarget.right - rectTarget.left) / 2 + scrollLeft, y: rectTarget.top + (rectTarget.bottom - rectTarget.top) / 2 + scrollTop }; // Convert to relative coordinate position coordElement = { x: 0, y: 0 }; coordinateTarget = { x: -1 * (centerElement.x - centerTarget.x), y: -1 * (centerElement.y - centerTarget.y) }; /* * Because after (0, 0), so c = 0 * So: * y = a * x*x + b*xx; * y1 = a * x1*x1 + b*x1; * y2 = a * x2*x2 + b*x2; * Use the second coordinate: * b = (y2+ a*x2*x2) / x2 */ // So b = (coordTarget.y - a * coordinateTarget.x * coordTarget.x) / coordTarget.x; return this; }; // Move according to this curve exports.move = function() { // If the curve motion has not ended, a new motion will no longer be executed if (flagMove == false) return this; 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 = speed // (tangent * x)^2 + x*x = speed // x = Math.sqr(speed / (tangent * tangent + 1)); startx = startx + rate * Math.sqrt(params.speed / (tangent * tangent + 1)); // Prevent cross-border if ((rate == 1 && startx > coordTarget.x) || (rate == -1 && startx < coordinateTarget.x)) { startx = coordinateTarget.x; } var x = startx, y = a * x * x + b * x; // Mark the current position, there is suspicion of testing use here. In actual use, you can comment this line element.setAttribute("data-center", [Math.round(x), Math.round(y)].join()); // x, y is currently the coordinates and needs to be converted into the positioned pixel value if (movestyle == "margin") { element.style.marginLeft = x + "px"; element.style.marginTop = y + "px"; } else { element.style[moveStyle] = "translate("+ [x + "px", y + "px"].join() +")"; } if (startx !== coordinateTarget.x) { params.progress(x, y); window.requestAnimationFrame(step); } else { // The motion is over, the callback executes params.complete(); flagMove = true; } }; window.requestAnimationFrame(step); flagMove = false; return this; }; // The initialization method exports.init = function() { this.position().mark().move(); }; } return exports;};/*! requestAnimationFrame.js * by zhangxinxu 2013-09-30*/(function() { var lastTime = 0; var vendors = ['webkit', 'moz']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || // name has changed in Webkit window[vendors[x] + 'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16.7 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function(id) { clearTimeout(id); }; }}());use:
/* 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();};Add to the shopping cart actual combat:
/* This demo script is based on ieBetter.js, project address: https://github.com/zhangxinxu/ieBetter.js */// Elements and some other variables var eleFlyElement = document.querySelector("#flyItem"), eleShopCart = document.querySelector("#shopCart");var numberItem = 0;// Parabola var myParabola = funParabola(eleFlyElement, eleShopCart, { speed: 400, curvature: 0.002, complete: function() { eleFlyElement.style.visibility = "hidden"; eleShopCart.querySelector("span").innerHTML = ++numberItem; }});// Bind click event if (eleFlyElement && eleShopCart) { [].slice.call(document.getElementsByClassName("btnCart")).forEach(function(button) { button.addEventListener("click", function() { // Scroll size var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || 0, scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0; eleFlyElement.style.left = event.clientX + scrollLeft + "px"; eleFlyElement.style.top = event.clientY + scrollTop + "px"; eleFlyElement.style.visibility = "visible"; // Relocation needs to be relocated by myParabola.position().move(); }); }); });}The above is all about this article, I hope it will be helpful to everyone's learning.