前端基本功---webAPI（6）----案例

1、复习回顾

2、offset系列

3、client系列

4、scroll系列

  
  
  



  

    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
   
  

5、三大系列总结

6、浏览器可视区的大小

7、浏览器中整个页面滚动出去的距离

8、拖拽案例

  
  
  



  注册信息


  
注册信息 (可以拖拽)
    【关闭】
  
  

9、弹出层拖拽案例

  
  
  



  

    
    点击，弹出登录框
  
  

    
登录会员
      
        关闭
      
    
    

      

        用户名：
        
      
      

        登录密码：
        
      
    
    

      登录会员
    
  
  
  

10、放大镜

    
    
    
    



    

        

            
            

        
        

            
        
    









css:

* {
  margin: 0;
  padding: 0;
}

.box {
  width: 350px;
  height: 350px;
  margin: 100px;
  border: 1px solid #ccc;
  /*position: relative;*/
}

.big {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 360px;
  border: 1px solid #ccc;
  overflow: hidden;
  display: none;
}

.big img {
  position: absolute;
}

.mask {
  width: 175px;
  height: 175px;
  background: rgba(255, 255, 0, 0.4);
  position: absolute;
  top: 0px;
  left: 0px;
  cursor: move;
  display: none;
}

.small {
  position: relative;
}

11、放大镜案例中的问题

12、扩展