Farenin pozisyonunu öğrenip div etiketine yazdıran javascript programı örneği
Farenin clientX ve clientY değerlerini kullanarak nesnenin fareyi takip etmesini sağlıyoruz. Tasarımda dikkat edilmesi gereken css kısmında fareyi takip edecek olan nesnenin position:absolute olması gerekiyor. Fare konumu ile ilgili daha fazla örnek için javascript örneklerini inceleyebilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Fareyi Takip Eden Kutu</title> <style> body{ background: #3C3741; } #kutu{ background: #FD5B03; width: 200px; height: 200px; border-radius: 50%; position: absolute; } </style> </head> <body> <div id="kutu"> </div> <script> /*script etiketini body kapatma etiketinden hemen önce yazdım. hız ve nesnelerin yüklenmesi açısından kullanılan bir yöntemdir.*/ var kutu=document.getElementById("kutu"); kutu.style.position="absolute"; //nesnenin hareket edebilmesi için position değeri absolute olmak zorunda window.onmousemove=function(e){ kutu.style.left=e.clientX+"px"; kutu.style.top=e.clientY+"px"; //console.log(e.offsetX); } </script> </body> </html> |
