Rodric MacOliver
asked on
Lines between circles
The circles in this code must be linked by a line, between the center circle and the others.
The other thing that I need is that the circles created need to be just like the first one, so that I can click on them and they also show a certain number of circles without it being an exact copy (they can have a different number of circles linked to them).
Well any help would be much appreciated.
Here is the code:
The other thing that I need is that the circles created need to be just like the first one, so that I can click on them and they also show a certain number of circles without it being an exact copy (they can have a different number of circles linked to them).
Well any help would be much appreciated.
Here is the code:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Rodrigo</title>
<style type="text/css">
#circle-container {
position: relative;
width: 500px;
height: 500px;
margin: 0 auto;
border: 0px solid green;
}
.circle {
position: absolute;
width: 40px;
height: 40px;
border-radius: 40px;
background: red;
left: 230px;
top: 230px;
}
.blue {
background: blue;
}
.green {
background: green;
}
.yellow {
background: yellow;
}
.orange {
background: orange;
}
.pink {
background: pink;
}
.purple {
background: purple;
}
</style>
</head>
<body>
<div id="circle-container">
<div class="circle animate blue"></div>
<div class="circle animate green"></div>
<div class="circle animate yellow"></div>
<div class="circle animate orange"></div>
<div class="circle animate pink"></div>
<div class="circle animate purple"></div>
<div id="circle" class="circle"></div>
</div>
<script src="jquery.js"></script>
<script type="text/javascript">
var clicked = false;
var distanceToMove = 100;
$(function() {
$('#circle').click(function() {
if (clicked) return;
clicked = true;
var total_circles = $('#circle-container .circle.animate').length;
var angle = (Math.PI * 2 / total_circles)
$('#circle-container .circle.animate').each(function(indx, item) {
var top = distanceToMove * Math.cos(angle*(indx-1));
var left = distanceToMove * Math.sin(angle *(indx-1));
$(this).animate({left: "+=" + left, top: "+=" + top}, 1000);
});
});
});
</script>
</body></html>
ASKER
Tom Beck, than is just great, but when i click again on the circle it must retract...
Thanks a lot...
Thanks a lot...
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Lovely Tom, I still need something to be done but since I think its kind of different I'll be opening another question for it. Thanks a lot.
http://jsfiddle.net/yq8umq15/