ในระหว่างการพัฒนามือถือเรามักจะพบเหตุการณ์การเลื่อน อย่างที่เราทุกคนรู้การเลื่อนบนโทรศัพท์มือถือส่วนใหญ่อาศัยกิจกรรมการสัมผัส เมื่อเร็ว ๆ นี้เราได้พบสองหน้าที่มีเอฟเฟกต์คล้ายกับการล้น: อัตโนมัติ โดยทั่วไปสามารถทำได้ผ่านการตั้งค่า CSS (แม้ว่ามันจะน่าเกลียดเล็กน้อย) แต่เมื่อการไหลล้น: องค์ประกอบอัตโนมัติตอบสนองต่อเหตุการณ์การสัมผัส แต่ก็มีความไม่สะดวกมากมาย ตัวอย่างเช่นองค์ประกอบบางอย่างใน FullPage เลื่อนโดยอัตโนมัติ เราสามารถใช้ normalscrollelements เพื่อให้องค์ประกอบไม่เลื่อนไปยังหน้าจอถัดไปเมื่อเลื่อน แต่เมื่อองค์ประกอบเลื่อนไปด้านล่างมันจะไม่สามารถตอบสนองต่อเหตุการณ์หน้าจอถัดไป เช่นเดียวกับการเลื่อนขึ้นไป ในเวลานี้จำเป็นต้องมีเหตุการณ์การสัมผัสเพื่อตอบสนอง เพื่อความสะดวกของการห่อหุ้มในอนาคตปลั๊กอิน jQuery นั้นถูกห่อหุ้มและในเวลาเดียวกันเรายังตรวจสอบการพัฒนาปลั๊กอิน jQuery และกิจกรรมสัมผัส
แนวคิดทั่วไปของปลั๊กอินมีดังนี้: พื้นที่ในกล่องเป็นองค์ประกอบหลักที่มีความกว้างและความสูงคงที่ (ตั้งค่าล้น: ซ่อน) และความสูงขององค์ประกอบเด็กมากกว่าองค์ประกอบหลัก เราเปลี่ยนค่าการแปลขององค์ประกอบเด็กโดยการตอบสนองต่อเหตุการณ์การสัมผัส (ด้านบนเป็นไปได้ แต่ประสิทธิภาพการแปลสูงกว่า) แน่นอนในช่วงเวลานี้เราจำเป็นต้องตัดสินขอบเขตของค่าการแปลขององค์ประกอบลูกสูงสุดคือ 0 และขั้นต่ำคือความสูงขององค์ประกอบของผู้ปกครององค์ประกอบเด็ก
PS: หากคุณต้องการย้ายองค์ประกอบเด็กตามนิ้วคุณต้องเขียนโปรแกรมอื่นหลังจากปล่อยนิ้วและกลับไปที่ขอบเขต
มาเขียนปลั๊กอินทีละขั้นตอน
ขั้นตอนแรกคือการสร้างขอบเขตที่ปลอดภัย
; (ฟังก์ชั่น ($) {// แทรกรหัส}) (jQuery) หากเราจำเป็นต้องโทรผ่านวิธี $ ("#id"). xx () เราต้องเขียนมันเหมือนด้านล่างที่นี่ FN และต้นแบบของ JQuery; $ .extend ({exec: function () {}}) // ส่วนขยายนี้เรียก $ .fn.simuscroll = function (ตัวเลือก) {var scrollobj = ใหม่ simuscroll (นี้ตัวเลือก); return scrollobj.init ();};};};ลองมาดูวิธี SimusCroll ในรหัสด้านบน นี่คือตัวสร้าง มันยอมรับพารามิเตอร์สองตัว ELE เป็นองค์ประกอบที่ยอมรับเหตุการณ์การสัมผัสในปัจจุบัน (โดยทั่วไปสามารถตั้งค่าเป็นองค์ประกอบหลัก) ตัวเลือกคือพารามิเตอร์การกำหนดค่าที่ผู้ใช้ส่งผ่านเช่นการเปลี่ยนองค์ประกอบการแปลความสูงขององค์ประกอบลูกองค์ประกอบแม่พิเศษคือความสูงที่ต้องเพิ่มฟังก์ชั่นการเรียกกลับ
var simusCroll = function (ele, ตัวเลือก) {this.settings = {เป้าหมาย: ele, // การเปลี่ยนแปลงองค์ประกอบเหตุการณ์: '', outerheight: '800', // ความสูงด้านนอก innerHeight: '500', // innerHeight: '0', // jQuery.extend เพื่อรับวัตถุใหม่ล่าสุด this.opt = jQuery.extend ({}, this.settings, ตัวเลือก); this.initNumber = this.lastNumber = this.result = 0; this.flag = false; // คำนวณความแตกต่างของระยะห่างระหว่างองค์ประกอบลูกและองค์ประกอบหลักเพื่อกำหนดระยะการเลื่อนสูงสุดขององค์ประกอบนี้ diff = parsefloat (this.opt.innerHeight) - parsefloat <0? 0: this.diff; this.direction = '';};เมื่อขยายต้นแบบ jQuery ขั้นตอนแรกคือการสร้างอินสแตนซ์คอนสตรัคเตอร์ข้างต้นและขั้นตอนที่สองเรียกใช้วิธีการเริ่มต้นโดยตรงของตัวสร้าง ดูบันทึกด้านล่างสำหรับรายละเอียด
init: function () {// jQuery Object เชื่อมโยงเหตุการณ์การสัมผัสโดยตรงเพื่อให้ได้เหตุการณ์จำเป็นต้องได้รับแอตทริบิวต์เหตุการณ์ของวัตถุดั้งเดิม // jQuery Object ได้รับ pagex event.originalevent.touches [0] .pagex // dom event.touches [0] .pagex var เป้าหมาย = this.opt.target.target. // หากความสูงขององค์ประกอบลูกมากกว่าองค์ประกอบหลักให้ดำเนินการเหตุการณ์การเลื่อนมิฉะนั้นจะเรียกใช้ฟังก์ชันการโทรกลับ this.flag = this.diff> 0? 'แปล': 'exec';/*หากองค์ประกอบได้ตั้งค่าการแปลง, สเกล, เอียงและหมุนในการแปลงเราจะตั้งค่าการแปลงโดยตรง: แปล (10px) และเขียนทับแอตทริบิวต์ชุดเริ่มต้น ดังนั้นเราจึงไม่เพียง แต่ตรวจสอบให้แน่ใจว่าแอตทริบิวต์ดั้งเดิมโดยได้รับค่าเมทริกซ์ขององค์ประกอบ แต่ยังตั้งค่าใด ๆ*/var csstext = this.opt.changetarget.css ('-webkit-transform'); ถ้า (csstext == 'ไม่มี') {// องค์ประกอบไม่ได้ตั้งค่าแอตทริบิวต์การแปลง this.str = this.opt.vertical? 'translatey': 'translatex';} else {this.str = csstext; var reg = /-?/d+/.?/d*/g; // นิพจน์ปกติ/*รับค่าเมทริกซ์ที่ได้รับโดยตรงจากแต่ละพารามิเตอร์ในเมทริกซ์นั้นคล้ายกับเมทริกซ์ (1,0,0,1,0,0) และได้รับจากเมทริกซ์ (1,0,0,1,0,0) เพื่อให้เราสามารถปรับเปลี่ยนรายการที่ 5 this.str.match (reg); this.matrix = this.opt.vertical? 6: 5; // สามารถกำหนดค่าที่จะแก้ไขเป็น translatey หรือ translatex ตามพารามิเตอร์ที่ผ่าน} var _this = this; // องค์ประกอบหลักผูกมัดเหตุการณ์การสัมผัสผ่านวัตถุเหตุการณ์และ contexttarget.addeventListener ('touchStart', ฟังก์ชั่น (e) {_ this.start (e, _this)}); target.addeventListener ('สัมผัส ย้าย ', ฟังก์ชัน (e) {_ this.move (e, _this)}); target.addeventListener (' touchend ', ฟังก์ชั่น (e) {_ this.end (e, _this)});}วิธี TouchStart นั้นค่อนข้างง่ายและค่าเริ่มต้นของนิ้วสัมผัสหน้าจอจะถูกบันทึกตามทิศทางที่คุณต้องการเลื่อน
เริ่มต้น: ฟังก์ชั่น (e, บริบท) {E.preventDefault (); var touches = e.touches [0]; context.initNumber = context.opt.vertical? touches.pagey: touches.pagex;},วิธีการสัมผัสส่วนใหญ่จะเปลี่ยนแอตทริบิวต์ CSS ขององค์ประกอบขึ้นอยู่กับระยะการเลื่อนนิ้วเพื่อให้องค์ประกอบสามารถเคลื่อนที่ด้วยนิ้วมือ
วิธีการ setNumber มีเพียงหนึ่งประโยค: this.params.splice (n-1,1, หมายเลข) เปลี่ยนเมทริกซ์อาร์เรย์ตามพารามิเตอร์ที่ผ่าน
ย้าย: ฟังก์ชั่น (e, บริบท) {e.preventDefault (); var touches = e.touches [0]; number = context.opt.vertical? touches.pagey: touches.pagex; // รับค่าการเปลี่ยนแปลงที่สัมพันธ์กับนิ้วสัมผัสหน้าจอ var delta = number - บริบท - initnumber; ถ้า (context.flag == 'แปล') {// ถ้าคุณต้องการเลื่อนบริบท result = context.lastnumber + delta; 0: context.result; context.result = -context.result> context.diff? -context.diff: context.result; // การตั้งค่าแบบไดนามิกของแอตทริบิวต์องค์ประกอบ css ถ้า (context.matrix) {switch (context.matrix) {กรณี 6: context.setNumber (6, บริบท กรณี 5: context.setNumber (5, context.result) break;} context.opt.changetarget.css ('-webkit-transform', 'matrix ('+context.par ams.join (',')+')')} else {context.opt.changetarget.css ('-webkit-transform', context.str+'('+context.result+'px)')}}}Touchend กำหนดว่าต้องดำเนินการฟังก์ชันการโทรกลับในระหว่างการเปิดตัว
สิ้นสุด: ฟังก์ชั่น (e, บริบท) {E.preventDefault (); var touches = e.changedTouches [0]; var number = context.opt.vertical? touches.pagey: touches.pagex, n = number - context.initnumber; // เมื่อระยะทางเลื่อนขององค์ประกอบมากกว่า 10 และค่าการแปลขององค์ประกอบเริ่มต้นคือ 0 และฟังก์ชั่นการเรียกกลับนั้นมีอยู่แล้วเรียกใช้ฟังก์ชันการเรียกกลับถ้า (n> 10 && บริบท context.lastNumber == -context.diff && context.opt.swipeup) {context.opt.swipeup ();} // ตั้งค่าคงที่เป็นค่าผลลัพธ์เพื่อให้แน่ใจว่าสถานการณ์การเลื่อนหลายครั้งต่อเนื่องโดยพื้นฐานแล้วปลั๊กอิน jQuery ที่เรียบง่ายเสร็จสมบูรณ์เฟรมเวิร์กมีดังนี้
; (ฟังก์ชั่น ($) {var a = function (m, n) {// function content}; a.prototype = {init: function () {}, start: function () {}, move: function () {}, end: function () {}, setnumber obj.init ()}}) (jQuery)เมื่อเรียกว่าสิ่งต่อไปนี้คือ:
$ (". outer"). simuscroll ({'outerheight': $ (". outer"). ความสูง (), 'innerHeight': $ ('. inner'). ความสูง (), 'changetarget': $ (". inner"), 'swipeup': function () {console.log ('up')}, 'swipedown': function () {console.log ('ลง')}, แนวตั้ง: จริง})ข้างต้นคือเอฟเฟกต์การเลื่อนล้นของ JS+CSS3 การจำลองล้นที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!