1.offset家族

◆offsetWidth和offsetHeight表示盒子真实的宽度高度，这个真实的宽度包括 四周的边框、四周的padding、及定义的宽度高度或内容撑开的高度和宽度，可以用来检测盒子实际的大小，属性也是只读不可写的，返回的是不带单位的数值，返回值为number类型。

◆offsetLeft和offsetTop表示当前盒子在定位后距离定位了的父容器的左偏移与上偏移，该属性是只读的不能写，如果父容器没有定位属性（主要是非静态定位），那么就以距离自己最近的父系的非静态定位的盒子为基准，其实和样式中的非静态定位一样的，实在找不到就以浏览器的起始点为基准，所以也许浏览器的起始点是用了非静态定位的，offsetLeft和offsetTop如果在当前盒子没有定位时，那么就默认一浏览器的起始点为基准了，返回的是不带单位的数值，返回值为number类型。

◆offsetParent表示当前盒子距离最近的父系非静态的定位盒子元素，offsetParent返回的是一个元素节点，如果父系盒子中都没有非静态定位，那么就默认返回body节点了。

◆

2.非静态定位小知识

◆给元素添加非静态定位的定位属性时，你如果不设置它的left和top或者bottom再或者right属性时，他就装作以标准文档流的方式找个位置待着，但是它的确不占空间，很像是左浮动，也许非静态定位不设置left、top、right、bottom属性时就等于float:left;，定位的时候left、top、right、bottom属性不会计算非静态定位的父容器的边框，而是从父容器去除边框之后才正式开始计算的，但是自己如果是有边框的话，会以自己边框最外层作为left、top、right、bottom的起始点也就是（0，0）点，会以这个点与父容器去除边框后的（0，0）点重合，只再根据left、top、right、bottom来确定位置。

3.offsetLeft和style.left的区别

◆offsetLeft只读，style.left可读可写。

◆在没有设置行内样式定位等属性时，style.left能获取到的只是空字符串，而offsetLeft能够获取真实的偏移值。

◆在设置了行内样式定位等属性时，style.left获取到的只是带有单位的字符串如果200px，而offsetLeft获取还是真实的偏移值如200，offsetLeft获取到的是number类型的数字。

◆offsetLeft在当前盒子不处于定位的状态下也能够针对浏览器的起始点来确定偏移值，而style.left在那个时候只能够获取空字符串。

★相同点，在定位的时候二者一样的，都不会去计算非静态定位的父容器的边框，无论边框多大，都是从padding开始算起的，那个时候style.left去掉单位转换为数字就等于offsetLeft了。

4.使用offsetLeft和style.left来DIY动画

◆基础的闪动与匀速移动效果

    
            瞬间闪动匀速运动
    
    

◆封装基础的匀速动画简单版

    
            
    
    
     
        
      移动到200        
      移动到400        
      
    
     
    
     
    

◆封装基础的匀速动画正常版

    
            
    
    
     
        
      移动到200        
      移动到400        
      
        
      
    
     
    
     
    

5.图片轮播基础之匀速轮播

◆使用封装的匀速动画来DIY滑动轮播图，也就是鼠标移动到123456这些数字上后，图片以匀速滑动的方式进行切换。

    
            
    
    
     
        
      
            
       
            
       
            
       
            
       
            
       
        
      
        
      
            
       1            
       2            
       3            
       4            
       5        
      
    
     
    

◆使用封装的匀速动画来DIY左右轮播图，也就是点击左右按钮的时候，图片左右匀速切换。

    
            
    
    
     
        
      
            
       
            
       
            
       
            
       
            
       
        
      
        
      
            
       <            
       >        
      
    
     
    

◆使用封装的匀速动画来DIY无缝轮播图，轮播的本质就是来回移动图片的位置，无缝轮播其实是多加了一张图片在最后面，当你切换到最后一张图片时，最后一张图片再往后切换时，实际上会瞬间切换到第一张然后再继续切换匀速切换到第二张，因为最后一张和第一张一模一样，所以瞬间切换的过程根本看不出来，所以就像很完整的无缝轮播了。

    
            
    
    
     
        
      
            
       
            
       
            
       
            
       
            
       
            
       
        
      
        
      
            
       
1
            
       
2
            
       
3
            
       
4
            
       
5
        
      
        
      
            
       <            
       >        
      
    
     
    

◆在使用定时器的时候，最好让每一个定时器的编号都独立起来，这样就不容易出现关闭定时器时把别的定时器给关掉了，如给被一个元素弄一个timer属性，当给这个元素设置定时器时就能够让这个元素独享一个定时器了，不会把其它定时器给关掉，定时器的编号timer不要是全局的，否则就会出现关闭定时器时把最后一个定时器关闭，而其他定时器无法关闭。

◆谷歌浏览器的小bug，就是当你给页面元素定位为0时，你会发现，如果让style.left增加，第二次的时候，你会发现offsetLeft会比style.left多1，这个bug会导致动画比你预期的要难，就是根本停不下来，原因是你在轮播之后让页面进行缩放了，才导致这个现象发生。