DOM- offset家族及匀速运动动画六

offsetWidth和offsetHight 以及offsetLeft和offsetTop以及offsetParent
共同组成了offset家族。

offsetWidth和offsetHight(检测盒子自身宽高+padding+border)

offsetWidth = width+padding+border;
offsetHeight = Height+padding+border;




    
    
    



    

offsetLeft和offsetTop(检测距离父盒子有定位的左/上面的距离)

返回距离上级盒子(带有定位)左边s的位置
如果父级都没有定位则以body为准
offsetLeft 从父亲的padding 开始算,父亲的border 不算。
在父盒子有定位的情况下,offsetLeft == style.left(去掉px)




    
    
    


offsetParent 检测父系盒子中带有定位的父盒子节点

1、返回该对象的父级 (带有定位)
如果当前元素的父级元素没有进行CSS定位(position为absolute或 relative,fixed), offsetParent为body。
2、如果当前元素的父级元素中有CSS定位 (position为absolute或 relative,fixed),offsetParent取最近的那个父级元素。




    
    


offsetLeft和style.left的区别




    
    
    


动画封装匀速运动




    
    
    


滑动焦点图




    
    
    

    


    
1 2 3 4 5

左右焦点图



    
    无标题文档
    


< >

12-带有定时器的无缝轮播图




    
    无标题文档
    

    



< >

你可能感兴趣的:(DOM- offset家族及匀速运动动画六)