介绍
视口是一个简单的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();总结
通过使用这个插件能很简单方便的获取屏幕的区域,屏幕以外的区域,进行开发。
开源代码库地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。