Clips front-end JS animation Parabola added to the shopping cart

Parabola added special effects animation for shopping cart (support IE7 above, mobile side performance is good)
1. Refer to a minimal jquery plugin library
2. Start the set start point and after completion callback function


1. Plugin address Git-hub on the official homepage https://github.com/amibug/fly

Introduce specific files:

(function () {varLasttime =0; varVendors = ['WebKit','Moz'];  for(varx =0; x < vendors.length &&!window.requestanimationframe; ++x) {window.requestanimationframe= Window[vendors[x] +'Requestanimationframe']; Window.cancelanimationframe=Window[vendors[x]+'Cancelanimationframe'] || WINDOW[VENDORS[X] +'Cancelrequestanimationframe']; }  if(!window.requestanimationframe) {Window.requestanimationframe=function (callback, Element) {varCurrtime =NewDate (). GetTime (); varTimetocall = Math.max (0, --(Currtime-lasttime)); varID =window.settimeout (function () {Callback (Currtime+Timetocall);      }, Timetocall); Lasttime= Currtime +Timetocall; returnID;  }; }  if(!window.cancelanimationframe) {Window.cancelanimationframe=function (ID) {cleartimeout (ID);  }; }}());/*! fly-v1.0.0-2014-12-22*Https://github.com/amibug/fly* Copyright (c) Wuyuedong; Licensed MIT*/!function (a) {a.fly=function (b,c) {varD={version:"1.0.0", autoplay:!0, Vertex_rtop: -, Speed:1.2, start:{},end:{},onend:a.noop},e= This, F=a (b); E.init=function (a) { This. SetOptions (a),!! This.settings.autoplay&& This. Play ()},e.setoptions=function (b) { This. settings=a.extend (!0, {},d,b);varC= This. SETTINGS,E=C.START,G=C.END;F.CSS ({margintop:"0px", MarginLeft:"0px", Position:"fixed"}). AppendTo ("Body"),NULL!=g.width&&NULL!=g.height&&a.extend (!0, E,{width:f.width (), Height:f.height ()});varH=math.min (e.top,g.top)-math.abs (e.left-g.left)/3;h<c.vertex_rtop&& (H=math.min (C.vertex_rtop,math.min (e.top,g.top)));varI=math.sqrt (Math.pow (E.top-g.top,2) +math.pow (E.left-g.left,2)), J=math.ceil (Math.min (Math.max (Math.log (i)/. to- the, -), -)/c.speed), k=e.top==h?0:-math.sqrt ((g.top-h)/(E.top-h)), l= (K*e.left-g.left)/(K-1), M=g.left==l?0:(g.top-h)/math.pow (G.left-l,2); A.extend (!0, c,{count:-1, steps:j,vertex_left:l,vertex_top:h,curvature:m})},e.play=function () { This. Move ()},e.move=function () {varb= This. settings,c=b.start,d=b.count,e=b.steps,g=b.end,h=c.left+ (G.left-c.left) *d/e,i=0==b.curvature?c.top+ (g.top-c.top) *d/e:b.curvature*math.pow (H-b.vertex_left,2) +b.vertex_top;if(NULL!=g.width&&NULL!=g.height) {varj=e/2, k=g.width-(g.width-c.width) *math.cos (j>d?0:(d-j)/(E-J) *math.pi/2), l=g.height-(g.height-c.height) *math.cos (j>d?0:(d-j)/(E-J) *math.pi/2); F.css ({width:k+"px", height:l+"px","font-size": Math.min (k,l) +"px"})}f.css ({left:h+"px", top:i+"px"}), b.count++;varM=window.requestanimationframe (A.proxy ( This. Move, This));d ==e&& (Window.cancelanimationframe (M), b.onend.apply ( This))},e.destory=function () {f.remove ()},e.init (c)},a.fn.fly=function (b) {return  This. each (function () {void 0==a ( This). Data ("Fly") &&a ( This). Data ("Fly",NewA.fly ( This(b))})}} (JQuery);

Lib.js

2. Start the animation

1 . flyer{2 position:fixed;3z-index:999;4 width:20px;5 height:20px; 6           }7 //set Z-index to let elements appear in front of the top to avoid being overwritten8 9 //end point (floating bottom bar) so get endedy for current screen heightTen varendedy=$ (window). Height (); One varEndedx = $ (' #end '). offset (); A  - varFlyer = $ ('  '); - //or flyer=$ (' #fly '); Select the element you want to fly the  -$ (body). On (' click ', '. Plus_circle '),function(e) { - Flyer.fly ({ - start: { +Left:e.clientx-15, -Top:e.clienty-15 +                 }, A End: { at Left:offset.left, -Top:endedy-30, -Width:20, -Height:20 -                  }, -OnEnd:function(){ in                            This. Destory (); -                           //destroy the instance after completion, remove the DOM, do not destroy the flyer will remain at its end to                   } +    }); -  the});

Direct Demo: Http://codepen.io/hzxs1990225/full/ogLaVp

Note

1. For the location of the event:

1 function (event) {2        event.pagex;event.pagey; 3 4         Event.screenx;event.screeny; 5 6         Event.clientx;event.clienty; 7  }

ScreenX: The horizontal offset of the mouse position relative to the user screen is counted in the browser navigation bar

ClientX: The reference point is the upper-left corner of the browser content area, and the reference point moves with the scroll bar moving

PageX: (Does not support ie78,9 above OK) The reference point is also the upper-left corner of the browser content area, but it does not change with the scrollbar (as the word page is always the location of the corresponding page)

So the page content is too long than the page height, when the scroll bar appears, get the starting point relative to the screen coordinates using CLIENTX

The principle is:
var doc = Document.documentelement,body=document.body;
PageX = ClientX + Math.max (doc.scrollleft,body.scrollleft);
Pagey = ClientY + Math.max (doc.scrolltop,body.scrolltop);

Incidentally, there are offsetx and layerx that are not commonly used.
Offsetx:ie is unique, the mouse is compared to the position of the element that triggers the event, the upper-left corner of the content area of the element box model is the reference point, and if there is boder, a negative value may occur. IE starts with the content area and the mouse enters the border with a negative value.

LAYERX:FF is unique, the mouse compared to the position of the current coordinate system, that is, if the triggering element does not set absolute positioning or relative positioning, to the page as a reference point, if any, will change the reference coordinate system, from the trigger element box model border area of the upper left corner of the reference point

The specific browser support is compared to
offsetx/offsety:w3c-ie+ firefox-opera+ safari+ chrome+
X/y: w3c-ie+ firefox-opera+ safari+ chrome+
layerx/layery:w3c-ie-firefox+ opera-safari+ chrome+
pagex/pagey:w3c-ie-firefox+ opera+ safari+ chrome+
clientx/clienty:w3c+ ie+ firefox+ opera+ safari+ chrome+
screenx/screeny:w3c+ ie+ firefox+ opera+ safari+ chrome+

2. Positioning of elements

Gets the height of the viewable area of the current window (the height of the current phone screen) $ (window). Height ()

$ (document). Height ()); The height of the browser's current window document
$ (document.body). Height ();//browser Current window document body
$ (document.body). Outerheight (true);//The total height of the document body of the browser's current window includes border padding margin
Empathy width Swap

var end = $ (' #end '). Offset (); End.left; End.top;
element relative to the position on the page (reference and event-triggered Pagex reference)
So here are some questions to consider: If the element is fixed (for example, the top bar and the bottom bar, once the scroll bar appears on the page)
End.top will increase as you scroll, relative to the upper-left corner of the screen is End.top-scrolltop
Or not based on the element positioning and according to the current visible area of the height of their own to the current fixed element on the screen position, do always follow

By the way, some parameters of the native DOM object
Web page Visible area width: document.body.clientWidth
Web page Visible Area height: document.body.clientHeight
Web page Visible Area width: document.body.offsetWidth (including edge width)
Web page Visible Area High: document.body.offsetHeight (including edge height)
Page body Full text width: document.body.scrollWidth
Page body Full text High: Document.body.scrollHeight
Page is rolled away High: document.body.scrollTop
Webpage is rolled away left: document.body.scrollLeft
Page body part: Window.screentop
Page body part left: Window.screenleft
High screen resolution: Window.screen.height
Width of screen resolution: Window.screen.width
Screen available work area height: window.screen.availHeight
Screen available work area width: window.screen.availWidth

Clips front-end JS animation Parabola added to the shopping cart