首页 > 代码库 > js获得圆的中心点和利用父级中心点设置子级圆的位置
js获得圆的中心点和利用父级中心点设置子级圆的位置
// 算出圆的中心点
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));
// 设置中心
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));
注：
结构：
<body>
<div id="wrap">
<div id="box"></div>
</div>
</body>
样式：
#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获得圆的中心点和利用父级中心点设置子级圆的位置