Sima div scroll - vízszintes görgetés tartalom - szkriptek honlapok

jQuery plugint sima vízszintes tartalmat lapozzunk balra és jobbra - Smooth Div Scroll.

Hogyan működik ez?

A alapjául szolgáló elv Smooth Div görgetéssel egyszerű: egy DIV (scrollArea) tekercsek belül egy másik DIV (scrollWrapper). A két nyíl gombokkal lehet kezdeni a scroll (scrollingHotSpotLeft és scrollingHotSpotRight). Emellett ott van a lehetősége, beleértve a görgetés érintőgombos (ujj) az érintőképernyőn, görgővel, vagy csak be kell kapcsolnia az automatikus görgetés. scrollWrapper - meghatározza, hogy mely terület scrollableArea látható lesz - minden külső díva scrollWrapper lesz rejtve.

Tekintsük 1. minta példájaként a dugó.

Azért hoztuk létre ezeket a paramétereket a plugint, a felhasználó lapozhat a képek segítségével a nyilakkal vagy az egér görgőjét. Továbbá, ha az oldal betöltődik végzett automatikus görgetés, és ha mozog a görgetősáv abbamarad. Érintsd görgetés erre Deme ki van kapcsolva, próbálja ki, akkor dolgozhat a demo „touch scroller”

html szerkezet erre demo lesz:

Mint látható, van egy konténer ID - makeMeScrollable. utalva, amelyek tartalma lesz, ebben az esetben a kép (lehet szöveg) átváltva görgetés egységet.
Ahhoz, hogy helyesen megjeleníteni a terméket helyezni a tartályba kell adnia bizonyos CSS stílusokat.
Rovarriasztó szerként például a következő lehetőségek közül:

Ebben a demo nincs padding a képek között, ha szükség van rájuk, akkor használja a padding tulajdonság. és nincs mérlegelési (hibát okozó IExplorer).

Ahhoz, hogy támogatja az összes bővítmény képességek kell kapcsolódni az oldalhoz következő szkriptek és könyvtárak:

Itt van egy jQuery könyvtár, akkor jquery ui egyedi hatások jquery görgővel görgetni az egérrel kereket lehetséges, azt a lehetőséget, kinetikus görgetés touch (érintés), és ő smoothdivscroll plugin.

Hívás dugó ebben a példában a következő:

• mousewheelScrolling. „AllDirections” - scroll egér görgővel minden irányban (nem minden egerek ezt a funkciót)
• manualContinuousScrolling. igaz - a végtelen görgetés, a lezárás után.
• autoScrollingMode. „OnStart” - automatikus görgetés az oldal betöltésekor, és a szünet, ha lebeg a kurzort a scroller.

A lista az összes lehetőséget alacsonyabb lesz.

Elég sok lehetőség, de lehet telepíteni csak azokat, amelyek szükségesek az Ön számára, a többi paraméter lesz beállítva módban - az alapértelmezett.

(After. (Colon) az alapértelmezett beállítások)

Beállítása osztályok ellenőrzése:

• scrollingHotSpotLeftClass. "ScrollingHotSpotLeft" - string - CSS osztály bal gombot, hot
• scrollingHotSpotRightClass. „ScrollingHotSpotRight” - string - CSS osztályt a jobb forró gombokat
• scrollableAreaClass. „ScrollableArea” - string - CSS osztálya az aktuális elemet, amit lapozzunk balra vagy jobbra
• scrollWrapperClass. "ScrollWrapper" - string - CSS osztálya héjelem

A különböző lehetőségek közül:

• hiddenOnStart. false - logikai (igaz / hamis) - Meghatározza, hogy látható vagy rejtett scroller az oldal betöltésekor.

• getContent # 111; nload. <> (Null object) - tárgy - használja ezt a lehetőséget, hogy át a külső tartalom a scroller az oldal betöltésekor. Ez a beállítás, akkor meg kell adni a módszer neve is szeretne használni, hogy letölthető tartalmat, hogy a tartalom forrását, a manipuláció módszer (tartalma hogyan fognak hozzá a scroller), és adott esetben szűrés címkék (választó szűrésére használt csak bizonyos tartalmakat a tartalom, ami az áthelyezésre kijelölt) :

• countOnlyClass. „” (Üres string) - húr - egy függvényt, amely kiszámítja a teljes szélessége görgethető terület számít csak a szélessége az elemek, az osztály, amely kerül meghatározásra ezt a lehetőséget. Ez akkor lehet hasznos, ha tartalmi csoportosított oszlopok és oszlopok csak lehet görgethető. Ellenkező esetben a plugin hozzáadja a szélesség az összes elemet az oszlopokat.

