元素偏移量offset 元素可视区client 元素滚动scroll 立即执行函数 mouseenter事件 动画函数封装

元素偏移量offset

element.offsetTop      返回元素相对于带有定位父元素上方的偏移       //如果没有父亲或父亲没有定位，以body为准

element.offsetLeft     返回元素相对于带有定位父元素左边框的偏移     //如果没有父亲或父亲没有定位，以body为准

element.offsetWidth       返回元素的宽度  宽度包括padding+border+width  不包含单位

element.offsetHeight      返回元素的高度  高度包括padding+border+Height 不包含单位

element.offsetParent      返回带有定位的父亲 否则返回的是body  

ParentNode                    返回父亲 是最近的父亲 亲爸爸 不i管父亲有没有定位

 

mousemove 鼠标移动事件

 

 

元素可视区 client

element.clientTop       返回元素上边框的大小     

element.clientLeft      返回元素左边框的大小    

element.clientWidth       返回元素的宽度  宽度包括padding+width  不包含单位

element.clientHeight      返回元素的高度  高度包括padding+Height  不包含单位

 

元素滚动scroll  

element.scrollTop       返回元素被卷去的上侧距离 返回数值没有单位 

element.scrollLeft      返回元素被卷去的左侧距离 返回数值没有单位 

element.scrollWidth   返回元素的宽度(内容大小)  宽度包括padding+Height  不包含单位

element.scrollHeight  返回元素的高度(内容大小)  高度包括padding+Height  不包含单位

 

 

scroll 滚动事件

页面被卷曲的头部

window.pageYoffset  元素被卷去的头部

window.pageXoffset  元素被卷去的左部

如考虑兼容性  封装函数

mouseenter事件

和mouseover 类似 

区别  mouseover 经过自身盒子会触发 经过子盒子也会触发

mouseenter 只经过自身盒子触发

立即执行函数  //不需要调用，立马能够自己执行的函数

写法  (function(){})()    (function(){}())   

特点是独立创建了一个作用域  里面所有的变量都是局部变量，不会有命名冲突