สวิตช์หน้าจอ Single -Page Single Sliding ถูกนำมาใช้โดยใช้ HTML5 Touch Event (Touch) และ CSS3 ภาพเคลื่อนไหว (การเปลี่ยนแปลง)
1. หลักการดำเนินการสมมติว่ามี 5 หน้าแต่ละหน้าบัญชีสำหรับหน้าจอกว้าง 100%จากนั้นสร้าง Viewport คอนเทนเนอร์ DIV ตั้งค่าความกว้าง (ความกว้าง) เป็น 500%จากนั้นใส่ 5 หน้าลงในคอนเทนเนอร์และปล่อยให้ 5 หน้าเหล่านี้แบ่ง 5 หน้า 5 หน้า . คอนเทนเนอร์ทั้งหมดในที่สุดตั้งค่าตำแหน่งเริ่มต้นของคอนเทนเนอร์เป็น 0 และล้นไปที่ซ่อนอยู่ดังนั้นหน้าจอจะแสดงหน้าแรกโดยค่าเริ่มต้น
<div id = viewport class = viewport> <div class = pageview style = พื้นหลัง: #3b76c0> <h3> หน้า -1 </h3> </div> <div class = pageView = backggggggggggggg ground: #58C03B;> <h3 > page -2 </h3> </div> <div class = pageview style = พื้นหลัง: #c03b25;> <h3> หน้า -3 </h3> </div> <div class = pageview style = พื้นหลัง: #e0a77777777777777777777 18;> <h3> หน้า -4 </h3> </div> <div class = pageview style = background: #c03eac;> <h3> page -5 </h3> </div> </div>
สไตล์ CSS:
. Viewport {ความกว้าง: 500%; เหตุการณ์คลิกโปรดทราบ -webkit-transform: Translate3d (0,0,0);ลงทะเบียน TouchStart, TouchMove และ Touchend เหตุการณ์ , 0) ของ Viewport (100%, 0,0)
2. ความคิดหลักจากนิ้วบนหน้าจอการดำเนินการเลื่อนและออกจากหน้าจอเป็นกระบวนการดำเนินการที่สมบูรณ์
วางนิ้วของคุณบนหน้าจอ: OnTouchStart
ปัดนิ้วของคุณบนหน้าจอ: ontouchmove
นิ้วออกจากหน้าจอ: Ontouchend
เราจำเป็นต้องจับภาพสามขั้นตอนของการสัมผัสเพื่อให้การเลื่อนหน้าเสร็จสมบูรณ์:
OnTouchStart: ตัวแปรเริ่มต้นบันทึกตำแหน่งของนิ้วบันทึกเวลาปัจจุบัน
/*วางนิ้วของคุณบนหน้าจอ*/document.addeVentRistener (TouchStart, ฟังก์ชั่น (e) {E.preventDefault (); var touch = e.touchs [0]; startx = touch.pagex; starty touch.pagey; CurrentPosition;OntouchMove: รับตำแหน่งปัจจุบันคำนวณ Deltax ที่แตกต่างจากการเคลื่อนไหวบนหน้าจอจากนั้นทำให้หน้าเว็บติดตามการย้าย
/*ปัดนิ้วของคุณบนหน้าจอและหน้าตามนิ้วเพื่อย้าย*/document.addeventristener (touchmove, ฟังก์ชั่น (e) {e.preventDefault (); var touch = e.touchs [0]; var deltax = touch .P AGEX -STARTX; Math.Abs (Deltay) {movelength = deltax; 0 && แปล> = maxWidth) {// หน้ามือถือ this.transform.call (viewport, translate); สิ่งนี้), เท็จ);OnTouchend: เมื่อนิ้วของคุณออกจากหน้าจอหน้าจะถูกคำนวณหน้าใดในที่สุดก็ยังคงอยู่ ขั้นแรกให้คำนวณเวลาพักของนิ้วบนหน้าจอ Deltat
หากเลื่อนเร็วให้หน้าปัจจุบันอยู่ตรงกลางของหน้าจอ (คุณต้องเลื่อนหน้าปัจจุบันเท่าไหร่)
หากมันเลื่อนไปอย่างช้าๆคุณจะต้องตัดสินระยะทางของการเลื่อนนิ้วของคุณบนหน้าจอ ในหน้าปัจจุบัน
/*เมื่อนิ้วออกจากหน้าจอให้คำนวณหน้าใดที่คุณต้องอยู่ในตอนท้าย*/document.addeVentRistener (touchind, ฟังก์ชั่น (e) {e.preventDefault (); var translation = 0; // คำนวณเวลาของ นิ้วบนหน้าจอ S EASE -WEBKIT -TRANSFORM; +Pagewidth-Movelengt; {// ถ้าระยะการเลื่อนน้อยกว่า 50 %ของหน้าจอให้กลับไปที่หน้าก่อนหน้าถ้า (math.abs (movelength)/pagewidth <0.5) {translate = atrrentposity-movelength; Translate == 'left'? อย่างสมบูรณ์บนหน้าจอ this.transform.call (viewport, translate);}}นอกจากนี้คุณต้องคำนวณหน้าปัจจุบันคือหน้าและตั้งค่าหมายเลขหน้าปัจจุบัน
// คำนวณหมายเลขหน้าปัจจุบัน pagenow = math.round (math.abs (แปล)/pagewidth) + 1; การพูดติดอ่างนี้จะปรากฏขึ้น
นี่คือแนวคิดพื้นฐาน https://github.com/git -onepixel/Guesture
ข้างต้นคือการวิเคราะห์หลักการของ HTML5 Single -Page Sliding Sliding Sliding Screen Principle ที่แนะนำโดย Xiaobian ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน เวลา. ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Vevb Wulin!