Home > Developer > Web Develop
Figure out the center point of the Circle
function Circlecenter (obj) {
var centerpointerleft = obj.offsetleft + obj.offsetwidth/2;
var centerpointertop = obj.offsettop + obj.offsetheight/2;
return {left:centerpointerleft, top:centerpointertop};
}
Console.log (Circlecenter (wrap));
Setting up the Center
function SetCenter (obj, point) {
Obj.style.left = POINT.LEFT-OBJ.OFFSETWIDTH/2-Obj.parentNode.offsetLeft + "px";
Obj.style.top = POINT.TOP-OBJ.OFFSETHEIGHT/2-Obj.parentNode.offsetTop + "px";
}
SetCenter (box, Circlecenter (Wrap));
Note:
Structure:
<body>
<div id= "Wrap" >
<div id= "box" ></div>
</div>
</body>
Style:
#wrap {
width:300px;
height:300px;
border-radius:300px;
position:relative;
Background:rgb (168, 218, 219);
}
#box {
width:30px;
height:30px;
border-radius:100px;
Position:absolute;
Background:rgb (226, 181, 219);
}
JS gets the center point of the circle and sets the position of the child circle using the parent center point
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
