이 기사는 JS가 참조를 위해 장바구니에 추가 된 제품의 포물선을 구현할 수있는 애니메이션 코드를 공유합니다. 특정 내용은 다음과 같습니다
parapola.js
/*! * ZhangxInxu (.com) 2012-12-27 * 당신은 mit 라이센스 */var funparabola = mit에서 더 많은 정보를 얻으려면 http://www.zhangxinxu.com/wordpress/?p=3855를 방문 할 수 있습니다 */var funparabola = function (요소, target, 옵션) {/ * * 웹 페이지는 1 픽셀을 기반으로 한 척도 바가 필요합니다. 페이지에 픽셀 *, 우리는 두 개의 물체를 배치합니다. 200 ~ 800 픽셀 사이에서 실제 세계에서 2 미터에서 8 미터에 매핑 할 수 있습니다. 그러나이 방법은 이것을 반영하지 않으므로 */ var 기본값 = {Speed : 166.67, // 각 프레임의 픽셀 크기 (16 ~ 17 MILLISERVING)에주의를 기울일 필요가 없습니다. 0.001, // 실제로 초점에서 선까지의 거리를 나타냅니다. 당신은 그것을 곡률로 추상화 할 수 있습니다. 이것은 객체를 던지는 포물선을 시뮬레이션하므로 하향 진행 상황입니다 : function () {}, complete : function () {}}; var params = {}; 옵션 = 옵션 || {}; for (기본값의 var 키) {params [key] = 옵션 [키] || 기본값 [키]; } var Exports = {mark : function () {return this; }, 위치 : function () {return this; }, move : function () {return this; }, init : function () {return this; }}; /* 이동 방법을 결정* IE6-IE8은 여백 변위* IE9+변환 사용*/ var movestyle = "margin", trectDiv = document.createElement ( "div"); if (treaddiv) {[ "", "ms", "webkit"]. foreach (function (prefix) {var transfer = prefix + (prefix? "t") + "ransform"; if (treaddiv.style) {movestyle = transform;}); } // 두 점과 곡률의 좌표에 따라 모션 곡선 함수를 결정합니다 (즉, a와 b의 값을 결정) /*공식 : y = a*x*x + b*x + c; */ var a = params.curvature, b = 0, c = 0; // 모션 var flagmove = true의 플래그 값; if (요소 && target && element.nodeType == 1 && target.nodeType == 1) {var rectlement = {}, recttarget = {}; // 요소의 중심점 위치, 대상 요소의 중심점 위치를 이동 var var centerlement = {}, centertArget = {}; // 대상 요소의 좌표 위치 var coordinateElement = {}, coordinateTarget = {}; // 현재 요소의 좌표를 표시하십시오. exports.mark = function () {if (flagmove == false) reture this; if (codipof codernateneLement.x == "undefined") this.position (); 요소 .setAttribute ( "data-center", [coordeLement.x, coderinateElement.y] .join ()); target.setAttribute ( "data-center", [codertarget.x, coordtarget.y] .join ()); 이것을 반환하십시오; } exports.position = function () {if (flagmove == false) 이것을 반환합니다. var scrollleft = document.documentElement.scrollleft || document.body.scrollleft, scrolltop = document.documentElement.scrolltop || document.body.scrolltop; // 초기 위치 if (movEStyle == "margin") {element.style.marginleft = element.style.margintop = "0px"; } else {element.style [movestyle] = "translate (0, 0)"; } // 4 개의 모서리의 좌표 rectlement = element.getBoundingClientRect (); recttArget = target.getBoundingClientRect (); // 움직이는 요소 중심 요소의 중심 지점의 좌표 = {x : rectlement.left.left + (rectlement.right -rectlement.left) / 2 + scrollleft, y : rectlement.top + (rectlement.bottom -rectelement.top) / 2 + scrolltop}; // 대상 요소의 중심점 위치 CentertArget = {x : recttarget.left + (recttarget.right -recttarget.left) / 2 + scrollleft, y : recttarget.top + (recttarget.bottom -recttarget.top) / 2 + scrolltop}; // 상대 좌표 위치로 변환 = {x : 0, y : 0}; CORKINATETARGET = {X : -1 * (CenterElement.x -CentertArget.x), y : -1 * (CenterElement.y -CentertArget.y)}; / * * 이후 (0, 0) 이후 c = 0 * 이후 : * y = a * x * x + b * xx; * y1 = a* x1* x1 + b* x1; * y2 = a* x2* x2 + b* x2; * 두 번째 좌표를 사용하십시오 : * b = (y2+ a * x2 * x2) / x2 * // so b = (coordtarget.y -a * coordinateTarget.x * coordtarget.x) / coordtarget.x; 이것을 반환하십시오; }; //이 곡선 내보내기에 따라 움직입니다 .move = function () {// 곡선 모션이 종료되지 않은 경우 (Flagmove == false) 님을 반환하면 새로운 모션이 더 이상 실행되지 않습니다. var startx = 0, rate = coordtarget.x> 0? 1 : -1; var step = function () {// 탄젠트 y '= 2ax + b var tangent = 2 * a * startx + b; // = y / x // y*y + x*x = 속도 // (탄젠트*x)^2 + x*x = 속도 // x = math.sqr (속도 / (접선*탄젠트 + 1)); startx = startx + rate * math.sqrt (params.speed / (탄젠트 * 탄젠트 + 1)); // 크로스 국경 방지 if ((rate == 1 && startx> coordtarget.x) || (rate == -1 && startx <coordinateTarget.x)) {startx = cordinateTarget.x; } var x = startx, y = a * x * x + b * x; // 현재 위치를 표시하면 여기에서 테스트 사용이 의심됩니다. 실제로 사용하면이 줄 요소를 주석 할 수 있습니다 .setAttribute ( "data-center", [math.round (x), math.round (y)]. join ()); // x, y는 현재 좌표이며 위치가있는 픽셀 값으로 변환되어야합니다. 요소 .style.margintop = y + "px"; } else {element.style [movestyle] = "translate (" + [x + "px", y + "px"]. join () + ")"; } if (startx! == coordinateTarget.x) {params.progress (x, y); window.requestanimationFrame (단계); } else {// 동작이 끝났고, 콜백은 params.complete ()를 실행합니다. Flagmove = true; }}; window.requestanimationFrame (단계); Flagmove = false; 이것을 반환하십시오; }; // 초기화 메소드 exports.init = function () {this.position (). mark (). move (); }; } 리턴 내보내기;};/*! ZhangxInxu 2013-09-30 */(function () {var lasttime = 0; var vendors = [ 'webkit', 'moz']; for (var x = 0; x <vendors.length &&! wind 'requestAnimationFrame'; 날짜 () var timetocall (0, 16.7-) 함수 (id) {quiltimeout (id);사용:
/ * 요소 */var element = document.getElementById ( "element"), target = document.getElementById ( "target"); // 포물선 요소의 위치 마크 var parabola = funparabola (element, target) .mark (); // 포물선 모션 문서. 요소 .style.margintop = "0px"; parabola.init ();};
쇼핑 카트에 추가 실제 전투 :
/ *이 데모 스크립트는 iebetter.js, 프로젝트 주소를 기반으로합니다. https://github.com/zhangxinxu/iebetter.js * /// 요소 및 기타 변수 var eleflyelement = document.queryStector ( "#flyItem"), eleshopCart = querySelector (varcart "); myparabola = funparabola (eleflyelement, eleshopcart, {속도 : 400, 곡률 : 0.002, 완료 : function () {eleflyElement.style.visibility = "hidden"; eleshopcart.querySelector ( "span"). innerHTML = ++ 숫자; {[] .slice.call (document.getElementsByClassName ( "btncart")). foreach (function (button.addeventListener (button.addeventListener) ( "click", function () {// scroll size var scrollleft = document.documentElement.scrollleft || document.body.scrollleft || 0, d || }); });}위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.