首页 > Web开发 > 详细

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

时间:2016-09-26 13:10:51      阅读:419      评论:0      收藏:0      [点我收藏+]

// 算出圆的中心点
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获得圆的中心点和利用父级中心点设置子级圆的位置

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!