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

时间: 2024-08-09 19:50:29

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

js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)

网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;(点击查看大图) 网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);(点击查看大图)有没有发现,offsetWidth和clientWidth的区别,offsetWidt是连滚动条一起包含在内的. 网页正文全文宽: documen

CSS Sprites技术(将背景图整合到一张图中,再利用CSS背景图片定位到要显示的位置)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

js中对style中的多个属性进行设值

js中对style中的多个属性进行设值: 看一下案例自然就明白: document.getElementById("my_wz1").style.cssText="background:#fff ; border-left: 1px solid #ccc;border-right: 1px solid #ccc;  margin-left: -1px;"; jquery 对css中多个属性设值 css({"propertyname":"

利用索引数组排序 不改变原数组值的位置

1.定义一个和要排序数组a[10]长度一样的数组, 这里定义为10,index[10] = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9},值为10个下标. 2. 用冒泡排序,索引值代替小下标即可 #include "stdafx.h" int _tmain(int argc, _TCHAR* argv[]) { int a[10] = {4, 2, 1, 6, 7, 9, 0, 3, 5, 8}; int index[10] = {0, 1, 2, 3, 4, 5, 6

js和jquery获取父级元素、子级元素、兄弟元素的方法(转)

先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 原生的JS获取ID为test的元素下的子元素.可以用: 比如: <div id="dom"> <div></div> <div></div> <div></div> </div> var a = docu

js ShowDialogModal 关闭子页面并刷新父页面,保留查询条件

不知道大家有没有碰到类似的问题,当时的你是什么思路来处理这个问题呢?是url,session,cookie,还是…… 今天笔者就遇到了这个问题,当时的想法如:url,session,cookie都尝试过,但是总是不能达到自己理想的目的 最后,在查看网页js资料的时候,看到了用Form.控件id.Click()方法为查询添加遮罩时,有感而发,我们这关闭子页面后,在父页面刷新自己,也可以同样的方法,仅记录

js和jquery获取父级元素、子级元素、兄弟元素的方法

最近工作中总遇到取各种父啊子啊兄弟姐妹啊,每次都得查,这次整理个全乎的~ [js的获取方式] function dom(){      var a = document.getElementByIdx_x_x("dom"); var b = a.childNodes;      获取a的全部子节点      var c = a.parentNode;     获取a的父节点      var d = a.nextSbiling;     获取a的下一个兄弟节点      var e =

js小练习——在页面中点击哪里,哪里出现div(圆)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点哪,哪出15*15的圆型div</title> <style type="text/css"> html,body{ height: 100%; margin: 0; padding: 0; } .yuan { width: 1

【iOS开发每日小笔记(十)】自制带圆框的头像 利用在CALayer设置“寄宿图”

这篇文章是我的[iOS开发每日小笔记]系列中的一片,记录的是今天在开发工作中遇到的,可以用很短的文章或很小的demo演示解释出来的小心得小技巧.它们可能会给用户体验.代码效率得到一些提升,或是之前自己没有接触过的技术,很开心的学到了,放在这里得瑟一下.90%的作用是帮助自己回顾.记忆.复习. 在上一篇文章中,我详细地回顾.复习了Core Graphics框架中利用Quartz 2D来绘制各种各样的图形,其实这些绘图就是绘制到了UIView的CALayer层上.这次,受到另一篇博文(http://