脚本宝典收集整理的这篇文章主要介绍了

jquery插件jquery.viewport.js学习使用

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">介绍</h2> <p>Viewport 是一个简单的<a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a>插件,为元素添加自定义伪选择器和处理程序,以便在可视窗口内外进行简单的元素检测。</p> <h2 id="articleHeader1">使用方法</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script src=&quot;jquery.js&quot; type=&quot;text/javascript&quot;></script><br /> <script src=&quot;jquery.viewport.js&quot; type=&quot;text/javascript&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"jquery.js"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"jquery.viewport.js"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h2 id="articleHeader2">方法</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$( &quot;:in-viewport&quot; ); $( &quot;:above-the-viewport&quot; ); $( &quot;:below-the-viewport&quot; ); $( &quot;:left-of-viewport&quot; ); $( &quot;:right-of-viewport&quot; ); $( &quot;:partly-above-the-viewport&quot; ); $( &quot;:partly-below-the-viewport&quot; ); $( &quot;:partly-left-of-viewport&quot; ); $( &quot;:partly-right-of-viewport&quot; ); $( &quot;:have-scroll&quot; );" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>$( <span class="hljs-string">":in-viewport"</span> ); $( <span class="hljs-string">":above-the-viewport"</span> ); $( <span class="hljs-string">":below-the-viewport"</span> ); $( <span class="hljs-string">":left-of-viewport"</span> ); $( <span class="hljs-string">":right-of-viewport"</span> ); $( <span class="hljs-string">":partly-above-the-viewport"</span> ); $( <span class="hljs-string">":partly-below-the-viewport"</span> ); $( <span class="hljs-string">":partly-left-of-viewport"</span> ); $( <span class="hljs-string">":partly-right-of-viewport"</span> ); $( <span class="hljs-string">":have-scroll"</span> );</code></pre> <h2 id="articleHeader3">实例</h2> <p>黄色部分离开屏幕后显示返回按钮<br /><span class="img-wrap"><img data-src="/img/bVUDuS?w=1276&amp;h=558" src="https://cdn.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p><span class="img-wrap"><img data-src="/img/bVUDvb?w=1207&amp;h=543" src="https://cdn.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" var wodBackButton = function () { //元素在屏幕左侧显示返回按钮 $(&quot;#wodsHome:left-of-screen&quot;).each(function () { $('#wodBackButton').removeClass('hide'); return; }); //元素在屏幕显示区域隐藏返回按钮 $(&quot;#wodsHome:in-viewport&quot;).each(function () { $('#wodBackButton').addClass('hide'); return; }); } $('#mediaContainer').bind(&quot;scroll&quot;, function (event) { wodBackButton(); }); wodBackButton();" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code> <span class="hljs-keyword">var</span> wodBackButton = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">//元素在屏幕左侧显示返回按钮</span> $(<span class="hljs-string">"#wodsHome:left-of-screen"</span>).each(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ $(<span class="hljs-string">'#wodBackButton'</span>).remove<a href="http://www.js-code.com/tag/class" title="浏览关于“Class”的文章" target="_blank" class="tag_link">Class</a>(<span class="hljs-string">'hide'</span>); <span class="hljs-keyword">return</span>; }); <span class="hljs-comment">//元素在屏幕显示区域隐藏返回按钮</span> $(<span class="hljs-string">"#wodsHome:in-viewport"</span>).each(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ $(<span class="hljs-string">'#wodBackButton'</span>).addClass(<span class="hljs-string">'hide'</span>); <span class="hljs-keyword">return</span>; }); } $(<span class="hljs-string">'#mediaContainer'</span>).bind(<span class="hljs-string">"scroll"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>{ wodBackButton(); }); wodBackButton();</code></pre> <h2 id="articleHeader4">总结</h2> <p>通过使用这个插件能很简单方便的获取屏幕的区域,屏幕以外的区域,进行开发。</p> <p><a href="https://github.com/xobotyi/jquery.viewport" rel="nofollow noreferrer" target="_blank">github地址</a></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

jquery插件jquery.viewport.js学习使用

全部内容,希望文章能够帮你解决

jquery插件jquery.viewport.js学习使用

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过