Zwei Möglichkeiten, mit js Bilder zu implementieren, die der Mausbewegung folgen-js-Tutorial-php.cn

Zwei Möglichkeiten, mit js Bilder zu implementieren, die der Mausbewegung folgen

藏色散人

Freigeben： 2022-08-07 10:09:15

nach vorne

3448 Leute haben es durchsucht

In diesem Artikel erfahren Sie, wie Sie Bilder in js implementieren, um der Bewegung der Maus zu folgen. Ich hoffe, dass dies für Freunde in Not hilfreich ist.

Hier sind zwei Implementierungsmethoden:

Die erste

<!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>

Nach dem Login kopieren

Die zweite

<!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>

Nach dem Login kopieren

Verwandte Empfehlungen: [JavaScript-Video-Tutorial]

Das obige ist der detaillierte Inhalt vonZwei Möglichkeiten, mit js Bilder zu implementieren, die der Mausbewegung folgen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!