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>
<Kopf>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
Position: fest;
links: 0px;
oben: 0px;
}
</style>
</head>
<Körper>
<img src="icon_2.png" >
<script type="text/javascript">
var img = document.querySelector('img');
// Mousemove Mausbewegungsereignis 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>
Der zweite Typ
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
Position: absolut;
Breite: 80px;
}
</style>
</head>
<Körper>
<img src="shadow puppet.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]
Im Folgenden finden Sie Einzelheiten zu den beiden Methoden zur Implementierung von Bildern, die der Mausbewegung folgen. Weitere Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
