詳解jquery插件jquery.viewport.js學(xué)習(xí)使用方法
介紹
Viewport 是一個(gè)簡(jiǎn)單的jQuery插件,為元素添加自定義偽選擇器和處理程序,以便在可視窗口內(nèi)外進(jìn)行簡(jiǎn)單的元素檢測(cè)。
使用方法
<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" );
實(shí)例
黃色部分離開(kāi)屏幕后顯示返回按鈕
var wodBackButton = function () { //元素在屏幕左側(cè)顯示返回按鈕 $("#wodsHome:left-of-screen").each(function () { $('#wodBackButton').removeClass('hide'); return; }); //元素在屏幕顯示區(qū)域隱藏返回按鈕 $("#wodsHome:in-viewport").each(function () { $('#wodBackButton').addClass('hide'); return; }); } $('#mediaContainer').bind("scroll", function (event) { wodBackButton(); }); wodBackButton();
總結(jié)
通過(guò)使用這個(gè)插件能很簡(jiǎn)單方便的獲取屏幕的區(qū)域,屏幕以外的區(qū)域,進(jìn)行開(kāi)發(fā)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 解決PhoneGap不支持viewport的幾種方法
- 深入理解移動(dòng)前端開(kāi)發(fā)之viewport
- 關(guān)于meta viewport中target-densitydpi屬性詳解(推薦)
- 自適應(yīng)布局meta標(biāo)簽中viewport、content、width、initial-scale、minimum-scale、maximum-scale總結(jié)
- 通過(guò)viewport實(shí)現(xiàn)jsp頁(yè)面支持手機(jī)縮放
- 關(guān)于viewport,Ext.panel和Ext.form.panel的關(guān)系
- ExtJs 學(xué)習(xí)筆記 Ext.Panle Ext.TabPanel Ext.Viewport
- 如何基于viewport vm適配移動(dòng)端頁(yè)面
相關(guān)文章
jQuery 對(duì)象中的類(lèi)數(shù)組操作
我們都知道jQUery對(duì)象中有一個(gè)類(lèi)數(shù)組的元素包裝集,該集合類(lèi)似js中的數(shù)組一樣擁有l(wèi)ength屬性,因此我們稱此為類(lèi)數(shù)組,下面我們就來(lái)總結(jié)下這個(gè)jQuery對(duì)象中的類(lèi)數(shù)組時(shí)如何進(jìn)行操作的2009-04-04利用jQuery實(shí)現(xiàn)WordPress中@的ID懸浮顯示評(píng)論內(nèi)容
這篇文章主要介紹了使用JavaScript實(shí)現(xiàn)WordPress中ID懸浮顯示評(píng)論的功能,就是在樓中樓式的評(píng)論中顯示被評(píng)論的主體內(nèi)容,需要的朋友可以參考下2015-12-12JQuery實(shí)現(xiàn)當(dāng)鼠標(biāo)停留在某區(qū)域3秒后自動(dòng)執(zhí)行
這篇文章主要介紹了JQuery實(shí)現(xiàn)當(dāng)鼠標(biāo)停留在某區(qū)域3秒后自動(dòng)執(zhí)行,可以應(yīng)用于很多場(chǎng)景,需要的朋友可以參考下2014-09-09一個(gè)可綁定數(shù)據(jù)源的jQuery數(shù)據(jù)表格插件
此文將實(shí)現(xiàn)一個(gè)的jQuery表格插件jQuery.DataGrid。需要的朋友可以參考下。2010-07-07詳解jQuery向動(dòng)態(tài)生成的內(nèi)容添加事件響應(yīng)jQuery live()方法
這篇文章主要介紹了jQuery向動(dòng)態(tài)生成的內(nèi)容添加事件響應(yīng)jQuery live()方法,需要的朋友可以參考下2015-11-11利用jQuery實(shí)現(xiàn)可輸入搜索文字的下拉框
jQuery實(shí)現(xiàn)點(diǎn)擊下拉框輸入框時(shí),自動(dòng)顯示下面的下拉列表,而且是根據(jù)輸入框中輸入的搜索添加,自動(dòng)在后臺(tái)查找,然后傳到前臺(tái),展現(xiàn)頁(yè)面2013-10-10jQuery實(shí)現(xiàn)節(jié)點(diǎn)的追加、替換、刪除、復(fù)制功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)節(jié)點(diǎn)的追加、替換、刪除、復(fù)制功能,結(jié)合具體實(shí)例形式分析了jQuery針對(duì)DOM節(jié)點(diǎn)的操作技巧,涉及append()、prepend()、replaceAll()、replaceWith()empty()、remove()、clone()、clone()等方法的使用技巧,需要的朋友可以參考下2017-07-07jQuery實(shí)現(xiàn)寬屏圖片輪播實(shí)例教程
這篇文章為大家分享了一個(gè)jQuery實(shí)現(xiàn)寬屏圖片輪播實(shí)例教程,外觀看上去非常大氣,感興趣的小伙伴們可以參考一下2015-11-11