+ 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:)
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
+ 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>
Often have questions like this?
Learn more efficiently, for free:
Hot today
Sticky position
2 Votes
Help please?
3 Votes
Online voting system
2 Votes
What is that z for
0 Votes
Suggestions needed
4 Votes
SQL practice
2 Votes
Game development
0 Votes
Ruby programming?
3 Votes