Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée du plug-in jquery jquery.viewport.js

小云云
Libérer: 2017-12-29 09:57:44
original
2044 Les gens l'ont consulté

Cet article présente principalement l'explication détaillée de la façon d'apprendre et d'utiliser le plug-in jquery jquery.viewport.js. Ceux qui sont intéressés peuvent en savoir plus sur

.Introduction

Viewport est un simple plugin jQuery qui ajoute des pseudo-sélecteurs et des gestionnaires personnalisés aux éléments pour une détection simple des éléments à l'intérieur et à l'extérieur de la fenêtre.

Comment utiliser


<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.viewport.js" type="text/javascript"></script>
Copier après la connexion

Comment utiliser


$( ":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" );
Copier après la connexion

Instance

Le bouton de retour s'affiche après que la partie jaune quitte l'écran


  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();
Copier après la connexion

Résumé

En utilisant cette prise -dedans, il est facile et pratique d'obtenir la zone d'écran, à l'extérieur de l'écran, pour le développement.

Recommandations associées :

Porte d'affichage pour l'adaptation d'écran dans le développement HTML5

Partagez les attributs de la fenêtre d'affichage pour résoudre le changement d'écran vertical sur mobile appareils Exemple du problème de réinitialisation de la police d'écran horizontale

Introduction aux paramètres de Viewport en HTML5 et comment l'utiliser

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal