เราทุกคนเห็นเอฟเฟกต์เหล่านี้โดยใช้ล้อเมาส์เพื่อให้ได้การเพิ่มขึ้นหรือลดจำนวนในรูปแบบที่กำหนดหรือล้อเลื่อนควบคุมทางซ้ายและขวาของปุ่มและเลื่อนขึ้นและลง ทั้งหมดนี้เกิดขึ้นได้จากการตรวจสอบเหตุการณ์ JS ของล้อเมาส์ วันนี้ฉันจะแนะนำ JS ที่เรียบง่ายเล็กน้อยฟังกิจกรรม Mouse Wheel
เหตุการณ์ต่าง ๆ ในเบราว์เซอร์ที่แตกต่างกัน
ก่อนอื่นเบราว์เซอร์ที่แตกต่างกันมีกิจกรรมการเลื่อนที่แตกต่างกัน ส่วนใหญ่มีสองประเภท: Onmousewheel (Firefox ไม่รองรับ) และ Dommousescroll (Firefox รองรับเท่านั้น) ฉันจะไม่อธิบายรายละเอียดสองเหตุการณ์นี้ที่นี่ หากคุณต้องการทราบโปรดย้าย: Mousewheel (Mousewheel) และกิจกรรม Dommousescroll
นอกจากนี้จำเป็นต้องเพิ่มการฟังเหตุการณ์ในระหว่างการดำเนินการรหัสมีดังนี้: เข้ากันได้กับ Firefox ใช้ addeventListener เพื่อฟัง
คัดลอกรหัสดังนี้:/*การลงทะเบียนเหตุการณ์*/
if (document.addeventListener) {
Document.addeventListener ('Dommousescroll', Scrollfunc, False);
} // w3c
window.onmousewheel = document.onmousewheel = scrollfunc; // ie/opera/chrome
JS ส่งคืนค่าตัวเลขเพื่อกำหนดขึ้นและลงของล้อเลื่อน
ความเข้ากันได้ควรได้รับการพิจารณาในเบราว์เซอร์เมื่อพิจารณาว่าล้อเลื่อนขึ้นหรือลง ตอนนี้ Firefox ใช้รายละเอียดในห้าเบราว์เซอร์ที่สำคัญ (เช่นโอเปร่า, Safari, Firefox, Chrome) และอีกสี่หมวดหมู่ใช้ Wheeldelta; ทั้งสองมีความไม่สอดคล้องกันในแง่ของค่าซึ่งหมายความว่าความหมายนั้นสอดคล้องกัน รายละเอียดและ Wheeldelta ใช้ค่าสองค่าแต่ละรายละเอียดจะใช้เวลา± 3, Wheeldelta ใช้เวลา± 120 เท่านั้นโดยที่ตัวเลขบวกจะถูกแสดงเป็น UP และตัวเลขลบจะถูกแสดงเป็นลง
รหัสเฉพาะมีดังนี้:
การคัดลอกรหัสมีดังนี้:
<label for = "wheeldelta"> ค่าเลื่อน: </label> (เช่น/opera) <อินพุต type = "text" id = "wheeldelta"/>
<label for = "รายละเอียด"> ค่าสกรอลล์: (firefox) </label> <อินพุต type = "text" id = "รายละเอียด"/>
<script type = "text/javascript">
var scrollfunc = function (e) {
E = E || window.event;
var t1 = document.getElementById ("Wheeldelta");
var t2 = document.getElementById ("รายละเอียด");
if (E.WheelDelta) {// ie/opera/chrome
t1.value = E.wheeldelta;
} อื่นถ้า (e.detail) {// firefox
t2.value = e.detail;
-
-
/*ลงทะเบียนเหตุการณ์*/
if (document.addeventListener) {
Document.addeventListener ('Dommousescroll', Scrollfunc, False);
} // w3c
window.onmousewheel = document.onmousewheel = scrollfunc; // ie/opera/chrome
</script>
โดยเรียกใช้รหัสด้านบนเราจะเห็น:
การคัดลอกรหัสมีดังนี้:
ในเบราว์เซอร์ที่ไม่ใช่ Firefox ค่าที่ส่งคืนโดยการเลื่อนล้อเลื่อนขึ้นคือ 120 และค่าที่ส่งคืนโดยการเลื่อนลงคือ -120
ในเบราว์เซอร์ Firefox ค่าที่ส่งคืนโดยการเลื่อนล้อเลื่อนขึ้นคือ -3 และค่าที่ส่งคืนโดยการเลื่อนลงคือ 3
ส่วนรหัสมีดังนี้: E.Wheeldelta กำหนดว่าเป็นเบราว์เซอร์ที่ไม่ใช่ Firefox และ E.Detail เป็นเบราว์เซอร์ Firefox
if (E.WheelDelta) {// ie/opera/chrome
t1.value = E.wheeldelta;
} อื่นถ้า (e.detail) {// firefox
t2.value = e.detail;
-
PS: ที่นี่ฉันขอแนะนำเครื่องมือค้นหาออนไลน์เกี่ยวกับเหตุการณ์ JS ซึ่งสรุปประเภทเหตุการณ์ที่ใช้กันทั่วไปและฟังก์ชั่นฟังก์ชั่นของ JS:
รายการเหตุการณ์และฟังก์ชั่น JavaScript ทั้งหมด:
http://tools.vevb.com/table/javascript_event