recherche

Maison >interface Web >js tutoriel >Le plug-in Scrollify de jQuery implémente le glissement vers le nœud suivant sur la page_jquery

Le plug-in Scrollify de jQuery implémente le glissement vers le nœud suivant sur la page_jquery

WBOY
WBOYoriginal
2016-05-16 15:51:311357parcourir

Parfois, nous devons créer une seule page pour présenter les fonctionnalités du produit, et la page unique a beaucoup de contenu et la page est très longue Afin de localiser rapidement le nœud de fonctionnalité du produit, nous utilisons js pour écouter celui de l'utilisateur. Événement de roue Lorsque l'utilisateur déclenche le glissement de la roue ou utilise un geste. Lorsque vous touchez l'écran et faites glisser, vous pouvez localiser le nœud correspondant. Un plug-in jQuery appelé Scrollify nous aide à le faire.

Scrollify nécessite jQuery 1.6 et le plug-in de facilitation de l'animation de tampon pour être implémenté. La structure de base du HTML est la suivante : 

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>scrollify</title> 
<!--[if lt IE 9]> 
<script src="html5shiv.min.js"></script> 
<![endif]--> 
<script src="jquery.js"></script> 
<script src="jquery.easing.min.js"></script> 
<script src="jquery.scrollify.min.js"></script> 
<script> 
  $(function() { 
    $.scrollify({ 
      section : "section", 
    }); 
  }); 
</script> 
</head> 
<body> 
  <section></section> 
  <section></section> 
</body> 
</html>

Ce qui suit est la configuration des options par défaut de scrollify : 

$.scrollify({ 
    section : "section", 
    sectionName : "section-name", 
    easing: "easeOutExpo", 
    scrollSpeed: 1100, 
    offset : 0, 
    scrollbars: true, 
    before:function() {}, 
    after:function() {} 
});

Description des options :

section : Sélecteur de section de nœud.
sectionName : l'attribut de données correspondant à chaque nœud de section.
easing : Définir l'animation du tampon.
offset : Définissez le décalage de chaque nœud de couleur.
scrollbars : s'il faut afficher les barres de défilement.
before : fonction de rappel, déclenchée avant le début du défilement
. after : fonction de rappel, déclenchée une fois le défilement terminé

.

Scrollify fournit également des appels de méthodes, tels que : 

$.scrollify("move","#name");

Le code ci-dessus peut défiler directement jusqu'au nœud de #name.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

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：jQuery implémentation de l'effet d'image d'arrière-plan dynamique method_jqueryArticle suivant：jQuery implémentation de l'effet d'image d'arrière-plan dynamique method_jquery

Articles Liés

Voir plus