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!
![TypeScript-Einführungsvideo [kann auch ohne JavaScript-Lernen verstanden werden]](https://img.php.cn/upload/course/000/000/068/6242c0fc4be39373.png)
![Praktische Entwicklung einer Nachahmung der Meituan APP [Ein unverzichtbares JavaScript-Projekt für Front-End-Programmierer]](https://img.php.cn/upload/course/000/000/068/6242bebc05ca9210.png)
![Grundlegende JavaScript-Syntax [dom|bom|es6 neue Syntax|jQuery|Datenvisualisierungs-Echarts]](https://img.php.cn/upload/course/000/000/068/6242bb730fb11708.png)
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
