Artikel ini menjelaskan metode JS untuk memindahkan teks dengan mouse. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
Ini adalah kode fitur mouse yang sangat sederhana. Saat memindahkan mouse pada halaman web, mouse dipindahkan oleh serangkaian teks mengikuti mouse.
Salin kode sebagai berikut: <Html>
<head>
<type style = "text/css">
.spanstyle {
Warna: 000000; Ukuran font: 10pt; Posisi: Absolute; Atas: -50px; Visibilitas: Terlihat
}
</tyle>
<script>
var x, y
var step = 18 // Ini adalah interval antara dua karakter yang berdekatan
Var Flag = 0
var message = "wulin.com www.vevb.com Selamat datang di kunjungan Anda!" // Letakkan teks yang perlu Anda tampilkan di sini
message = message.split ("") // Dekomposisi string menjadi array
var xpos = array baru () // Buat array untuk merekam x-koordinat dari setiap posisi
untuk (i = 0; i <= message.length-1; i ++) {// Tetapkan nilai awal untuk setiap elemen terlebih dahulu
xpos [i] =-50
}
var ypos = array baru () // Buat array untuk merekam koordinat y dari setiap posisi
untuk (i = 0; i <= message.length-1; i ++) {
ypos [i] =-200
}
Fungsi MoveHandler (E) {// Tangani Peristiwa Gerakan Mouse
x = (document.layers)? E.Pagex: document.body.scrollleft+event.clientx // mengarahkan posisi horizontal mouse sesuai dengan browser
y = (document.layers)? E.Pagey: document.body.scrolltop+event.clienty // Rekam posisi vertikal mouse
Bendera = 1 // Posisi mouse telah berubah dan perlu dihitung ulang
}
function makeNake () {
if (flag == 1 && document.all) {// jika itu yaitu
untuk (i = pesan.length-1; i> = 1; i--) {// memproses antrian koordinat
xpos [i] = xpos [i-1]+langkah // Pindahkan setiap data koordinat satu kisi dan tambahkan jarak karakter
ypos [i] = ypos [i-1]
}
xpos [0] = x+langkah // Tulis data baru ke dalam ekor antrian data koordinat
ypos [0] = y
untuk (i = 0; i <message.length-1; i ++) {
var thisspan = eval ("span"+(i)+". style") // menghasilkan objek operasi saat ini spanx.style
thisspan.posleft = xpos [i]
thisspan.postop = ypos [i]
}
}
lain if if (flag == 1 && document.layers) {// jika itu ns
untuk (i = pesan.length-1; i> = 1; i--) {// memproses antrian koordinat
xpos [i] = xpos [i-1]+langkah // Pindahkan setiap data koordinat satu kisi dan tambahkan jarak karakter
ypos [i] = ypos [i-1]
}
xpos [0] = x+langkah // Tulis data baru ke dalam ekor antrian data koordinat
ypos [0] = y
untuk (i = 0; i <message.length-1; i ++) {// Ubah koordinat lapisan di mana setiap kata berada sesuai dengan data array
var thispan = eval ("document.span"+i) // menghasilkan dokumen objek operasi saat ini.spanx
thisspan.left = xpos [i]
thisspan.top = ypos [i]
}
}
var timer = setTimeout ("makeNake ()", 30) // Setelah 30 milidetik, sesuaikan posisi masing -masing karakter lagi sesuai dengan situasinya.
}
</script>
</head>
<body bgcolor = "ffffff" onload = "makeNake ()">
<script>
<!- Awal JavaScript-
// Di sini kami menghasilkan rentang sebagai wadah untuk setiap kata
untuk (i = 0; i <= message.length-1; i ++) {
document.write ("<span id = 'span"+i+"' class = 'vanstyle'>")
Document.write (pesan [i])
Document.write ("</span>")
}
// Tentukan proses penanganan acara pergerakan mouse
if (document.layers) {
Document.CaptureEvents (event.mouseMove);
}
document.onmouseMove = moveHandler;
// - akhir JavaScript - ->
</script>
</body>
<br> <b> apakah efek ini sangat keren? </b> </br>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.