บทความบทนำของ wulin.com (www.vevb.com): HTML5 ใช้กิจกรรมล้อเมาส์ได้อย่างไร?
การเพิ่มกิจกรรมล้อเมาส์ไปยังหน้าเว็บ HTML5 สามารถช่วยให้ผู้ใช้สามารถโต้ตอบกับหน้าเว็บได้ดีขึ้น ใน HTML5 ล้อเลื่อนเมาส์ไม่เพียง แต่สามารถเลื่อนหน้าเว็บขึ้นและลงเท่านั้น ในความเป็นจริงคุณยังสามารถพึ่งพาสิ่งนี้เพื่อให้ฟังก์ชั่นเพิ่มเติมเสร็จสมบูรณ์เช่นการขยายและลดสนามของระนาบมุมมอง
เบราว์เซอร์ส่วนใหญ่รองรับกิจกรรมล้อเมาส์ดังนั้นคุณสามารถสมัครสมาชิกวิธีการจัดกิจกรรม Mouse Wheel ก่อน เมื่อใดก็ตามที่เหตุการณ์ถูกเรียกใช้คุณจะได้รับคุณสมบัติที่เรียกว่า Wheeldelta ซึ่งแสดงถึงขนาดของล้อเมาส์ที่เพิ่งเปลี่ยนไป ค่าบวกบ่งชี้ว่าล้อเลื่อนเลื่อนลงและค่าลบบ่งชี้ว่าล้อเลื่อนเลื่อนขึ้น ยิ่งค่าสัมบูรณ์ของค่ามากเท่าใดก็ยิ่งช่วงเลื่อนมากขึ้นเท่านั้น
น่าเสียดายที่ยังมีเบราว์เซอร์ที่ไม่รองรับเหตุการณ์ล้อของเมาส์ นั่นคือ Firefox Mozilla ได้ดำเนินการประมวลผลเหตุการณ์ที่เรียกว่า Dommousescroll ซึ่งจะผ่านพารามิเตอร์เหตุการณ์ที่ชื่อเหตุการณ์ที่มีคุณสมบัติที่เรียกว่ารายละเอียด อย่างไรก็ตามคุณสมบัติรายละเอียดนี้แตกต่างจาก Wheeldelta ซึ่งสามารถส่งคืนค่าบวกเท่านั้นนั่นคือมันสามารถยืนยันค่าของล้อเมาส์ที่เลื่อนลงได้เท่านั้น
คุณควรให้ความสนใจเป็นพิเศษว่า Apple ยังปิดใช้งานการเลื่อนเมาส์เพื่อควบคุมหน้าการเลื่อนขึ้นและลงในเบราว์เซอร์ Safari แต่ฟังก์ชั่นนี้ยังคงใช้ตามปกติในเอ็นจิ้น WebKit ดังนั้นรหัสที่คุณเขียนจะไม่ก่อให้เกิดปัญหาใด ๆ
เพิ่มวิธีการจัดการเหตุการณ์ Mouse Wheel
ก่อนอื่นเราเพิ่มภาพลงในหน้าเว็บและเราสามารถใช้ล้อเมาส์เพื่อควบคุมการซูมของภาพนี้ในภายหลัง
<img id = myimage src = myimage.jpg alt = รูปภาพของฉัน />>
ตอนนี้เพิ่มรหัสการประมวลผลเหตุการณ์ Mouse Wheel
var myimage = document.getElementById (myImage);
ถ้า (myimage.addeventListener) {
// IE9, Chrome, Safari, Opera
myimage.addeventListener (Mousewheel, Mousewheelhandler, False);
// firefox
myimage.addeventListener (Dommousescroll, Mousewheelhandler, False);
-
// คือ 6/7/8
else myimage.attachevent (Onmousewheel, Mousewheelhandler);
การประมวลผลแนวทางปฏิบัติที่สามารถรองรับได้โดยเบราว์เซอร์ที่แตกต่างกัน
ในกรณีต่อไปนี้เราจะผกผันค่ารายละเอียดของ Firefox และส่งคืนหนึ่งใน 1 หรือ -1
ฟังก์ชั่น mousewheelhandler (e) {
// delta ล้อข้ามเบราว์เซอร์
var e = window.event || E; // การสนับสนุน IE เก่า
var delta = math.max (-1, math.min (1, (e.wheeldelta || -e.detail)));
ตอนนี้เราตัดสินใจโดยตรงช่วงขนาดของภาพ รหัสต่อไปนี้กำหนดช่วงความกว้างของรูปภาพระหว่าง 50-800 พิกเซล
myimage.style.width = math.max (50, math.min (800, myimage.width + (30 * เดลต้า))) + px;
กลับเท็จ;
-
จุดสุดท้ายเรากลับมาเป็นเท็จในวิธีการเพื่อยุติการประมวลผลเหตุการณ์ล้อเมาส์มาตรฐานในกรณีที่มันเลื่อนขึ้นและลงหน้าเว็บ