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

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

WBOY

Libérer： 2016-05-16 15:29:50

original

1420 Les gens l'ont consulté

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>

Copier après la connexion

Dernier aperçu de JS :

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

Copier après la connexion

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();
});

Copier après la connexion

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. .