suchen

Heim >Web-Frontend >js-Tutorial >Das Scrollify-Plug-in von jQuery implementiert das Verschieben zum nächsten Knoten auf page_jquery

Das Scrollify-Plug-in von jQuery implementiert das Verschieben zum nächsten Knoten auf page_jquery

WBOY
WBOYOriginal
2016-05-16 15:51:311362Durchsuche

Manchmal müssen wir eine einzelne Seite erstellen, um Produktfunktionen vorzustellen, und die einzelne Seite hat viel Inhalt und ist sehr lang. Um den Produktfunktionsknoten schnell zu finden, verwenden wir js, um den Benutzern zuzuhören Radereignis Wenn der Benutzer das Rad auslöst oder eine Geste verwendet, können Sie den entsprechenden Knoten finden. Dabei hilft uns ein jQuery-Plugin namens Scrollify.

Scrollify erfordert zur Implementierung jQuery 1.6 und das Pufferanimations-Easing-Plug-in. Die Grundstruktur von HTML ist wie folgt: 

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

Das Folgende ist die Standardoptionskonfiguration von scrollify: 

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

Optionsbeschreibung:

Abschnitt: Knotenabschnittsauswahl.
sectionName: das Datenattribut, das jedem Abschnittsknoten entspricht.
Lockerung: Pufferanimation definieren.
Offset: Definieren Sie den Offset jedes Farbknotens.
Bildlaufleisten: Ob Bildlaufleisten angezeigt werden sollen.
vorher: Rückruffunktion, ausgelöst vor Beginn des Scrollens
danach: Rückruffunktion, ausgelöst nach Abschluss des Scrollens

Scrollify bietet auch Methodenaufrufe, wie zum Beispiel: 

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

Der obige Code kann direkt zum Knoten von #name scrollen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Implementierung des dynamischen Hintergrundbildeffekts von jQuery method_jqueryNächster Artikel：Implementierung des dynamischen Hintergrundbildeffekts von jQuery method_jquery

In Verbindung stehende Artikel

Mehr sehen