Cet article vous présentera comment implémenter des images en js pour suivre le mouvement de la souris. 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>
<tête>
<méta charset="utf-8">
<titre></titre>
<style type="text/css">
img{
poste : fixe ;
gauche : 0px ;
haut : 0px ;
}
</style>
</tête>
<corps>
<img src="icon_2.png" >
<script type="text/javascript">
var img = document.querySelector('img');
// événement de mouvement de la souris 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>
</corps>
</html>
Le deuxième type
<!DOCTYPE html>
<html>
<tête>
<méta charset="utf-8">
<titre></titre>
<style type="text/css">
img{
position : absolue ;
largeur : 80px ;
}
</style>
</tête>
<corps>
<img src="shadow puppet.jpg" id="img">
<script type="text/javascript">
window.onmousemove = fonction(e){
var x = e.pageX;
var y = e.pageY;
img.style.left = x+'px';
img.style.top = y+'px';
}
</script>
</corps>
</html> 
Recommandations associées : [Tutoriel vidéo JavaScript]
Ce qui précède présente les détails des deux méthodes d'utilisation de js pour implémenter des images qui suivent le mouvement de la souris. Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !
