详解jquery插件jquery.viewport.js学习使用方法


Posted in jQuery onSeptember 08, 2017

介绍

Viewport 是一个简单的jQuery插件,为元素添加自定义伪选择器和处理程序,以便在可视窗口内外进行简单的元素检测。

使用方法

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.viewport.js" type="text/javascript"></script>

方法

$( ":in-viewport" );
$( ":above-the-viewport" );
$( ":below-the-viewport" );
$( ":left-of-viewport" );
$( ":right-of-viewport" );
$( ":partly-above-the-viewport" );
$( ":partly-below-the-viewport" );
$( ":partly-left-of-viewport" );
$( ":partly-right-of-viewport" );
$( ":have-scroll" );

实例

黄色部分离开屏幕后显示返回按钮

详解jquery插件jquery.viewport.js学习使用方法

详解jquery插件jquery.viewport.js学习使用方法

var wodBackButton = function () {
    //元素在屏幕左侧显示返回按钮
    $("#wodsHome:left-of-screen").each(function () {
      $('#wodBackButton').removeClass('hide');
      return;
    });
    //元素在屏幕显示区域隐藏返回按钮
    $("#wodsHome:in-viewport").each(function () {
      $('#wodBackButton').addClass('hide');
      return;
    });
  }

  $('#mediaContainer').bind("scroll", function (event) {
    wodBackButton();
  });

  wodBackButton();

总结

通过使用这个插件能很简单方便的获取屏幕的区域,屏幕以外的区域,进行开发。

github地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 #jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 #jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 #jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 #jQuery
jQuery实现的弹幕效果完整实例
Sep 06 #jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 #jQuery
jquery实现限制textarea输入字数的方法
Sep 06 #jQuery
You might like
php的一个登录的类 [推荐]
2007/03/16 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
jquery显示和隐藏div特效实例
2013/02/27 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
基于python实现学生信息管理系统
2019/11/22 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
保安的辞职报告怎么写
2014/01/20 职场文书
工作迟到检讨书
2014/02/21 职场文书
总账会计岗位职责
2014/03/13 职场文书
求职自荐信的格式
2014/04/07 职场文书
小学三年级学生评语
2014/04/22 职场文书
促销活动总结
2014/04/28 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
北京颐和园导游词
2015/01/30 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
Python进行区间取值案例讲解
2021/08/02 Python
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript