详解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插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery实现动态向上滚动
Dec 21 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 之入门篇
2006/12/04 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
php导入导出excel实例
2013/10/25 PHP
PHP查询网站的PR值
2013/10/30 PHP
提高PHP编程效率的方法
2013/11/07 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
如何使用php实现评委评分器
2015/07/31 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
javascript 保存文件到本地实现方法
2012/11/29 Javascript
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
python爬虫爬取网页表格数据
2018/03/07 Python
pandas数据处理之绘图的实现
2020/06/15 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
理货员的岗位职责
2013/11/23 职场文书
初中生物教学反思
2014/01/10 职场文书
有关打架的检讨书
2014/01/25 职场文书
项目合作意向书模板
2014/07/29 职场文书
房屋产权证明书
2014/10/15 职场文书
学习心理学心得体会
2016/01/22 职场文书
Python访问Redis的详细操作
2021/06/26 Python