cari

Rumah >hujung hadapan web >tutorial js >Dua cara untuk melaksanakan imej yang mengikuti pergerakan tetikus menggunakan js

Dua cara untuk melaksanakan imej yang mengikuti pergerakan tetikus menggunakan js

藏色散人
藏色散人ke hadapan
2022-08-07 10:09:153509semak imbas

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!

JavaScript JS
Kenyataan：
Artikel ini dikembalikan pada:csdn.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Penjelasan terperinci tentang objek acara, objek sumber acara dan aliran acara dalam jsArtikel seterusnya：Penjelasan terperinci tentang objek acara, objek sumber acara dan aliran acara dalam js

Artikel berkaitan

Lihat lagi