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 相关文章推荐
一些不错的js函数ajax
Aug 20 Javascript
页面版文本框智能提示JS代码
Nov 20 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
JavaScript函数柯里化
Nov 07 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中将汉字转换成拼音的函数代码
2012/09/08 PHP
php列出一个目录下的所有文件的代码
2012/10/09 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
Python3基础之函数用法
2014/08/13 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
Python闭包思想与用法浅析
2018/12/27 Python
python实现大文本文件分割
2019/07/22 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
python super()函数的基本使用
2020/09/10 Python
python代码实现猜拳小游戏
2020/11/30 Python
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
合伙购房协议样本
2014/10/06 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
运动员入场前导词
2015/07/20 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
table不让td文字溢出操作方法
2022/12/24 HTML / CSS