startAtElementId. „” (Üres string) - string - Ha azt akarjuk, hogy Tekerccselt kezdődik meghatározó eleme adja a CSS ID ez a lehetőség, és indítsa el a görgetés attól elem, különben görgetés kezdődik az első elemet.

Options nyilakkal (hot spot):

• hotSpotScrolling. igaz - logikai (igaz / hamis) -, hogy aktiválja a nyilakkal (igen / nem)? Ha a használni kívánt érintőgörgős, a legjobb, ha a paraméter ezen opció hamis.
• hotSpotScrollingStep. 15 - szám (pixel) - állítja a lépés nagysága görgetni. Magasabb értékeket tesz görgetés gyorsabb, de kevésbé sima.
• hotSpotScrollingInterval. 10 - szám (ms) - a ezredmásodperc közötti egyes görgetés lépésben. A nagyobb érték hatására a görgetés lassabban, mint a scroller fog várni, mielőtt megtenné a következő lépést. A paraméter lehet hasonlítani a keretek a film, amely egyenértékű a keretek száma másodpercenként.
• hotSpotMouseDownSpeedBooster. 3 - szám (szorzó) - Ezt a lehetőséget, ha azt szeretné, hogy növelje a sebességet, amikor a felhasználó rákattint a képre az egyik nyíl (bal / jobb). 1 - normál sebesség, 2 - kétszer gyorsabb, mint a normál, 3 - háromszor olyan gyorsan, és így tovább. Az alapértelmezett beállítás 3.
• visibleHotSpotBackgrounds. „Hover” - string - Közös beállítások gombok jelennek meg:

Lehetséges értékek: "" (üres string), "lebeg", "onStart" vagy "mindig".

1. „” - üres string, hogy a háttérben láthatatlan gombok mindig.
2. lebeg - teszi a háttérben látható gombokkal csak akkor, ha lebeg az egeret a scroller.
3. onStart - láthatóvá teszi háttér -sekund X gomb (vezérelhető hotSpotsVisibleTime opció) közvetlenül az oldal betöltődik, akkor rejtőznek.
4. Mindig - háttér gombok (azaz a gombok is) látható minden alkalommal.

Fontos megjegyezni. ez az opció határozza meg, hogy csak a megjelenése gombok, még a beállítást a láthatatlanság, sőt, lesz gombok még mindig aktív. Ha szeretné, hogy a gombot máshogy néznek ki, majd módosítsa őket photoshop és csípés a CSS, és van egy gomb, hogy legyen egy jó kiindulási pont a saját kísérletek.

• hotSpotsVisibleTime. 5000 - szám (ms), - ha a paraméter „onStart” az visibleHotSpotBackgrounds opciót. majd azt követően, hogy a másodpercek számát itt megadott, a háttérben láthatatlanná válik gomb.
• easingAfterHotSpotScrolling. igaz - logikai (igaz / hamis) - ha a használni kívánt lazítás okozta hatások görgetés után a gombokkal, majd tegye igaz.
• easingAfterHotSpotScrollingDistance. 10 - szám (pixel) - beállítja a távolságot képpontok után kerül sor a scroller gombokkal lapozzunk rá. A nagyobb érték hatására a scroller simább és sokkal nyugodtabb, kisebb beállítás megadja a pontosság és merevség. Ajánlatos együtt ezt a lehetőséget, és végezze el a korrekciókat és easingAfterHotSpotScrollingDuration opciót.
• easingAfterHotSpotScrollingDuration. 300 - szám (ms) - beállítja az időt lazítás hatása görgetés után a gombok. Ezzel a lehetőséggel, jó lenne, hogy hozzanak létre és a paraméter easingAfterHotSpotScrollingDistance
• easingAfterHotSpotScrollingFunction. „EaseOutQuart” - string - Ez az opció határozza meg a lazítás funkciót, amelyeket használni fognak a végén a görgető gombok segítségével.

Options lapozzunk az egér görgővel

• mousewheelScrolling. „” - string - határozza meg, hogy az aktív egér kerék görgetni, és ha igen, hogyan kell működnie:

