介紹
Viewport 是一個簡單的jQuery插件,為元素添加自定義偽選擇器和處理程序,以便在可視窗口內外進行簡單的元素檢測。
使用方法
<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" );
實例
黃色部分離開屏幕后顯示返回按鈕


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();總結
通過使用這個插件能很簡單方便的獲取屏幕的區域,屏幕以外的區域,進行開發。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答