บทความนี้แชร์รหัสตัวอย่างเอฟเฟกต์พิเศษของเมาส์ JS สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
ตัวอย่างที่ 1: ปิดการใช้งานปุ่มเมาส์ขวา
<script type = "text/javascript"> // กำหนดการโทรกลับสำหรับปุ่มเมาส์ของเอกสารเอกสาร onmousedown = ฟังก์ชั่น (เหตุการณ์) {// กำหนดว่าค่าของเหตุการณ์คือคลิกขวาถ้า (event.button == 2) {แจ้งเตือน ('ปิดการคลิกขวา!'); // แจ้งให้ผู้ใช้ปิดใช้งานคลิกขวา}} </script>0 ไม่มีปุ่มกด
1 กดปุ่มซ้าย
2 กดปุ่มขวา
3 กดปุ่มซ้ายและขวา
4 กดปุ่มกลาง
5 กดปุ่มซ้ายและกลาง
6 กดปุ่มขวาและกลาง
7 กดปุ่มทั้งหมด
ตัวอย่างที่ 2: กำหนดรูปร่างตัวชี้เมาส์แบบไดนามิกแบบไดนามิก
<script type = "text/javascript"> // เริ่มต้นฟังก์ชันรูปร่างเมาส์ initmouse () {// รับ Dom เป้าหมายผ่านชื่อแท็ก หากเป็นเว็บเพจแบบเต็มคุณสามารถใช้ body var pdom = document.getElementsByTagname ("P") [0]; // แก้ไขรูปร่างตัวชี้เมาส์ของสไตล์ตัวชี้เป็นรูปร่างของมือ pdom.style.cursor = 'ตัวชี้'; } </script>รหัสแอตทริบิวต์ชื่อ
เคอร์เซอร์สไตล์ลูกศรเริ่มต้น: ค่าเริ่มต้น
เคอร์เซอร์รูปร่างมือ: ตัวชี้
เคอร์เซอร์รูปร่างมือ: มือ
ย้ายเคอร์เซอร์ข้ามลูกศร: ย้าย
ช่วยคำถามทำเครื่องหมายเคอร์เซอร์: ช่วย
Crosshair Cursor: Crosshair
เคอร์เซอร์ข้อความ/ตัวแก้ไข: ข้อความ
ไม่สามารถปล่อยเคอร์เซอร์ (ปิดการใช้งาน): ไม่วาง
ปิดการใช้งานเคอร์เซอร์: ไม่อนุญาต
เคอร์เซอร์อัตโนมัติ: อัตโนมัติ
เคอร์เซอร์: ความคืบหน้า
เปลี่ยนขนาดเคอร์เซอร์ขึ้นด้านบน: N-Resize
เปลี่ยนขนาดเคอร์เซอร์ลง: S-Resize
เปลี่ยนขนาดเป็นเคอร์เซอร์ด้านซ้าย: W-Resize
เปลี่ยนขนาดเป็นเคอร์เซอร์ด้านขวา: อิเล็กทรอนิกส์
เปลี่ยนขนาดเคอร์เซอร์ซ้าย: NW-Resize
เปลี่ยนขนาดลงเป็นเคอร์เซอร์ด้านซ้าย: SW-Resize
เปลี่ยนขนาดเคอร์เซอร์ขวา: NE-Resize
เปลี่ยนขนาดเป็นเคอร์เซอร์ลงด้านขวา: SE-Resize
ตัวอย่างที่ 3: การเปลี่ยนแปลงขนาดตัวอักษรเมื่อเมาส์เข้าและออก
<script type = "text/javascript"> // ย้ายตัวชี้เมาส์ไปยังฟังก์ชัน Mover (pdom) {pdom.style.fontsize = '20px'; // ปรับขนาดขนาดตัวอักษรเป็น 20 พิกเซล} // เลื่อนฟังก์ชั่นตัวชี้เมาส์ออกมาฟังก์ชั่น mout (pdom) {pdom.style.fontsize = ''; // ปรับขนาดขนาดตัวอักษรเป็นค่าเริ่มต้น} </script> <!-กำหนดพื้นที่-> <p style = "ระยะขอบ: 5px auto; ความกว้าง: 100px; ความสูง: 100px; เส้นขอบ: 1px ของแข็งดำ;" onMouseOver = "ผู้เสนอญัตติ (นี่);" onMouseOut = "mout (นี่);"> ย้ายเมาส์ไปยังพื้นที่นี้ </p>ตัวอย่างที่ 4:
<script type = "text/javascript"> var nowpos; // ตำแหน่งปัจจุบัน var mytimer; // ฟังก์ชั่นตัวแปรตัวจับเวลา startit () {// เริ่มต้นฟังก์ชั่น // เริ่มจับเวลาใน 10 มิลลิวินาที myTimer = window.setInterval ("scrollpage ()", 10); } // ฟังก์ชั่นฟังก์ชั่นหยุด () {// ยกเลิกตัวจับเวลา ClearInterval (MyTimer); } // ฟังก์ชั่นฟังก์ชั่นการเลื่อนสกรอลหน้า () {window.scrollby (0,1); // เลื่อนในหนึ่งพิกเซล} document.onmousedown = Stopit; // snap เอกสารเหตุการณ์คลิก ondblclick = startit; // ฟังเหตุการณ์ดับเบิลคลิก </script>ตัวอย่างที่ 5: สีต่าง ๆ ปรากฏบนลิงค์ด้วยเมาส์
<script type = "text/javascript"> // กำหนดฟังก์ชั่นเหตุการณ์ mouseover definelinkColor () {// รับ DOM ของลิงก์ทั้งหมดในเว็บเพจ var linkdoms = document.getElementByTagname ("A"); // transf ลิงก์ dom สำหรับ (var i = 0; i <linkdoms.length; i ++) {// กำหนดการโทรกลับเหตุการณ์สำหรับแต่ละลิงก์ mouseover linkdoms [i] .onmouseover = function () {this.style.color = 'red'; // เปลี่ยนสไตล์สีสำหรับลิงค์ปัจจุบัน} linkdoms [i] .onmouseout = function () {this.style.color = ''; // คืนค่าเริ่มต้น}}}} </script>ตัวอย่างที่ 6: ปิดการใช้งานรอกเมาส์
<script type = "text/javascript"> function init () {// redefine ฟังก์ชั่นการเรียกกลับเหตุการณ์ของการเลื่อนรอกของเอกสารของเอกสาร pulleys.onmousewheel = function () {การแจ้งเตือน ('ใช้รอกถูกห้าม'); // ผู้ใช้ได้รับแจ้งว่าไม่ใช้ Pulleys Return False; // return false ไม่มีอะไรทำ (ประโยคนี้ไม่ควรพลาดมิฉะนั้นจะยังคงเลื่อน)}; } </script>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น