Js to add product parabolic shopping cart Effects

Source: Internet
Author: User
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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.