Js to add product parabolic shopping cart Effects

This article mainly introduces in detail relevant information about how to add special effects to shopping cart by using products in Javascript, which has some reference value, interested friends can refer to the examples in this article to share with you the js implementation product parabolic add shopping cart animation code 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 infomation * under MIT license */var funParabola = function (element, target, options) {/** a scale is required for web page simulation. * If one pixel is 1 meter, it is obviously not suitable because the page is several hundred pixels. * on the page, we place two objects, 200 ~ We can map between 800 pixels to 2 to 8 m in the real world, that is,: 1 *. However, this method does not reflect this, therefore, you do not need to care about */var defaults = {speed: 166.67, // The pixel size of each frame moving. Each frame (for most display screens) is about 16 ~ 17 Ms curvature: 0.001, // actually refers to the distance from the focus to the quasi-line, you can abstract it into the curvature, Here simulate the parabolic of throwing an object, so it is the open-down 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 * The IE6-IE8 is margin shift * IE9 + using transform */var moveStyle = "margin", testDiv = document. createElement ("p"); if ("oninput" in testDiv) {["", "ms", "webkit"]. forEach (function (prefix) {var transform = prefix + (prefix? "T": "t") + "ransform"; if (transform in testDiv. style) {moveStyle = transform ;}}) ;}// determines the motion curve function based on the two-point coordinate and curvature (that is, determines the value of a and B)/* formula: y = a * x + B * x + c; */var a = params. curvature, B = 0, c = 0; // indicates whether to execute motion. var flagMove = true; if (element & target & element. nodeType = 1 & target. nodeType = 1) {var rectElement ={}, rectTarget ={}; // move the central point of the element, and var centerElement ={}, centerTa Rget ={}; // Coordinate Position of the target element var coordElement ={}, coordTarget ={}; // mark the coordinate exports of the current element. mark = function () {if (flagMove = false) return this; if (typeof coordElement. x = "undefined") this. position (); element. setAttribute ("data-center", [coordElement. x, coordElement. y]. join (); target. setAttribute ("data-center", [coordTarget. x, coordTarget. y]. join (); return this;} exports. position = function (){ If (flagMove = false) return this; var scrollLeft = document.doc umentElement. scrollLeft | document. body. scrollLeft, scrollTop = document.doc umentElement. 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. getBoundingClientRec T (); rectTarget = target. getBoundingClientRect (); // move the center coordinate of the element centerElement = {x: rectElement. left + (rectElement. right-rectElement. left)/2 + scrollLeft, y: rectElement. top + (rectElement. bottom-rectElement. top)/2 + scrollTop}; // the central point of the target element. centerTarget = {x: rectTarget. left + (rectTarget. right-rectTarget. left)/2 + scrollLeft, y: rectTarget. top + (rectTarget. bottom-rectTarget. t Op)/2 + scrollTop}; // convert to the Relative Coordinate Position coordElement = {x: 0, y: 0}; coordTarget = {x:-1 * (centerElement. x-centerTarget. x), y:-1 * (centerElement. y-centerTarget. y)};/** because the pass (0, 0), c = 0 *, so: * y = a * x + B * x; * y1 = a * x1 * x1 + B * x1; * y2 = a * x2 * x2 + B * x2; * use the Second coordinate: * B = (y2 + a * x2 * x2)/x2 * // then B = (coordTarget. y-a * coordTarget. x * coordTarget. x)/coordTarget. x; return This ;}; // follow this curve to move exports. move = function () {// if the curve motion is not over, no longer execute the new motion 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); // prevents if (rate = 1 & startx> coordTarget. x) | (rate =-1 & startx <coordTarget. x) {startx = coordTarget. x;} var x = Startx, y = a * x + B * x; // mark the current position. The test is suspected. You can annotate the element line in actual use. setAttribute ("data-center", [Math. round (x), Math. round (y)]. join (); // x, y is currently the coordinate, which needs to be converted to the positioning 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! = CoordTarget. x) {params. progress (x, y); window. requestAnimationFrame (step);} else {// The motion ends. 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] + 'requestanimationframework']; window. cancelAnimationFrame = window [vendors [x] + 'canonicalizationframework'] | // name has changed in Webkit window [vendors [x] + 'canonicalrequestanimationframework'];} 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 );};}}());

Usage:

/* Element */var element = document. getElementById ("element"), target = document. getElementById ("target"); // mark var parabola = funParabola (element, target) as the position of the parabolic element ). mark (); // trigger document of parabolic motion. body. onclick = function () {element. style. marginLeft = "0px"; element. style. marginTop = "0px"; parabola. init ();};

Add to shopping cart practice:

/* The demo script is based on ieBetter. js. Project address: https://github.com/zhangxinxu/ieBetter.js * /// Element and other variables var eleFlyElement = document. querySelector ("# flyItem"), eleShopCart = document. querySelector ("# shopCart"); var numberItem = 0; // parabolic motion var myParabola = funParabola (eleFlyElement, eleShopCart, {speed: 400, curvature: 0.002, complete: function () {eleFlyElement. style. visibility = "hidden"; eleShopCart. querySelector ("span "). innerHTML = ++ numberItem ;}}); // bind the click event if (eleFlyElement & eleShopCart) {[]. slice. call (document. getElementsByClassName ("btnCart ")). forEach (function (button) {button. addEventListener ("click", function () {// scroll size var scrollLeft = document.doc umentElement. scrollLeft | document. body. scrollLeft | 0, scrollTop = document.doc umentElement. scrollTop | document. body. scrollTop | 0; eleFlyElement. style. left = event. clientX + scrollLeft + "px"; eleFlyElement. style. top = event. clientY + scrollTop + "px"; eleFlyElement. style. visibility = "visible"; // you need to relocate myParabola. position (). move ();});});}

The above is all the content of this article, hoping to help you learn.

For more articles about how to add special effects to shopping cart by using JavaScript code, refer to PHP!