js获得圆的中心点和利用父级中心点设置子级圆的位置

weixin_30667649

于 2016-09-26 11:05:00 发布

阅读量302

点赞数

原文链接：http://www.cnblogs.com/scjh/p/5908403.html

版权

// 算出圆的中心点
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));

注：

结构：

　</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);
}

转载于:https://www.cnblogs.com/scjh/p/5908403.html