Artikel ini akan memperkenalkan kepada Anda bagaimana mengimplementasikan gambar di js mengikuti pergerakan mouse. Berikut dua metode implementasinya, semoga bermanfaat bagi teman-teman yang membutuhkan!
Berikut adalah dua metode implementasi:
Yang pertama
<!DOCTYPE html>
<html>
<kepala>
<meta charset="utf-8">
<judul></judul>
<gaya tipe="teks/css">
gambar{
posisi: tetap;
kiri: 0 piksel;
atas: 0 piksel;
}
</gaya>
</kepala>
<tubuh>
<img src="ikon_2.png" >
<skrip tipe="teks/javascript">
var img = dokumen.querySelector('img');
// mousemove acara pergerakan mouse document.addEventListener('mousemove',function(e){
var halamanx = e.pageX-20+'px';
var halaman = e.halamanY-20+'px';
// konsol.log(halamanx,halaman);
img.style.kiri = halamanx;
img.style.top = halaman;
})
</skrip>
</tubuh>
</html>
Tipe kedua
<!DOCTYPE html>
<html>
<kepala>
<meta charset="utf-8">
<judul></judul>
<gaya tipe="teks/css">
gambar{
posisi: mutlak;
lebar: 80 piksel;
}
</gaya>
</kepala>
<tubuh>
<img src="wayang kulit.jpg" id="img">
<skrip tipe="teks/javascript">
jendela.onmousemove = fungsi(e){
var x = e.halamanX;
var y = e.halamanY;
img.style.kiri = x+'px';
img.style.top = y+'px';
}
</skrip>
</tubuh>
</html> 
Rekomendasi terkait: [Tutorial Video JavaScript]
Di atas adalah detail dari dua metode penggunaan js untuk mengimplementasikan gambar yang mengikuti gerakan mouse. Untuk informasi lebih lanjut, harap perhatikan artikel terkait lainnya di situs web PHP Mandarin!
