บทความนี้อธิบายถึงวิธีการใช้งานการเลื่อนและการผ่อนคลายแบบเฉื่อยสำหรับการพัฒนาโทรศัพท์มือถือ JS+HTML5 แบ่งปันสำหรับการอ้างอิงของคุณดังนี้:
1. เลื่อนวิธีการใช้งานสามวิธีต่อไปนี้:
1) ใช้แอตทริบิวต์ CSS ดั้งเดิม: Scroll Div ID = Style Parent = Overflow: Scroll; divid = 'เนื้อหา' พื้นที่เนื้อหา /div /div ประกาศ: มีข้อผิดพลาดใน Android และมันจะกลับไปที่พื้นที่เนื้อหาด้านบนหลังจากเลื่อน วิธีแก้ปัญหาคือการใช้สองวิธีหลังเพื่อนำไปใช้
2) แนวคิดการใช้งานการเขียนโปรแกรม JS: เปรียบเทียบการเปลี่ยนแปลงตำแหน่งของด้านหน้าและด้านหลังของนิ้วบนหน้าจอเพื่อเปลี่ยนเนื้อหาองค์ประกอบเนื้อหา
1. เลื่อน
นี่คือวิธีการใช้งานสามวิธี:
1) ใช้แอตทริบิวต์ CSS ดั้งเดิม: Scroll
<div id = "parent" style = "overflow: scroll;> <div id = 'เนื้อหา'> พื้นที่เนื้อหา </div> </div>
สังเกต:
มีข้อผิดพลาดใน Android และหลังจากการเลื่อนมันจะกลับไปที่พื้นที่เนื้อหาด้านบน ทางออกคือการใช้วิธีสองวิธีหลังเพื่อนำไปใช้
2) การใช้งานการเขียนโปรแกรม JS
แนวคิด: เปรียบเทียบตำแหน่งขององค์ประกอบเนื้อหาก่อนและหลังการเคลื่อนที่บนหน้าจอ
ขั้นตอนที่ 1: ตั้งค่าการล้นของผู้ปกครองให้ซ่อนตำแหน่งของเนื้อหาเป็นญาติและบนสุดเป็น 0;
ขั้นตอนที่ 2: ฟังกิจกรรม Touch
var parent = document.getElementById ('parent'); parent.addeventListener ('touchstart', ฟังก์ชั่น (e) {// do touchstart}); parent.addeventListener ('touchmove' ฟังก์ชั่น (e) {// do touchmove}); touchend}); parent.addeventListener ('touchend', ฟังก์ชั่น (e) {// do touchend});ขั้นตอนที่ 3: ใช้รหัสเลื่อน
/*** ใช้การเลื่อนแนวตั้งเท่านั้นที่นี่*/var parent = document.getElementById ('parent'); var content = document.getElementById ('เนื้อหา') var starty = 0; // ตำแหน่งเริ่มต้น var lasty = 0; // ตำแหน่งสุดท้าย parent.addeventListener ('TouchStart', ฟังก์ชั่น (e) {lasty = starty = e.touches [0] .pagey;}); parent.addeventListener ('touchmove', ฟังก์ชัน (e) {var nowy = e.touches [0] content.style.top.replace ('px', ''); สุดท้าย;ขั้นตอนที่ 4: การเพิ่มประสิทธิภาพ
รหัสข้างต้นทำงานบนโทรศัพท์มือถือและมีผลลัพธ์ที่ติดอยู่มากมาย
สำหรับการเพิ่มประสิทธิภาพโปรดดู:
3) ใช้เฟรมเวิร์ก isCroll4
var scroll = new iScroll ('parent', {hscrollbar: false, vscrollbar: จริง, checkdomchanges: true});เว็บไซต์อย่างเป็นทางการของ Framework: http://cubiq.org/iscroll-4
2. การผ่อนคลายเฉื่อย
แนวคิด: ใช้ความเร็วเฉลี่ย V ของนิ้วมือที่ปัดบนหน้าจอในช่วงระยะเวลาสุดท้ายและให้ V เปลี่ยนไปตามฟังก์ชั่นที่ลดลงจนกว่าจะไม่สามารถเคลื่อนที่หรือ v <= 0
/*** ใช้การเลื่อนแนวตั้งเท่านั้นที่นี่*/var parent = document.getElementById ('parent'); var content = document.getElementById ('เนื้อหา') var starty = 0; // ตำแหน่งเริ่มต้น var lasty = 0; // ตำแหน่งสุดท้าย/*** ตัวแปรสำหรับการผ่อนคลาย*/var lastMoveTime = 0; var lastMovestart = 0; var stopinertiamove = false; // ว่าจะหยุดการผ่อนคลาย parent.addeventListener ('TouchStart', ฟังก์ชั่น (e) {lasty = starty = e.touches [0] .pagey;/ *** รหัสผ่อนคลาย*/ lastMovestart = lasty; lastMovetime = e.timestamp || วันที่ () ฟังก์ชั่น (e) {var nowy = e.touches [0] .pagey; E.Timestamp || วันที่ตอนนี้ (); contenttop = content.style.top.replace ('px', '); (Nowtime - LastMovetime); Inertiamove () {ถ้า stopinertiamove); Movey) + "PX";PS: นี่คือเครื่องมือการจัดรูปแบบรหัสและความสวยงามสำหรับคุณ ฉันเชื่อว่าคุณจะใช้พวกเขาในกระบวนการพัฒนาในอนาคต:
เครื่องมือการตกแต่งและการจัดรูปแบบรหัส JavaScript ออนไลน์:
http://tools.vevb.com/code/js
เครื่องมือการบีบอัด/การจัดรูปแบบ JavaScript:
http://tools.vevb.com/code/jscompress
JSON CODE การจัดรูปแบบออนไลน์/การตกแต่ง/การบีบอัด/แก้ไข/แปลงเครื่องมือ:
http://tools.vevb.com/code/jsoncodeformat
การตรวจสอบรหัส JSON ออนไลน์การตรวจสอบความสวยงามและการจัดรูปแบบเครื่องมือ:
http://tools.vevb.com/code/json
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ jQuery กรุณาเยี่ยมชมหัวข้อพิเศษของเว็บไซต์นี้: "บทสรุปของปลั๊กอินทั่วไปและการใช้งานของ jQuery", "บทสรุปของการใช้งาน Ajax ใน jQuery", "บทสรุปของ JQuery Table (Table) ทักษะการใช้งาน" สรุปผลกระทบของ JQUALY เอฟเฟกต์การใช้งาน "และ" สรุปของ JQuery Selector Usages "
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม jQuery ของทุกคน