Artikel ini membagikan kode contoh efek khusus mouse JS untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Contoh 1: Nonaktifkan tombol mouse kanan
<script type = "text/javascript"> // Tentukan panggilan balik untuk tombol mouse dokumen dokumen.onmousedown = function (event) {// Tentukan apakah nilai acara tersebut klik kanan if (event.button == 2) {waspada ('Nonaktifkan Kanan!'); // minta pengguna untuk menonaktifkan klik kanan}} </script>0 Tidak ada tombol tekan
1 Tekan tombol kiri
2 Tekan tombol kanan
3 Tekan tombol kiri dan kanan
4 Tekan tombol Tengah
5 Tekan tombol kiri dan tengah
6 Tekan tombol kanan dan tengah
7 Tekan Semua Kunci
Contoh 2: Tentukan bentuk pointer mouse secara dinamis
<script type = "text/javaScript"> // menginisialisasi fungsi bentuk mouse initmouse () {// Dapatkan dom target melalui nama tag. Jika ini adalah halaman web lengkap, Anda dapat menggunakan body var pdom = document.getElementsbyTagname ("p") [0]; // Ubah bentuk pointer mouse dari gaya, pointer adalah bentuk pdom hand.style.cursor = 'pointer'; } </script>Nama Atribut Kode
Kursor Gaya Panah Default: Default
Kursor Bentuk Tangan: Pointer
Kursor Bentuk Tangan: Tangan
Pindahkan kursor panah silang: Pindah
Membantu kursor tanda tanya: membantu
Crosshair Cursor: Crosshair
Kursor Teks/Editor: Teks
Tidak dapat melepaskan (menonaktifkan) kursor: no-drop
Nonaktifkan kursor: Tidak diizinkan
Kursor Otomatis: Otomatis
Kursor: Kemajuan
Ubah Ukuran Kursor Atas: N-Ressize
Ubah Kursor Ukuran Down: S-Ressize
Ubah Ukuran ke Kursor Kiri: W-Ressize
Ubah Ukuran ke Kursor Kanan: E-Ressize
Ubah Ukuran Kursor Kiri: NW-Ressize
Ubah Ukuran ke Kursor Kiri: SW-Ressize
Ubah Ukuran Kursor Kanan: NE-Ressize
Ubah Ukuran ke Kursor ke bawah kanan: Se-ressize
Contoh 3: Perubahan ukuran font saat mouse masuk dan keluar
<script type = "text/javascript"> // pindahkan pointer mouse ke function mover (pDom) {pdom.style.fontsize = '20px'; // Ubah ukuran font ukuran menjadi 20 piksel} // pindahkan fungsi pointer mouse mout (pdom) {pdom.style.fontsize = ''; // Ubah Ubah Ukuran Font menjadi Default} </script> <!-Tentukan suatu area-> <p style = "margin: 5px auto; lebar: 100px; tinggi: 100px; perbatasan: 1px solid black;" onmouseover = "penggerak (ini);" onmouseout = "mout (this);"> pindahkan mouse ke area ini </p>Contoh 4:
<script type = "text/javascript"> var nowpos; // posisi saat ini var mytimer; // Fungsi variabel timer startit () {// Mulai fungsi // Mulai timer, dalam 10 milidetik myTimer = window.setInterval ("scrollpage ()", 10); } // stop function function stopit () {// batal timer clearInterval (myTimer); } // Gulir fungsi fungsi scrollpage () {window.scrollby (0,1); // gulir dalam satu piksel} document.onmousedown = stopit; // Snap klik Event document.ondblClick = startIt; // Dengarkan acara klik dua kali </script>Contoh 5: Warna yang berbeda muncul di tautan dengan mouse
<script type = "text/javascript"> // Tentukan fungsi acara mouseover definelinkColor () {// Dapatkan dom dari semua tautan di halaman web var linkdoms = document.geteLementsbyTagname ("a"); // Transfer tautan dom untuk (var i = 0; i <linkdoms.length; i ++) {// Tentukan callback acara untuk setiap tautan linkdoms tautan [i] .onmouseover = function () {this.style.color = 'merah'; // ubah gaya warna untuk tautan} saat ini tautan [i] .onmouseout = function () {this.style.color = ''; // Kembalikan default}}}} </script>Contoh 6: Nonaktifkan katrol tikus
<script type = "text/javascript"> function init () {// mendefinisikan kembali fungsi callback acara dari sliding katrol dokumen dari katley document.onmouseWheel = function () {alert ('gunakan katrol adalah dilarang'); // Pengguna diminta untuk tidak menggunakan Pulley Return False; // Kembalikan false, tidak ada yang dilakukan (kalimat ini tidak boleh dilewatkan, jika tidak itu akan tetap menggulir)}; } </script>Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.