บทความนี้จะแนะนำวิธีการนำรูปภาพไปใช้ใน js เพื่อติดตามการเคลื่อนไหวของเมาส์ ต่อไปนี้เป็นวิธีการนำไปใช้ 2 วิธี ฉันหวังว่ามันจะเป็นประโยชน์กับเพื่อน ๆ ที่ต้องการ
ต่อไปนี้เป็นวิธีการใช้งานสองวิธี:
วิธีแรก
<!DOCTYPE html>
<html>
<หัว>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
ตำแหน่ง: คงที่;
ซ้าย: 0px;
ด้านบน: 0px;
-
</สไตล์>
</หัว>
<ร่างกาย>
<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 = เพจเอ็กซ์;
img.style.top = หน้า;
-
</สคริปต์>
</ร่างกาย>
</html>
ประเภทที่สอง
<!DOCTYPE html>
<html>
<หัว>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
ตำแหน่ง: แน่นอน;
ความกว้าง: 80px;
-
</สไตล์>
</หัว>
<ร่างกาย>
<img src="shadow puppet.jpg" id="img">
<script type="text/javascript">
window.onmousemove = ฟังก์ชั่น (e) {
var x = e.pageX;
var y = e.pageY;
img.style.left = x+'px';
img.style.top = y+'px';
-
</สคริปต์>
</ร่างกาย>
</html> 
คำแนะนำที่เกี่ยวข้อง: [วิดีโอสอน JavaScript]
ด้านบนคือรายละเอียดสองวิธีในการใช้ js เพื่อนำรูปภาพไปใช้ตามการเคลื่อนไหวของเมาส์ สำหรับข้อมูลเพิ่มเติม โปรดอ่านบทความอื่นๆ ที่เกี่ยวข้องบนเว็บไซต์ PHP Chinese!
