ستقدم لك هذه المقالة كيفية تنفيذ الصور في JS لتتبع حركة الماوس، وإليك طريقتين للتنفيذ وآمل أن تكون مفيدة للأصدقاء المحتاجين.
فيما يلي طريقتان للتنفيذ:
الأولى
<!DOCTYPE html>
<أتش تي أم أل>
<الرأس>
<ميتا محارف = "utf-8">
<العنوان></العنوان>
<نمط النوع = "نص/CSS">
إم جي {
الموقف: ثابت؛
اليسار: 0 بكسل؛
أعلى: 0 بكسل؛
}
</نمط>
</الرأس>
<الجسم>
<img src="icon_2.png" >
<نوع البرنامج النصي = "نص/جافا سكريبت">
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>
</الجسم>
</html>
النوع الثاني
<!DOCTYPE html>
<أتش تي أم أل>
<الرأس>
<ميتا محارف = "utf-8">
<العنوان></العنوان>
<نمط النوع = "نص/CSS">
إم جي {
الموقف: مطلق؛
العرض: 80 بكسل؛
}
</نمط>
</الرأس>
<الجسم>
<img src="shadow puppet.jpg" id="img">
<نوع البرنامج النصي = "نص/جافا سكريبت">
window.onmousemove = وظيفة(ه){
فار x = e.pageX;
var y = e.pageY;
img.style.left = x+'px';
img.style.top = y+'px';
}
</script>
</الجسم>
</html> 
التوصيات ذات الصلة: [برنامج تعليمي لفيديو JavaScript]
ما ورد أعلاه هو تفاصيل طريقتين لاستخدام js لتنفيذ الصور التي تتبع حركة الماوس. لمزيد من المعلومات، يرجى الانتباه إلى المقالات الأخرى ذات الصلة على موقع PHP الصيني!
