Scrollable ist ein flexibles, leichtes jQuery-Plug-in zum Erstellen von scrollenden Inhalten. Als Scroll-Element können beliebige Inhalte (HTML, Videos, Dateien, Bilder usw.) verwendet werden. Unterstützt sowohl horizontale als auch vertikale Scrollrichtungen. In diesem Artikel wird hauptsächlich die Verwendung des jQuery-Scrolling-Plugins scrollable.js vorgestellt und die Funktionen, Methoden und zugehörigen Verwendungsfähigkeiten von scrollable.js kurz analysiert. Ich hoffe, dass es allen helfen kann.
Zweck: Scrolleffekt, kann eine Schritt-für-Schritt-Überprüfungsseite erstellen
Die folgende Beschreibung der scrollable.js-Methode:
Methodenname |
Rückgabewert | Beschreibung |
getConf() | Object | gibt das Konfigurationsobjekt von scrollbar zurück und kann die zugehörigen Eigenschaften des Objekts festlegen Wert, um die Eigenschaften des Konfigurationsobjekts zu ändern. |
getIndex() | Nummer | Get Die Indexnummer des aktuellen Bildlaufelements, 0 steht für das erste Element, 1 steht für das zweite Element und so weiter. Darüber hinaus ist zu beachten, dass beim Abrufen mehrerer Bildlaufelemente nur die Indexnummer des ersten Bildlaufelements zurückgegeben wird. |
getItems() | jQuery | Alle Scroll-Elemente zurückgeben , das Ergebnis wird als JQuery-Objekt zurückgegeben. |
getItemWrap() | jQuery | Ruft das Bildlaufelement ab Übergeordneter Knoten, das Ergebnis wird als JQuery-Objekt zurückgegeben. |
getPageAmount() | Nummer | Holen Sie sich die aktuelle Schriftrolle Balkenanzahl der Seiten. |
getPageIndex() | Nummer | Gibt die aktuelle Page zurück Indexnummer.Wenn das Paging beispielsweise auf 5 Bildlaufelemente/Seite eingestellt ist und die aktuelle Position des Bildlaufelements 7 ist, wird 1 (zweite Seite) zurückgegeben |
getRoot() | jQuery | Ruft den Knoten der oberen Ebene des Bildlaufelements ab. |
getSize() | Nummer | Gibt das Bildlaufelement zurück Menge. Diese Methode entspricht getConf().size |
getVisibleItems() | jQuery | Ruft eine Liste der aktuell sichtbaren Scroll-Elemente ab. Die Liste ist ein JQuery-Objekt. Die Anzahl der sichtbaren Scroll-Elemente wird durch das Größenattribut des Konfigurationsobjekts definiert. |
> | reload() | |
scrollable unterstützt die Funktion des dynamischen Hinzufügens und Entfernens von Bildlaufelementen. Nach dem dynamischen Hinzufügen oder Entfernen von Bildlaufelementen rufen Sie diese Methode auf, um Informationen zur Seitennavigation und zur Bewegung von Bildlaufelementen automatisch zu aktualisieren. | ||
prev() | API | Springe zu diesem The vorheriges Element des Scroll-Elements (wenn das Scroll-Element nicht das erste Scroll-Element ist) |
next() | API | Zum nächsten Element dieses Scroll-Elements springen (wenn dieses Scroll-Element nicht das letzte Scroll-Element ist) |
seekTo(index) | API | Springe zum Bildlaufelement am angegebenen Index. |
move(offset) | API | wird sein Die aktuelle Position des Bildlaufelements im Status (aktiviert) wird um den Offset des aktuellen Bildlaufelements vorwärts/rückwärts verschoben.Wenn Offset positiv ist, bewegt sich das Bildlaufelement nach rechts/unten, andernfalls nach links/oben. Beispiel: move(2), der Index des Bildlaufelements im aktuellen Zustand wird vom i-Bildlaufelement zum i+2-Bildlaufelement übertragen. |
prevPage() | API | Zur vorherigen Seite springen Seite (falls es nicht die erste Seite ist). |
nextPage() | API | Zum nächsten springen Seite (sofern es nicht die letzte Seite ist). |
setPage(index) | API | Zur Seite springen Index. Wenn beispielsweise index=2 ist, wird von der aktuellen Seite auf Seite 3 gesprungen. |
movePage(offset) | API | wird verwendet move Die Position der angezeigten Seite wird von der aktuellen Seite auf diese Seite/nächste Offset-Seite geändert. Andere Erklärungen dieser Methode ähneln (Offset). |
begin() | API | Zu Seite A springen Bildlaufelement, äquivalent zu seeTo(0). |
end() | API | Zum Ende springen Ein Scroll-Element. |
click(index) | API | Machen Sie das Bildlaufelement Index ausgewählt (aktiviert). |
onBeforeSeek(fn) | API | Siehe KonfigurationsobjekteonBeforeSeek-bezogene Anweisungen |
onSeek(fn) | API | Siehe die onSeek-bezogenen Anweisungen des Konfigurationsobjekts |
Hinweis: Zusätzlich zu den Methoden unten die Methode prev()
In der obigen Methodentabelle enthält sie zusätzlich zu den in der Tabelle enthaltenen Parametern auch zwei implizite Parameter: Geschwindigkeit und Rückruf. Der Geschwindigkeitsparameter wird verwendet, um die Dauer des Animationseffekts des Bildlaufelements zu steuern, und Rückruf ist seine Rückrufmethode. Informationen zur spezifischen Implementierung finden Sie im Beispiel zur Verwendung der prev()
-Methode von scrollable.
Spezifische Verwendung:
var scrollable=$("p.scrollable").scrollable(); //alert(scrollable.getConf().prev);//获取配置对象中的prev属性 scrollable.getConf().speed=200;//设置配置对象的speed属性 //alert(scrollable.getIndex());//获取当前滚动项的索引 //alert(scrollable.getItems().length);//获取当前滚动项的数量 //alert(scrollable.getItemWrap().html());//获取包含滚动项的节点(class=scrollable),并将所有滚动项显示出来 //alert(scrollable.getPageAmount());//获取当前滚动栏分页数 //alert(scrollable.getPageIndex());//获取当前所在分页 //alert(scrollable.getRoot().html());//获取滚动项的上一级节点(id=thumbs) //alert(scrollable.getSize()); //alert(scrollable.getVisibleItems().length);//获取当前可见滚动项数量 scrollable.next();//如果有下一个滚动项,则跳转到下一个滚动项 scrollable.prev(3000,function(){return true});//跳转到前一滚动项 //var seekTo= scrollable.click(0).seekTo(2,1000,function(){ //alert(this.getIndex()); //}); //scrollable.move(2); //scrollable.prevPage();//跳转到前一页 //scrollable.nextPage();//跳转到下一页 //scrollable.setPage(1);//跳转到下一页 //scrollable.begin();//跳转到第一个滚动项 //scrollable.end();//跳转到最后一个滚动项 scrollable.click(3);//使第四个滚动项处于选中状态 scrollable.onBeforeSeek(function(){ alert("you click the "+this.getIndex()+"st scrollable item!"); }); $("#remove").click(function(){ scrollable.getItems().filter(":last").remove();//删除最后一个滚动项 scrollable.reload().prev();//自动更新相关配置信息,并跳转到被删除滚动项的前一项 });
Außerdem wird die Formularseite nicht abweichen, wenn sie an den Bildschirm angepasst und in der Größe geändert werden muss . Dies kann mit scrollable.seekTo(index)
gelöst werden.
Verwandte Empfehlungen:
jquery tools series scrollable learning_jquery
jquery tools series scrollable (2)_jquery
Das obige ist der detaillierte Inhalt vonNutzungsanalyse des jQuery-Scrolling-Plugins scrollable.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!