บทความนี้แบ่งปันรหัสแอนิเมชั่นสำหรับ JS เพื่อใช้พาราโบลาของผลิตภัณฑ์ที่เพิ่มเข้ามาในตะกร้าสินค้าสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
parapola.js
- * โดย Zhangxinxu (.com) 2012-12-27 * คุณสามารถเยี่ยมชม http://www.zhangxinxu.com/wordpress/?p=3855 เพื่อรับข้อมูลเพิ่มเติม * ภายใต้ใบอนุญาต MIT */var funparabola = ฟังก์ชั่น (องค์ประกอบ, เป้าหมาย, ตัวเลือก) {/ * ไม่กี่ร้อยพิกเซล * บนหน้าเราวางวัตถุสองชิ้นระหว่าง 200 ~ 800 พิกเซลเราสามารถแมปถึง 2 เมตรถึง 8 เมตรในโลกแห่งความเป็นจริงซึ่งคือ 100: 1 * อย่างไรก็ตามวิธีนี้ไม่ได้สะท้อนสิ่งนี้ดังนั้นจึงไม่จำเป็นต้องใส่ใจกับ */ var ค่าเริ่มต้น 0.001, // จริง ๆ แล้วหมายถึงระยะทางจากโฟกัสไปยังเส้น คุณสามารถนามธรรมมันเป็นความโค้ง สิ่งนี้จะจำลองพาราโบลาของการขว้างวัตถุดังนั้นจึงเป็นความคืบหน้าการเปิดลง: ฟังก์ชั่น () {}, เสร็จสมบูรณ์: ฟังก์ชั่น () {}}; var params = {}; ตัวเลือก = ตัวเลือก || - สำหรับ (คีย์ var ในค่าเริ่มต้น) {params [key] = ตัวเลือก [key] || ค่าเริ่มต้น [คีย์]; } var exports = {mark: function () {return this; }, ตำแหน่ง: function () {ส่งคืนสิ่งนี้; }, ย้าย: function () {ส่งคืนสิ่งนี้; }, init: function () {return this; - /* กำหนดวิธีการย้าย* IE6-IE8 คือการกระจัดระยะขอบ* IE9+ใช้การแปลง*/ var movestyle = "margin", testDiv = document.createElement ("div"); if ("OnInput" ใน testDiv) {["", "MS", "WebKit"]. foreach (ฟังก์ชั่น (คำนำหน้า) {var transform = คำนำหน้า + (คำนำหน้า? "t": "t") + "ransform" } // กำหนดฟังก์ชั่นเส้นโค้งการเคลื่อนไหวตามพิกัดของสองจุดและความโค้ง (นั่นคือกำหนดค่าของ A และ B) /*สูตร: y = a*x*x + b*x + c; */ var a = params.curvature, b = 0, c = 0; // ค่าธงว่าจะทำการเคลื่อนไหว var flagmove = true; if (element && target && element.nodeType == 1 && target.nodeType == 1) {var rectelement = {}, rectTarget = {}; // เลื่อนตำแหน่งจุดกึ่งกลางขององค์ประกอบตำแหน่งจุดกึ่งกลางขององค์ประกอบเป้าหมาย var centerelement = {}, centertarget = {}; // ตำแหน่งพิกัดขององค์ประกอบเป้าหมาย var conteomelement = {}, coordinatetarget = {}; // ทำเครื่องหมายพิกัดของการส่งออกองค์ประกอบปัจจุบัน mark = function () {ถ้า (flagmove == เท็จ) ส่งคืนสิ่งนี้; if (typeof codrecorderelement.x == "undefined") this.position (); element.setAttribute ("ศูนย์ข้อมูล", [coordelement.x, codordelement.y] .oin ()); target.setAttribute ("ศูนย์ข้อมูล", [coordtarget.x, coordtarget.y] .join ()); คืนสิ่งนี้; } exports.position = function () {ถ้า (flagmove == false) ส่งคืนสิ่งนี้; var scrollleft = document.documentelement.scrollleft || document.body.scrollleft, scrolltop = document.documentelement.scrolltop || document.body.scrolltop; // ตำแหน่งเริ่มต้นถ้า (movestyle == "margin") {element.style.marginleft = element.style.margintop = "0px"; } else {element.style [movestyle] = "แปล (0, 0)"; } // พิกัดของสี่ขอบ rectelement = element.getBoundingClientRect (); recttarget = target.getBoundingClientRect (); // พิกัดของจุดกึ่งกลางขององค์ประกอบการเคลื่อนที่ centerelement = {x: rectelement.left + (rectelement.right - rectelement.left) / 2 + scrollleft, y: rectelement.top + (rectelement.bottom - rectelement.top) / 2 + Scrolltop // ตำแหน่งจุดกึ่งกลางขององค์ประกอบเป้าหมาย centertarget = {x: recttarget.left + (recttarget.right - recttarget.left) / 2 + scrollleft, y: recttarget.top + (recttarget.bottom // แปลงเป็นตำแหน่งพิกัดประสานงานการประสานงาน = {x: 0, y: 0}; coordinatetarget = {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 * / // ดังนั้น b = (coordtarget.y - a * coordinatetarget.x * coordtarget.x) / coordtarget.x; คืนสิ่งนี้; - // ย้ายตามการส่งออกเส้นโค้งนี้ move = function () {// หากการเคลื่อนไหวของเส้นโค้งยังไม่สิ้นสุดการเคลื่อนไหวใหม่จะไม่ถูกดำเนินการอีกต่อไปหาก (flagmove == เท็จ) ส่งคืนสิ่งนี้; 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)); // ป้องกันการข้ามพรมแดนถ้า ((อัตรา == 1 && startx> coordTarget.x) || (rate == -1 && startx <CoordinAtetArget.x)) {startx = coordinatetarget.x; } var x = startx, y = a * x * x + b * x; // ทำเครื่องหมายตำแหน่งปัจจุบันมีความสงสัยในการทดสอบการใช้งานที่นี่ ในการใช้งานจริงคุณสามารถแสดงความคิดเห็น Element.setAttribute ("ศูนย์ข้อมูล", [math.round (x), math.round (y)]. เข้าร่วม ()); // x, y ปัจจุบันเป็นพิกัดและจำเป็นต้องแปลงเป็นค่าพิกเซลที่อยู่ในตำแหน่งถ้า (movestyle == "margin") {element.style.marginleft = x + "px"; element.style.margintop = y + "px"; } else {element.style [movestyle] = "แปล (" + [x + "px", y + "px"]. เข้าร่วม () + ")"; } 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 (); - } ส่งคืนการส่งออก;};/*! requestanimationFrame.js * โดย Zhangxinxu 2013-09-30 */(ฟังก์ชั่น () {var ล่าสุด = 0; var vendors = ['webkit', 'moz']; สำหรับ (var x = 0; x <ผู้ขาย. length &&! Window.cancelanimationFrame = Window [ผู้ขาย [x] + 'CancelimationFrame'] || // ชื่อมีการเปลี่ยนแปลงใน WebKit Window [ผู้ขาย [x] + 'CancelrequestationFrame']; Math.max (0, 16.7 - (currtime - thime); -ใช้:
/ * องค์ประกอบ */var element = document.getElementById ("องค์ประกอบ"), target = document.getElementById ("เป้าหมาย"); // เครื่องหมายตำแหน่งขององค์ประกอบพาราโบลา var parabola = funparabola (องค์ประกอบ, เป้าหมาย). mark (); element.style.margintop = "0px"; parabola.init ();};เพิ่มลงในตะกร้าสินค้าการต่อสู้จริง:
/ * สคริปต์ตัวอย่างนี้ขึ้นอยู่กับ iebetter.js ที่อยู่โครงการ: https://github.com/zhangxinxu/iebetter.js * /// องค์ประกอบและตัวแปรอื่น ๆ myparabola = funparabola (eleflyelement, eleshopcart, {ความเร็ว: 400, curvature: 0.002, เสร็จสมบูรณ์: ฟังก์ชั่น () {eleflyelement.style.visibility = "hidden"; eleshopcart.querySelector ("span") eleshopcart) {[] .slice.call (document.getElementsByClassName ("btncart")). foreach (ฟังก์ชั่น (ปุ่ม) {button.addeventListener ("คลิก", function () {// // scroll sizrollleft = documentellement.scrollleft Document.documentelement.scrolltop || myparabola.position (). move (); -ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน