تشارك هذه المقالة رمز الرسوم المتحركة لـ JS لتنفيذ Parabola من المنتج المضافة إلى عربة التسوق للرجوع إليها. المحتوى المحدد كما يلي
Parapola.js
/*! * بقلم Zhangxinxu (.com) 2012-12-27 * يمكنك زيارة http://www.zhangxinxu.com/wordpress/؟p=3855 للحصول على مزيد من المعلومات * تحت رخصة MIT */var funparabola = element ، الهدف ، خيارات) يتحرك بضع مئات من البكسلات * على الصفحة ، نضع كائنين ، بين 200 إلى 800 بكسل ، يمكننا أن نرسم خريطة إلى 2 متر إلى 8 أمتار في العالم الحقيقي ، وهو 100: 1 * ومع ذلك ، لا تعكس هذه الطريقة هذا ، لذلك لا توجد حاجة إلى الانتباه إلى */ var defaults = {speed: 166.67 ، الانحناء: 0.001 ، // يشير فعليًا إلى المسافة من التركيز إلى الخط. يمكنك تجريده في الانحناء. هذا يحاكي مكافئ رمي كائن ، لذلك هو الفتح على التقدم الهبوطي: الدالة () {} ، كاملة: function () {}} ؛ var params = {} ؛ خيارات = خيارات || {} ؛ لـ (مفتاح var في الافتراضات) {params [key] = Options [key] || الافتراضات [مفتاح] ؛ } var orports = {mark: function () {return this ؛ } ، الموضع: function () {return this ؛ } ، move: function () {return this ؛ } ، init: function () {return this ؛ }} ؛ ) if ("oninput" في testDiv) {["" ، "ms" ، "webkit"]. } // حدد وظيفة منحنى الحركة استنادًا إلى إحداثيات نقطتين وانحناء (أي ، حدد قيم A و B) /*الصيغة: y = a*x*x + b*x + c ؛ */ var a = params.curvature ، b = 0 ، c = 0 ؛ // قيمة علامة ما إذا كنت تريد تنفيذ Motion var flagmove = true ؛ if (element && target && element.nodeType == 1 && target.nodeType == 1) {var rectelement = {} ، rasttarget = {} ؛ // حرك موضع نقطة الوسط للعنصر ، موضع نقطة الوسط للعنصر الهدف var centerlement = {} ، centerTarget = {} ؛ . // وضع علامة على إحداثيات العنصر الحالي exports.mark = function () {if (flagmove == false) إرجاع هذا ؛ if (typeof costaLinesElement.x == "undefined") this.position () ؛ element.setAttribute ("data-center" ، [coordelement.x ، companelement.y] .join ()) ؛ Target.SetAttribute ("data-center" ، [coordtarget.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" ؛ } آخر {element.style [movestyle] = "Translate (0 ، 0)" ؛ } // إحداثيات الحواف الأربعة المستقيمة = element.getBoundingClientRect () ؛ recttarget = target.getBoundingClientRect () ؛ // إحداثيات النقطة المركزية للعنصر المتحرك centerlement = {x: rectelement.left + (rectlement.right - rectlement.left) / 2 + scrollleft ، y: stelement.top + (rectlement.bottom - rectlement.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} ؛ CoordInateTarget = {x: -1 * (centerlement.x - contertarget.x) ، y: -1 * (centerlement.y - contertarget.y)} ؛ / * * لأنه بعد (0 ، 0) ، لذلك C = 0 * SO: * 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 = (costaLtArget.y - a * coordinateTarget.x * coordtarget.x) / coordtarget.x ؛ إرجاع هذا ؛ } ؛ // تحرك وفقًا لهذا المنحنى الصادرات. var startx = 0 ، معدل = 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)) ؛ . } var x = startx ، y = a * x * x + b * x ؛ // وضع علامة على الموضع الحالي ، هناك شك في استخدام الاختبار هنا. في الاستخدام الفعلي ، يمكنك التعليق هذا الخط. // x ، y هي حاليًا الإحداثيات ويجب تحويلها إلى قيمة البكسل الموضعية إذا (movestyle == "margin") {element.style.marginleft = x + "px" ؛ element.style.margintop = y + "px" ؛ } آخر {element.style [movestyle] = "Translate (" + [x + "px" ، y + "px"]. } if (startx! == coordinateTarget.x) {params.progress (x ، y) ؛ window.requestanimationFrame (الخطوة) ؛ } آخر {// قد انتهى الحركة ، يقوم رد الاتصال بتنفيذ params.complete () ؛ flagmove = صحيح ؛ }} ؛ window.requestanimationFrame (الخطوة) ؛ flagmove = false ؛ إرجاع هذا ؛ } ؛ // طريقة التهيئة exports.init = function () {this.position (). mark (). move () ؛ } ؛ } الإرجاع صادرات ؛} ؛/*! requestAnimationFrame.js * by Zhangxinxu 2013-09-30 */(function () {var last time = 0 ؛ var vendors = ['webkit' ، 'moz'] ؛ for (var x = 0 ؛ x <vendors.length &&! "requestAnimationFrame '] ؛ Date (). دالة (id) {cleartimeout (id) ؛يستخدم:
/ * element */var element = document.getElementById ("element") ، target = document.getElementById ("Target") ؛ // علامة موضع عنصر parabola var parabola = funparabola (element ، target) .mark () ؛ element.style.margintop = "0px" ؛ parabola.init () ؛} ؛أضف إلى عربة التسوق القتال الفعلي:
/ * يعتمد هذا البرنامج النصي التجريبي على IEBetter.js ، عنوان المشروع: https://github.com/zhangxinxu/iebetter.js * /// العناصر وبعض المتغيرات الأخرى var eLeflyElement = document. myparabola = funparabola (eLefleElement ، eleshopcart ، {speed: 400 ، الانحناء: 0.002 ، كاملة: function () {elfleelement.style.visibility = "hidden" ؛ eleshopcart) {[] document.documentelement. myparabola.position (). }) ؛}ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.