宝哥软件园

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

编辑:宝哥软件园 来源:互联网 时间:2021-09-03

介绍

视口是一个简单的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();总结

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

开源代码库地址

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

更多资讯
游戏推荐
更多+