Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung des JQuery-Plug-Ins jquery.viewport.js

Detaillierte Erläuterung des JQuery-Plug-Ins jquery.viewport.js

小云云
Freigeben: 2017-12-29 09:57:44
Original
2054 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich das Erlernen und Verwenden des JQuery-Plug-Ins jquery.viewport.js vorgestellt. Interessierte können mehr über

erfahrenEinführung

Viewport ist ein einfaches jQuery-Plugin, das benutzerdefinierte Pseudoselektoren und Handler zu Elementen hinzufügt, um eine einfache Elementerkennung innerhalb und außerhalb des Ansichtsfensters zu ermöglichen.

Anwendungshinweise


<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.viewport.js" type="text/javascript"></script>
Nach dem Login kopieren

Anwendungshinweise


$( ":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" );
Nach dem Login kopieren

Instanz

Die Zurück-Schaltfläche wird angezeigt, nachdem der gelbe Teil den Bildschirm verlässt


  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();
Nach dem Login kopieren

Zusammenfassung

Durch die Verwendung dieses Steckers -In ist es einfach und bequem, den Bildschirmbereich außerhalb des Bildschirms für die Entwicklung zu erhalten.

Verwandte Empfehlungen:

Ansichtsfenster zur Bildschirmanpassung in der HTML5-Entwicklung

Ansichtsfensterattribute freigeben, um vertikale Bildschirmumschaltung auf Mobilgeräten zu lösen Geräte Beispiel für das Problem, dass die horizontale Bildschirmschrift zurückgesetzt wird

Einführung in die Parameter von Viewport in HTML5 und wie man es verwendet

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des JQuery-Plug-Ins jquery.viewport.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage