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

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

WBOY

Libérer： 2016-05-16 15:51:31

original

1370 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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 :