1. „” - üres string - görgetés le a kereket
2. „Vertical” - lapozzunk kötve csak a függőleges görgető kerék
3. „Vízszintes” - lapozzunk kötve csak a vízszintes görgető kerék (nincs az összes egér)
4. „AllDirections” - mindkét fajta, valamint függőleges és vízszintes görgetést lehet használni az egeret.

• mousewheelScrollingStep. 70 - szám (px) - a pixelek számát, amelyek görgetni scroller, ha a felhasználó bekapcsolja a egér kerék. (Egér kerék küld egy számot, amely általában a tartományban -3 3 irányától függően). A nagyobb érték eredményez gyorsabb görgetés a kerék miatt a nagyobb pályát.
• easingAfterMouseWheelScrolling. igaz - logikai (igaz / hamis) - Akár ispolzovat lazítás hatása görgetés közben kereket? (Igen / Nem)
• easingAfterMouseWheelScrollingDuration. 300 - szám (ms) - beállítja az időt lazítás hatása befejezése után a görgető kerék
• easingAfterMouseWheelScrollingFunction. „EaseOutQuart” - string - állítja a lazítás funkciót, amelyeket használni fognak befejezése után a görgetés a kerék.

Options görgetés az érintés (touch)

• touchScrolling. false - logikai (igaz / hamis) - meghatározott igaz. Ha szeretné használni a görgetéskor érintőképernyős eszközök, mint például az iPhone. ipad. android stb Ezen kívül tartja a egérgombbal, és mozog, akkor a scroller is lehet görgetni. Működtetni egy tekercset kapcsolatot kell csatlakoztatni további oldal jquery.kinetic script. És akkor ajánlott kikapcsolni a lehetőséget hotSpotScrolling. ami nem működik jól touch készülékek

Options Manual scroll (forró gombok, görgő, érintse görgetés)

• manualContinuousScrolling. false - logikai (igaz / hamis) - ha true. A kézi lesz folyamatos görgetés balra vagy jobbra. Úgy működik, minden típusú meleg gombok, görgető kerék vagy érintse.

Options automatikus görgetés

• autoScrollingMode. „” - string - meghatározza azokat a paramétereket az automatikus görgetés:

1. „” (Üres string) - ne használja ezt a lehetőséget, vagy tegyen egy üres stringet kikapcsolja az automatikus görgetés.
2. „OnStart” - scroll automatikusan elindul az oldal betöltésekor összhangban autoScrollDirection lehetőség - határozza meg az irányt, ha az egérmutatót a bal vagy a jobb gyorsbillentyűvel vagy az egér használata, az automatikus görgetés leáll. Ezek után már csak görgetni a nyilakkal vagy a görgőt.
3. „Mindig” - gyorsbillentyűk le vannak tiltva, görgetés csak akkor fordul elő az automatikus üzemmódot.

• autoScrollingDirection: „endlessLoopRight” - string - opció határozza meg az irányt és viselkedését automatikus görgetés, és csak ha az automatikus görgetés engedélyezve:

1. „Jobb” - automatikus görgetés jobbra és megáll az utolsó dia.
2. „Bal” - automatikus görgetés balra és megáll az utolsó dia. Ha ezt a „bal” csak akkor van értelme, ha beállítja startAtElementld. Egyébként görgetés kezdődik az első dia, és ezért nem lapozzunk balra kezdődik.
3. „BackAndForth” - Automatikus görgetés kezdődik, ott, amikor a végére ér, nem lesz automatikus irányváltás és gördül a bal oldalon, stb mint a ping-pong.
4. „EndlessLoopRight” - folyamatos, automatikus görgetés jobbra
5. „EndlessLoopLeft” - folyamatos, automatikus görgetés balra

• autoScrollingStep. 1 - szám (px) - beállítja a hossza a lépés automatikus görgetés. Egyre fontosabb, hogy a görgetés gyorsabb, de hogy kevésbé sima.
• autoScrollingInterval. 10. szám (ms) - beállítja a ezredmásodperc közötti scroll lépéseket. A nagyobb érték hatására a görgetés lassabban, mert a görgetés vár hosszabb ideig, mielőtt a következő lépés. Ez a paraméter lehet hasonlítani a képkockák számát másodpercenként egy film.

Options scrollToElement módszer

• scrollToAnimationDuration. 1000 - szám (ms) - beállítja az animáció scroll, hogy egy adott elem
• scrollToEasingFunction: „easeOutQuart” - string - meghatározza, hogy mely megkönnyíti a funkció használatához

LETÖLTHETŐ Leap: 6687
1,74 Mb Ki letöltött?