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

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

藏色散人

Libérer： 2022-08-07 10:09:15

avant

3448 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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