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.
