IE7以上（不是火狐）：
父级没有定位：
本身没有定位：
==> offsetParent:body
本身定位为：absolute/relative:
==> offsetParent:body
父级有定位:
本身没有定位:
==> offsetParent:定位父级
本身定位为：absolute/relative:
==> offsetParent:定位父级
本身定位为: fixed
==> offsetParent: null
火狐
父级没有定位：
本身没有定位:
==> offsetParent:body
本身定位为: absolute/relative:
==> offsetParent:body
本身定位为:fixed
==> offsetParent:body
父级有定位：
本身没有定位:
==> offsetParent:定位父级
本身定位为: absolute/relative:
==> offsetParent:定位父级
本身定位为:fixed
==> offsetParent:body
IE7以下：
父级没有定位：
本身没有定位：
==>offsetParent:body
本身定位为absolute/relative
==>offsetParent:body
本身定位为fixd
==>offsetParent:null
父级有定位：
本身没有定位：
==>offsetParent:定位父级
本身定位为absolute/relative
==>offsetParent:定位父级
本身定位为fixd
==>offsetParent:null
总结:
offsetParent有点类似CSS中的包含块的概念
offsetLeft，offsetTop 都是参照于offsetParent的内边距边界
offsetParent( 前提条件：body和html之间的margin被清掉 )
本身定位为fixed：
==> offsetParent: null( IE7以上（不是火狐） )
==> offsetParent:body(火狐浏览器)
本身定位不为fixed：
父级没有定位：
==> offsetParent：body
父级有定位：
==> offsetParent:定位父级
haslayout
IE7以下，如果当前元素的某个父级触发了haslayout，
那么offsetParent就会指向到这个layout特性的父结点上
拓展 ：
offsetWidth,offsetHeight ==> border-box
clientWidth,clientHeight ==> padding-box
js的兼容性问题：
ev || event
offsetParent
事件绑定（事件流的机制，事件委托）
鼠标滚轮事件：
非火狐：onmousewhell(dom0)
ev.whellDelta
上：正，下:负
火狐:DOMouseScroll(dom2)
ev.detail
上：负，下：正
怎么取消事件的默认行为：
dom0:return false
dom2:ev.preventDefault()
绝对位置：
到body的距离(html和body之间的margin被清除)
原生实现：while循环不断地累加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>苹果导航菜单</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body,html{
height: 100%;
overflow: hidden;
}
#div1{
100%;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}
#div1> img {
/* 64px;
height: 64px; */
border-radius: 50%;
}
</style>
<script type="text/javascript">
window.onload=function(){
var r = 200;
var obj = document.getElementById('div1');
var imgNodes = document.getElementsByTagName('img');
document.onmousemove = function(ev){
ev = ev || event;
for(var i=0;i<imgNodes.length;i++){
var a = imgNodes[i].offsetLeft + imgNodes[i].offsetWidth / 2 -ev.clientX;
var b = imgNodes[i].offsetTop+ obj.offsetTop+ imgNodes[i].offsetHeight / 2 - ev.clientY;
var c = Math.sqrt(a*a+b*b);
// var scale = 1 - c / 320;
// if(scale<0.5){
// scale = 0.5;
// }
// imgNodes[i].width = scale*128;
// imgNodes[i].height = scale*128;
if(c >= r){
c = r;
}
imgNodes[i].style.width = 200 - c * 0.6 +"px";
imgNodes[i].style.height = 200 - c * 0.6+"px";
}
}
}
</script>
<!-- <script src="js/myjs.js"></script> -->
</head>
<body>
<div id="div1">
<img src="img/1.jpg" width="80" height="80">
<img src="img/2.jpg" width="80" height="80">
<img src="img/3.jpg" width="80" height="80">
<img src="img/4.webp" width="80" height="80">
<img src="img/5.jpg" width="80" height="80">
</div>
</body>
</html>
body的offsetParent==>null
body的offsetLeft==>0
body的offsetTop==>0
原生实现的缺点：没有办法兼容border和margin
相对位置：
原生实现：
绝对位置的实现上减去滚动条滚动的距离
document.documentElement.scrollLeft || document.body.scrollLeft;(不同浏览器滚动条的父级不一样)
原生实现的缺点：没办法兼容border和margin
getBoundingClientRect（兼容性极好）
返回值：对象
{
boder-box 的宽
height:boder-box的高
// 元素border-box的左上角的相对位置
top:y,
left:x,
//元素border-box的右下角的相对位置
bottom:
right:
}
offsetWidth/Height，（可视区域）+border 即 border-box
clientWidth/Height, (可视区域 即padding-box)
获取视口的宽度：
document.documentElement.clientWidth
注意：
window.onload = function(){
//根标签的clientWidth（document.documentElement.clientWidth）并不是可视区域的宽度，而是视口的宽度
var w = document.documentElement.clientWidth;
var w2 = document.documentElement.offsetWidth;
console.log(w,w2);
}
在IE10及IE10以下 ， 根标签的 clientWidth 和 offsetWidth 统一被指定为视口的宽度。