Maison > Article > interface Web > Deux façons d'implémenter des images qui suivent le mouvement de la souris en utilisant js

Deux façons d'implémenter des images qui suivent le mouvement de la souris en utilisant js

藏色散人avant: 2022-08-07 10:09:153449parcourir

Cet article vous présentera comment implémenter des images en js pour suivre le mouvement de la souris. Voici deux méthodes d'implémentation. J'espère que cela sera utile aux amis dans le besoin !

Voici deux méthodes d'implémentation :

La première

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

La seconde

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

Recommandations associées : [Tutoriel vidéo JavaScript]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript JS

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Une explication détaillée des objets d'événement, des objets sources d'événements et des flux d'événements dans jsArticle suivant：Une explication détaillée des objets d'événement, des objets sources d'événements et des flux d'événements dans js

Articles Liés

Voir plus