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

介绍

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

使用方法

脚本src=' http : jquery。js ' type=' text/JavaScript '/script script src=' http : jquery。视口。js ' type=' text/JavaScript '/script方法

$(' : in-viewport ')；$("视口上方：");$("视口下方：");$(":视口宽度");$(' :视口右侧');$(":部分在视口上方");$(":部分低于视口");$(":部分位于视口左侧");$(":部分视口右侧");$(' : have-scroll ')；实例

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

var wodBackButton=function () { //元素在屏幕左侧显示返回按钮$('屏幕左侧的# wodshome : ').每个（函数(){ $('#wodBackButton ')).removeClass("隐藏");返回；});//元素在屏幕显示区域隐藏返回按钮$('#wodsHome:in-viewport ').每个（函数(){ $('#wodBackButton ')).添加CLaSS(' hide ')；返回；});} $(“# media container”).bind('scroll '，function(event){ wodBackButton()；});wodBackButton()；总结

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

开源代码库地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。