recherche

Maison  >  Article  >  interface Web  >  javascript Slip.js implémente les compétences webpage_javascript mobiles coulissantes en plein écran

javascript Slip.js implémente les compétences webpage_javascript mobiles coulissantes en plein écran

WBOY
WBOYoriginal
2016-05-16 15:29:501409parcourir

Avec Slip.js, il vous suffit d'écrire du HTML et du CSS. Si la logique est simple, cela peut être fait avec une seule ligne de code JS, ce qui améliore considérablement l'efficacité du développement. Sans vouloir me vanter, j’ai écrit la démo ci-dessus en moins d’une demi-heure.

Comment le faire spécifiquement ? Par exemple, il y a une exigence :

Nous avons 4 pages, chaque page a une image, et chaque fois que votre doigt glisse, tout l'écran change.

Regardez d'abord le HTML : 

<!doctype html>
...
<script type="text/javascript" src="slip.js"></script>
<body>
...
<div id="container">
 <div class="page page-1"><img src="img/1.png"></div>
 <div class="page page-2"><img src="img/2.png"></div>
 <div class="page page-3"><img src="img/3.png"></div>
 <div class="page page-4"><img src="img/4.png"></div>
</div>
</body>

Dernier aperçu de JS : 

var container = document.getElementById('container');
var pages = document.querySelectorAll('.page');
var slip = Slip(container, 'y').webapp(pages);

Commentaire :

  • Slip : Une méthode exposée au monde entier. Tant que vous introduisez slip.js, vous pouvez obtenir cette méthode pratique et géniale.
  • conteneur : Le conteneur en cours de glissement contient chaque page coulissante.
  • 'y' : Le sens de glissement de la page, vous pouvez aussi passer en 'x'.
  • webapp : Comment configurer la page pour qu'elle s'affiche sous forme de page coulissante plein écran.
  • pages : Liste des éléments de la page.

Tout est fait avec une seule ligne de code :

Slip(document.getElementById('container'), 'y').webapp();
Vous pouvez constater que la ligne de code ci-dessus ne définit pas les pages :

Lorsque la méthode webapp ne passe pas de paramètres, Slip obtiendra les éléments enfants directs (éléments fils) du conteneur sous forme de pages.

À ce stade, une page Web coulissante en plein écran est terminée, ce qui est incroyablement simple et rapide. Cela me prend une demi-heure, mais vous devriez pouvoir le faire en 10 minutes.

Bien sûr : Slip.js a de nombreuses fonctions plus puissantes. Par exemple, vous pouvez définir quoi faire lorsque la page glisse lorsque vous l'avez terminée si rapidement, j'ai donc ajouté des exigences très intéressantes pour vous :

Lorsque la page passe à la dernière page, actualisez-la. . .

Il vous suffit d'ajouter quelques lignes de code pour le faire : 

Slip(document.getElementById('container'), 'y').webapp().end(function() {
 if (this.page === 3) location.reload();
});

Ecoute, n'est-ce pas très simple ? Est-ce terminé avant même que j'aie le temps de me plaindre de cette exigence ? N'est-ce pas un plaisir sans précédent ?

Ce qui précède est l'intégralité du contenu de cet article. J'espère que vous l'aimerez tous. Cet article n'est que le début. Il y aura des articles plus complets et passionnants qui vous attendront à l'avenir. .

Déclaration：
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
Article précédent：Questions d'entretien de clôture JS que vous pouvez mal faire grâce aux compétences accident_javascriptArticle suivant：Questions d'entretien de clôture JS que vous pouvez mal faire grâce aux compétences accident_javascript

Articles Liés

Voir plus