suchen

Heim  >  Artikel  >  Web-Frontend  >  Zwei Möglichkeiten, mit js Bilder zu implementieren, die der Mausbewegung folgen

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

藏色散人
藏色散人nach vorne
2022-08-07 10:09:153480Durchsuche

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>

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>

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!

JavaScript JS
Stellungnahme：
Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Eine detaillierte Erklärung von Ereignisobjekten, Ereignisquellobjekten und Ereignisströmen in jsNächster Artikel：Eine detaillierte Erklärung von Ereignisobjekten, Ereignisquellobjekten und Ereignisströmen in js

In Verbindung stehende Artikel

Mehr sehen