本文共 3177 字，大约阅读时间需要 10 分钟。

特效

偏移量

• offsetParent用于获取定位的父级元素
• offsetParent和parentNode的区别

var box = document.getElementById('box');console.log(box.offsetParent);console.log(box.offsetLeft);console.log(box.offsetTop);console.log(box.offsetWidth);console.log(box.offsetHeight);

客户区大小

var box = document.getElementById('box');console.log(box.clientLeft);console.log(box.clientTop);console.log(box.clientWidth);console.log(box.clientHeight);

滚动偏移

var box = document.getElementById('box');console.log(box.scrollLeft)console.log(box.scrollTop)console.log(box.scrollWidth)console.log(box.scrollHeight)

案例

• 匀速动画函数

• 变速动画函数

• 回到顶部
• 无缝轮播图
  • 简单轮播图

  
       
   
  
    
         
     
      
      
      
      
      
      
      
      
      
      
      
      
    
     
    
     
      
      1      
      2      
      3      
      4      
      5      
      6    
     
  
    
   

• 左右焦点轮播图

  
       
   
  
    
    
     
      
      
      
      
      
      
      
      
      
      
    
     
  
    
      
    
     <
     >  
    
   

• 无缝连接的轮播图

• 完整的轮播图

  
       
   
  
    
         
     
      
      
      
      
      
      
      
      
      
      
    
     
    
     
    
     
  
    
  
    
     <
     >
    
   

• 模拟滚动条

  
       
   
  
    
         床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头    床前明月光啊，明月光，疑是地上霜啊，举头嘿嘿  
    
      
    
         
     
       
    
   

• 拖拽案例

  
       
   
    点击，弹出登录框
   
   
  
    
     登录会员    
     关闭
    
  
    
    
     
      
      用户名：      
          
     
    
     
      
      登录密码：      
          
     
  
    
  
    
     登录会员
    
   
   
   
   

• 放大镜案例

附录

元素的类型