码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-09-26 13:12:00      阅读:203      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!