JS库之Waypoints的用法详解


Posted in Javascript onSeptember 13, 2017

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

一、最简易的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>waypoints的最简单使用</title>
  <!-- 定义css样式 -->
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    #example-basic{
      height: 500px;
      text-align: center;
    }
  </style>
  <!-- 引入js文件 -->
  <script src="js/jquery-3.0.0.min.js"></script>
  <script src="js/jquery.waypoints.js"></script>
  <script src="js/jquery-ui.min.js"></script>
  <!-- 启动waypoints -->
  <script>
  $(function () {
    $(‘#example-basic‘).waypoint(function() { 
      console.log("hi,example-basic,你的顶部碰到了浏览器窗口的顶部!");//测试打开web调试器,看控制台信息
    });
  });
  //注:无论是鼠标向上或向下只要该元素的顶部碰到浏览器的顶部都会触发waypoints事件
  </script>
</head>
<body>
  <div style="background:#ccc;height:1800px;">one div</div>
  <div id="example-basic">example-basic.</div>
  <div style="background:#ccc;height:1800px;">one div</div>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>检测鼠标滚动方向</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    #example-basic{
      height: 500px;
      text-align: center;
    }
    .in{
      font-size: 36px;
      color: #ff0;
      background:red;
      transition:all 0.5s;
    }
  </style>
  <script src="js/jquery-3.0.0.min.js"></script>
  <script src="js/jquery.waypoints.js"></script>
  <script src="js/jquery-ui.min.js"></script>
  <script>
  $(function () {
    $(‘#example-basic‘).waypoint(
      function(direction){ 
        if(direction=="down"){
          $(‘#example-basic‘).addClass("in");
          $(‘#example-basic‘).html("你在向下滚动!")
        }else{
          $(‘#example-basic‘).removeClass("in");
          $(‘#example-basic‘).html("你在向上滚动!")
        }
      },//第1个参数为waypoints事件响应时所执行的代码,是一个匿名函数即可
      {
        offset:‘50%‘
      }//第2个参数为偏移量,本例即该div到窗口高度一半时触发
      );
  });
  </script>
</head>
<body>
  <div style="background:#ccc;height:1800px;">one div</div>
  <div id="example-basic">example-basic.</div>
  <div style="background:#ccc;height:1800px;">one div</div>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>加下动画效果的</title>
  <style>
    *{
      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;
    }
  </style>
  <script src="js/jquery-3.0.0.min.js"></script>
  <script src="js/jquery.waypoints.js"></script>
  <script src="js/jquery-ui.min.js"></script>
  <script>
  $(function () {
    //获取运动的盒子
    var boxElemets = $(‘.boxaction‘);
    $.each(boxElemets, function() {
      $(this).attr(‘init‘, ‘false‘);
    }); 
    //判断是否出现在浏览器界面里面!
    function isScrolledIntoView(elem) { 
      var docViewTop = $(window).scrollTop();
      var docViewBottom = docViewTop + $(window).height();
      var elemTop = $(elem).offset().top;
      if (elemTop + 50 < docViewBottom) {
        return true
      } else {
        return false
      }
    }
    //定义动画
    function animateInit() {
      $.each(boxElemets, function() {
        if ($(this).attr(‘init‘) == ‘false‘ && isScrolledIntoView($(this))) { //没有显示过且刚出现在浏览器界面
          $(this).attr(‘init‘, ‘true‘);
          $(this).animate({
            ‘left‘: ‘50%‘
          }, 1000, ‘easeOutCubic‘);
        }
      });
    }
    animateInit(); //先执行一次animateInit
    $(window).scroll(function() { //滑动执行animateInit
      animateInit();
    });
  })
  </script>
</head>
<body>
  <div style="background:#ccc;height:1800px;text-align:center;">top div</div>
  <div class="banner">
    <div class="title">这是标题</div>
    <div class="lt">
      <div class="lt_left boxaction">这是左边盒子</div>
      <div class="lt_right boxaction">这是右边盒子</div>
    </div>
  </div>
</body>
</html>

总结

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

Javascript 相关文章推荐
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
jquery.validate使用攻略 第一部
Jul 01 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
jquery if条件语句的写法
May 19 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
Webpack的dll功能使用
Jun 28 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
js 动态校验开始结束时间的实现代码
May 25 Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 #Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 #Javascript
基于vue的短信验证码倒计时demo
Sep 13 #Javascript
BootStrap数据表格实例代码
Sep 13 #Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 #Javascript
Angular CLI 安装和使用教程
Sep 13 #Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 #Javascript
You might like
PHP ajax 分页类代码
2008/11/13 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
React简单介绍
2017/05/24 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
对Python中画图时候的线类型详解
2019/07/07 Python
python操作gitlab API过程解析
2019/12/27 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
李开复演讲稿
2014/05/24 职场文书
大学专科求职信
2014/07/02 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
解析Java异步之call future
2021/06/14 Java/Android
Mysql 一主多从的部署
2022/05/20 MySQL