JS realizes the product parabola to add special effect _javascript skill to the shopping cart

The example of this article for everyone to share the realization of JS product parabola to join the shopping Cart animation code for your reference, the specific contents are as follows

Parapola.js

/*! * by Zhangxinxu (. com) 2012-12-27 * Your can visit http://www.zhangxinxu.com/wordpress/?p=3855 to get more infomation * UN Der MIT license/var Funparabola = function (element, target, options) {* * * Web Simulation reality needs a scale * if it's 1 meters in 1 pixels, it's obviously inappropriate. , because the page is on hundreds of pixel * page, we put two objects, 200~800 pixels, we can map to the real world of 2 meters to 8 meters, that is, 100:1 * However, this method does not reflect this, so do not care about the * * var defaults = 
    {speed:166.67,//per frame moving pixel size, per frame (for most displays) approximately 16~17 milliseconds curvature:0.001,//actual point to the distance of the alignment, you can abstract into the curvature, here simulate throw object parabola, so it is open 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:functio
  N () {return this;}, Init:function ()}
  
  }; /* Determine the way to move * IE6-IE8 is margin displacement * ie9+ using 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;    
  }
    });
  ///According to two point coordinates and curvature to determine the motion curve function (that is, to determine the value of a, b)/* formula: y = a*x*x + b*x + C;
  
  * * var a = params.curvature, B = 0, c = 0;
  
  Whether to execute the flag of movement var flagmove = true; if (element && target && element.nodetype = 1 && target.nodetype = 1) {var rectelement = {}
    
    , recttarget = {};
    
    The center point position of the moving element, the center point position of the target element var centerelement = {}, centertarget = {};
    
    The coordinate position of the target element var coordelement = {}, coordtarget = {};
      The Coordinate Exports.mark = function () {if (Flagmove = false) of the current element is annotated 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 to this; var scrollleft = Document.documentElement.scrollLeft | | Document.body.scrollLeft, scrolltop = Document.documentElement.scrollTop | |
      
      Document.body.scrollTop;
      The initial position if (Movestyle = = "Margin") {element.style.marginLeft = Element.style.marginTop = "0px";
      else {Element.style[movestyle] = "Translate (0, 0)";
      }//Four the coordinates of the edge rectelement = Element.getboundingclientrect ();
      
      Recttarget = Target.getboundingclientrect (); The center point coordinate of the moving element centerelement = {X:rectelement.left + (Rectelement.right-rectelement.left)/2 + Scrolllef
      
      T, 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};  
      Coordtarget = {x:-1 * (centerelement.x-centertarget.x), Y:-1 * (CENTERELEMENT.Y-CENTERTARGET.Y)
      
      };
       * * * Because of the pass (0, 0), so C = 0 * Thereupon: * y = A * x*x + b*x;
       * Y1 = A * x1*x1 + b*x1;
       * y2 = a * x2*x2 + b*x2; * Using the second coordinate: * b = (y2+ a*x2*x2)/x2//So 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 finished, do not 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)); Prevent cross-boundary if (rate = 1 && startx > coordtarget.x) | | (Rate = = 1 && startx < coordtarget.x))
        {startx = Coordtarget.x;
        
        var x = startx, y = a * x * x + b * x;
        
        Mark the current position, where there is a suspicion of the use of the test, the actual use can be this line of comments Element.setattribute ("Data-center", [Math.Round (x), Math.Round (y)].join ()); 
          X, y is currently the coordinate, need to convert to the pixel value of the position 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 {//end of motion, callback execution       Params.complete ();  
        Flagmove = true;
      }
      };
      Window.requestanimationframe (step);
      
      Flagmove = false;
    return this;
    
    };
    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 = W
    Indow[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 CURRT
      IME = 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 of the parabola element is labeled
var parabola = Funparabola (element, target). Mark ();
The trigger
Document.body.onclick = function () {
  element.style.marginLeft = "0px" of the parabola motion;
  Element.style.marginTop = "0px";
  Parabola.init ();
};

Add to Cart Combat:

/* This demo demo script is based on Iebetter.js, project address: Https://github.com/zhangxinxu/ieBetter.js *//element and some other variables var eleflyelement = document
. Queryselector ("#flyItem"), Eleshopcart = Document.queryselector ("#shopCart");
var numberitem = 0; Parabola movement var Myparabola = Funparabola (Eleflyelement, Eleshopcart, {speed:400, curvature:0.002, Complete:functi
    On () {eleFlyElement.style.visibility = "hidden";
  Eleshopcart.queryselector ("span"). InnerHTML = ++numberitem;
}
}); Bind fixed-point hit event if (eleflyelement && eleshopcart) {[].slice.call (Document.getelementsbyclassname ("Btncart")). ForEach (function (button) {Button.addeventlistener ("click", Function () {//scrolling 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"; 
    You need to reposition myparabola.position (). Move ();
  });
});

 }

The above is the entire content of this article, I hope to help you learn.