JS库之Waypoints的用法详解

一款用于捕获各种滚动事件的插件?Waypoints。同时Waypoints还支持固定元素和无限滚动的功能，功力十分强大。

一、最简易的使用

  
  
  
  
    *{
      padding: 0;
      margin: 0;
    }
    #example-basic{
      height: 500px;
      text-align: center;
    }
  
  
  
  
  
  
  


  one div
  example-basic.
  one div

二、能检测鼠标滚动方向的基本应用

  
  
  
    *{
      padding: 0;
      margin: 0;
    }
    #example-basic{
      height: 500px;
      text-align: center;
    }
    .in{
      font-size: 36px;
      color: #ff0;
      background:red;
      transition:all 0.5s;
    }
  
  
  
  
  


  one div
  example-basic.
  one div

三、鼠标滚动加动画效果的应用

  
  
  
    *{
      padding: 0;
      margin: 0;
    }
    div{
      background: #eee;
    }
    .banner{
      width: 1100px;
      margin: 0 auto;
    }
    .title{
      height: 100px;
      background: #9f9;
    }
    .lt{
      position: relative;
      height: 400px;
      border:1px dotted #999;
    }
    .lt_left{
      position: absolute;
      width: 500px;
      height: 300px;
      left: -20%;
      top: 0;
      margin-left: -550px;
      background: #f99;
    }
    .lt_right{
      position: absolute;
      width: 500px;
      height: 300px;
      left: 120%;
      top: 0;
      margin-left: 50px;
      background: #99f;
    }
  
  
  
  
  


  top div
  
    这是标题
    
      这是左边盒子
      这是右边盒子
    
  

总结

以上所述是小编给大家介绍的JS库之Waypoints的用法详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！