+ 2

Circle following mouse

is it any ways that you make a circle follow yoyr mouse? please tell me how or help me:p im kinda new to this and im trying to make a small game! ask if you have any more questions abaut it:)

26th Nov 2016, 1:05 AM
SickNick - avatar
2 Answers
+ 4
<div id="circle"></div> style: #circle{ width: 100px; height: 100px; position: absolute; z-inde x: 1; display: block; background: blue; top: 0px; left: 0px; border-radius: 100% } script: window.onmousemove=function(e){ var circle=document.getElementByI d("circle"); circle.style.left=e.pageX+"px."; circle.style.right=e.pageY+"px"; } to work inside box you should use client x and also you can remove offset from it and it is good to put in onload listener see vasilly s method too
26th Nov 2016, 2:40 AM
Sandeep Chatterjee
+ 2
Here is simple snippet : <!DOCTYPE html> <html> <head> <title>box-shadow-experiment</title> <style type="text/css"> #box-shadow-div{ position: fixed; width: 1px; height: 1px; border-radius: 100%; background-color:black; box-shadow: 0 0 10px 10px black; top: 49%; left: 48.85%; } </style> <script type="text/javascript"> window.onload = function(){ var bsDiv = document.getElementById("box-shadow-div"); var x, y; // On mousemove use event.clientX and event.clientY to set the location of the div to the location of the cursor: window.addEventListener('mousemove', function(event){ x = event.clientX; y = event.clientY; if ( typeof x !== 'undefined' ){ bsDiv.style.left = x + "px"; bsDiv.style.top = y + "px"; } }, false); } </script> </head> <body> <div id="box-shadow-div"></div> </body> </html>
26th Nov 2016, 1:38 AM
Vasiliy Nadolskiy
Vasiliy Nadolskiy - avatar