详解jquery插件jquery.viewport.js

小云云
Lepaskan: 2017-12-29 09:57:44
asal
2047 orang telah melayarinya

本篇文章主要介绍了详解jquery插件jquery.viewport.js学习使用方法,具有一定的参考价值,有兴趣的可以了解一下

介绍

Viewport 是一个简单的jQuery插件,为元素添加自定义伪选择器和处理程序,以便在可视窗口内外进行简单的元素检测。

使用方法


<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.viewport.js" type="text/javascript"></script>
Salin selepas log masuk

方法


$( ":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" );
Salin selepas log masuk

实例

黄色部分离开屏幕后显示返回按钮


  var wodBackButton = function () {
    //元素在屏幕左侧显示返回按钮
    $("#wodsHome:left-of-screen").each(function () {
      $(&#39;#wodBackButton&#39;).removeClass(&#39;hide&#39;);
      return;
    });
    //元素在屏幕显示区域隐藏返回按钮
    $("#wodsHome:in-viewport").each(function () {
      $(&#39;#wodBackButton&#39;).addClass(&#39;hide&#39;);
      return;
    });
  }

  $(&#39;#mediaContainer&#39;).bind("scroll", function (event) {
    wodBackButton();
  });

  wodBackButton();
Salin selepas log masuk

总结

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

相关推荐:

html5开发中viewport进行屏幕适配

分享viewport属性解决移动端竖屏切横屏字体被重置的问题实例

HTML5中Viewport的参数介绍以及使用方法

Atas ialah kandungan terperinci 详解jquery插件jquery.viewport.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan