jquery插件jquery.viewport.js学习使用

cheng10 发布于2019-08-29 13:24 / 3285人阅读

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

介绍

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

使用方法

方法

$( ":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" );

实例

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

    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地址

GPU云服务器云服务器 jquery插件源码jquery jquery插件手写jQuery插件 jquery表单插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112577.html

jquery插件jquery.viewport.js学习使用

摘要：介绍是一个简单的插件，为元素添加自定义伪选择器和处理程序，以便在可视窗口内外进行简单的元素检测。介绍 Viewport 是一个简单的jQuery插件，为元素添加自定义伪选择器和处理程序，以便在可视窗口内外进行简单的元素检测。使用方法方法 $( :in-viewport ); $( :above-the-viewport ); $( :below-the-viewport );...

liujs 2019-08-01 17:35 评论0 收藏0
jquery插件jquery.viewport.js学习使用

摘要：介绍是一个简单的插件，为元素添加自定义伪选择器和处理程序，以便在可视窗口内外进行简单的元素检测。介绍 Viewport 是一个简单的jQuery插件，为元素添加自定义伪选择器和处理程序，以便在可视窗口内外进行简单的元素检测。使用方法方法 $( :in-viewport ); $( :above-the-viewport ); $( :below-the-viewport );...

时飞 2019-08-21 16:21 评论0 收藏0
JS模块化工具 requirejs 学习文档

摘要：模块化工具学习文档作为一个开发者，原来写代码都是流水账式的，一直想写出模块化的，但是前端工具多如牛毛，确都是针对于的打包工具。之中导入对应模块即可。如果设为，则禁用等待超时。 JS模块化工具 requirejs 学习文档作为一个Java开发者，原来写js代码都是流水账式的，一直想写出模块化的js，但是前端工具多如牛毛，确都是针对于nodejs的打包工具。但是我在实际的开发过程中，并没...

Galence 2019-08-22 18:47 评论0 收藏0
前端基础进阶（十一）：详细图解jQuery对象，以及如何扩展jQuery插件

摘要：而在构造函数中，返回了的实例对象。在中直接返回过的实例，这里的是的真正构造函数最后对外暴露入口时，将字符与对等起来。因此当我们直接使用创建一个对象时，实际上是创建了一个的实例，这里的正真构造函数是原型中的方法。 showImg(https://segmentfault.com/img/remote/1460000008749398); 早几年学习前端，大家都非常热衷于研究jQuery源...

RebeccaZhong 2019-08-21 18:31 评论0 收藏0
前端技术博客文章、书籍积累

摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行书籍《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

LiangJ 2019-08-30 12:58 评论0 收藏0