JS基础学习:轮播图完善/offset系列/图片跟随鼠标

案例:图片跟随鼠标飞



    
        
        
        
    
    
        
        
        
    


直接通过document获取元素



    
        
        啊娃娃
    
    
        
    


offset系列

offsetWidth:获取元素的宽
offsetHeight:获取元素的高
offsetLeft:获取元素距离左边的距离
offsetTop:获取元素距离上面的距离

  • 没有脱离文档流:
    offsetLeft:父级元素margin+父级元素padding+父级元素border+自己的margin
  • 脱离文档流:
    主要是自己的left和自己的margin
        

案例:完整轮播图



    
        
        
        

    
    
        
<>

案例:无缝轮播图



    
        
        
        

    
    
        

案例:淘宝轮播图



    
        
        
        

    
    
        
<>

demo地址:

  • 完整轮播图
  • 图片跟随鼠标
  • 直接通过document获取元素

你可能感兴趣的:(JS基础学习:轮播图完善/offset系列/图片跟随鼠标)