Artikel ini akan memperkenalkan kepada anda cara melaksanakan gambar dalam js untuk mengikut pergerakan tetikus. Saya harap ia dapat membantu rakan-rakan yang memerlukan.
Berikut ialah dua kaedah pelaksanaan:
Kaedah pertama
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
position: fixed;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<img src="icon_2.png" >
<script type="text/javascript">
var img = document.querySelector('img');
// mousemove鼠标移动事件
document.addEventListener('mousemove',function(e){
var pagex = e.pageX-20+'px';
var pagey = e.pageY-20+'px';
// console.log(pagex,pagey);
img.style.left = pagex;
img.style.top = pagey;
})
</script>
</body>
</html>
Jenis kedua
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
position: absolute;
width: 80px;
}
</style>
</head>
<body>
<img src="皮影.jpg" id="img">
<script type="text/javascript">
window.onmousemove = function(e){
var x = e.pageX;
var y = e.pageY;
img.style.left = x+'px';
img.style.top = y+'px';
}
</script>
</body>
</html>
Cadangan berkaitan: [Tutorial video JavaScript]
Atas ialah kandungan terperinci Dua cara untuk melaksanakan imej yang mengikuti pergerakan tetikus menggunakan js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![Video pengenalan TypeScript [boleh difahami walaupun tanpa mempelajari JavaScript]](https://img.php.cn/upload/course/000/000/068/6242c0fc4be39373.png)
![Pembangunan praktikal APP Meituan tiruan [Projek JavaScript yang mesti ada untuk pengaturcara bahagian hadapan]](https://img.php.cn/upload/course/000/000/068/6242bebc05ca9210.png)
![Sintaks asas JavaScript [dom|bom|es6 sintaks baharu|jQuery|ecarta visualisasi data]](https://img.php.cn/upload/course/000/000/068/6242bb730fb11708.png)
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
