Smooth div scroll - derulare orizontală a conținutului - scripturi pentru site-uri

pluginul jQuery pentru derularea orizontală a conținutului la stânga și la dreapta - Smooth Div Scroll.

Cum funcționează?

Principiul care sta la baza Smooth Div Scroll este simplu: o singură DIV (scrollArea) se rotește în interiorul altui DIV (scrollWrapper). Două butoane cu săgeți folosite pentru a începe derularea (scrollingHotSpotLeft și scrollingHotSpotRight). De asemenea, este posibil să activați defilarea prin atingerea (degetul) pe ecranul tactil, cu rotița mouse-ului sau pur și simplu activând derularea automată. scrollWrapper - determină ce zonă din scrollableArea va fi vizibilă - tot ce va fi ascuns în afara ecranului scrollWrapper.

Luați în considerare Demo 1 ca un exemplu de lucru cu plugin-uri.

Am stabilit astfel de parametri în plugin-ul pe care utilizatorul le poate parcurge prin imagini folosind butoanele săgeată sau cu rotița mouse-ului. De asemenea, când pagina a fost încărcată, s-a efectuat autoscroll și când derulați bara de defilare, derularea se oprește. Atingerea derulării pentru această demonstrație este dezactivată, puteți încerca să lucrați în demo "touch scroller"

Structura html pentru acest demo va fi:

După cum puteți vedea, avem un container cu ID - makeMeScrollable. referindu-se la care, conținutul său, în acest caz imagini (poate text), se transformă într-un bloc de defilare.
Pentru a afișa corect elementele plasate în acest container, trebuie să specificați anumite stiluri CSS.
Puteți începe de la, de exemplu, următoarea opțiune:

În acest demo, nu există spațiu între imagini, dacă aveți nevoie de ele, apoi utilizați proprietatea de umplutură. și nu marja (ceea ce cauzează erori în IExplorer).

Pentru a suporta toate funcțiile plug-in-ului, va trebui să vă conectați la pagină cu următoarele scripturi și biblioteci:

Aici avem o bibliotecă jQuery, apoi jQuery efecte personalizate pentru interfața de utilizare, jquery pentru a derula cu rotița mouse-ului roata mouse-ului este posibil, posibilitatea de atingere defilare cinetică (atingere) și el smoothdivscroll plugin.

Apelul plugin-ului în acest exemplu este următorul:

• mousewheelScrolling. "allDirections" - derularea cu rotița mouse-ului în toate direcțiile (nu toate șoarecii au această opțiune)
• manualContinuousScrolling. adevărat - scrolling infinit, cu buclă.
• autoScrollingMode. "onStart" - derularea automată în timpul încărcării paginii și întreruperea acesteia când treceți deasupra butonului de derulare.

Lista tuturor opțiunilor va fi mai mică.

Există destul de multe opțiuni, dar puteți instala doar cele de care aveți nevoie, ceilalți parametri vor fi setați în mod - implicit.

(După ce (Colonii) sunt specificate valorile implicite ale parametrilor)

Configurarea claselor pentru comenzi:

• scrollingHotSpotLeftClass. "scrollingHotSpotLeft" - șir - clasa CSS pentru butonul stânga fierbinte
• scrollingHotSpotRightClass. "scrollingHotSpotRight" - șir - clasa CSS pentru butonul din dreapta
• scrollableAreaClass. "scrollableArea" - șir - clasa CSS pentru elementul real, care poate fi derulat la stânga sau la dreapta
• scrollWrapperClass. "scrollWrapper" - șir - clasa CSS pentru elementul shell

Opțiuni variate:

• hiddenOnStart. false - boolean (true / false) - Stabilește dacă scrollerul va fi vizibil sau ascuns când pagina se încarcă.

• getContent # 111; nload. <> (obiect gol) - obiect - utilizați această opțiune pentru a transfera conținutul extern pe scroller atunci când se încarcă pagina. Această setare, trebuie să treci numele metodei pe care doriți să o utilizați pentru a descărca conținut care sursa de conținut, metoda de manipulare (modul în care conținutul va fi adăugat la scroller), etichetele și opțional, filtrarea (Selectorul utilizat pentru a filtra doar un anumit conținut din conținutul care este selectat pentru transferul) :

• countOnlyClass. „“ (Sir gol) - șir de caractere - o funcție care calculează lățimea totală a zonei derulabil, va conta numai lățimea elementelor, clasa care vor fi specificate în această opțiune. Acest lucru poate fi util dacă aveți conținut care este grupat pe coloane și numai coloanele trebuie defilate. În caz contrar, plug-in-ul rezumă lățimea tuturor elementelor din coloane.

startAtElementId. „“ (Sir gol) - string - dacă doriți să scroller începe cu element definitoriu, specifica ID-ul său CSS această opțiune, iar apoi începe defilare din acel element, în caz contrar defilare va începe cu primul element.

Opțiuni rapide:

• hotSpotScrolling. true - boolean (true / false) - activați butoanele săgeată (da / nu)? Dacă doriți să utilizați derularea prin atingere, este mai bine să setați opțiunea la falsă.
• hotSpotScrollingStep. 15 - număr (în pixeli) - stabilește mărimea pasului pentru derulare. O valoare mai mare va face derularea mai rapida, dar mai putin buna.
• hotSpotScrollingInterval. 10 - numărul (ms) - numărul de milisecunde dintre fiecare etapă a parcurgerii. O valoare mai mare va face derularea mai lentă, deoarece scrollerul va aștepta mai mult înainte de a face următorul pas. Parametrul poate fi comparat cu cadrele din film, adică echivalentul numărului de cadre pe secundă.
• hotSpotMouseDownSpeedBooster. 3 - număr (multiplicator) - utilizați această opțiune dacă doriți să măriți viteza atunci când utilizatorul face clic pe unul din butoanele săgeată (stânga / dreapta). 1 - viteza normală, 2 - de două ori mai rapid decât normal, de trei ori mai repede și așa mai departe. Valoarea implicită este 3.
• visibleHotSpotBackgrounds. "hover" - șir - Setări generale pentru vizibilitatea butoanelor:

Valorile posibile sunt "" (șir gol), "hover", "onStart" sau "always".

1. "" - un șir gol va face ca fundalul butonului să fie invizibil întotdeauna.
2. hover - face vizibilitatea fundalului butoanelor numai atunci când mouse-ul este peste scroller.
3. onStart - face ca fundalul butoanelor X-secunde să fie vizibil (gestionat prin opțiunea hotSpotsVisibleTime) imediat după încărcarea paginii, apoi sunt ascunse.
4. întotdeauna - fundalul butoanelor (adică butoanele) este vizibil tot timpul.

Este important să rețineți. că această opțiune stabilește numai vizibilitatea butoanelor, chiar dacă setați parametrul invizibil, de fapt, butoanele vor fi în continuare active. Dacă doriți ca butoanele să arate diferit, schimbați-le în Photoshop și schimbați codul CSS, iar butoanele existente vor fi un bun punct de plecare pentru experimentele dvs.

• hotSpotsVisibleTime. 5000 - număr (ms) - dacă setați parametrul "onStart" pentru opțiunea visibleHotSpotBackgrounds. apoi după numărul de secunde pe care le specificați aici, fundalul butoanelor va deveni invizibil.
• easingAfterHotSpotScrolling. true - boolean (true / false) - dacă doriți să folosiți efecte de relaxare după derulare utilizând butoanele, setați-le la true.
• easingAfterHotSpotScrollingDistance. 10 - număr (în pixeli) - stabilește distanța în pixeli pe care scrollerul o va trece după ce ați utilizat butoanele pentru al derula. O valoare mai mare va face ca scroller-ul să fie mai neted și mai silențios, o valoare mai mică a parametrului va oferi precizie și rigiditate. Se recomandă împreună cu acest parametru și, de asemenea, efectuați ajustări ale opțiunii easingAfterHotSpotScrollingDuration.
• easingAfterHotSpotScrollingDuration. 300 - număr (în ms) - setați timpul efectului de relaxare după derularea cu butoanele. Împreună cu această opțiune, ar fi bine să configurați parametrul easingAfterHotSpotScrollingDistance
• easingAfterHotSpotScrollingFunction. "easeOutQuart" - șir - Această opțiune specifică funcția de relaxare care va fi utilizată la sfârșitul derulării utilizând butoanele.

Derulați opțiunile cu rotița mouse-ului

• mousewheelScrolling. "- șir - determină dacă rotița mouse-ului va fi activă pentru derulare și dacă da, cum ar trebui să funcționeze:

1. "- un șir gol - abilitatea de a derula cu roata este dezactivată
2. "vertical" - derularea este legată doar de o roată verticală de defilare
3. "orizontală" - derularea este legată doar de o roată de derulare orizontală (nu toți șoarecii)
4. "allDirections" sunt ambele tipuri, iar derularea orizontală și verticală poate fi utilizată pe mouse.

• mousewheelScrollingStep. 70 - număr (în px) - numărul de pixeli scroller scroller atunci când utilizatorul rotește roata mouse-ului. (Roata mouse-ului va trimite un număr care este de obicei în intervalul de la -3 la 3 în funcție de direcție). O valoare mai mare va avea ca rezultat o derulare mai rapidă cu roata datorită unui pas mai mare.
• easingAfterMouseWheelScrolling. adevărat - boolean (adevărat / fals) - Vor fi folosite efecte de relaxare la deplasarea cu roata? (Y / N)
• easingAfterMouseWheelScrollingDuration. 300 - număr (în ms) - specifică timpul efectului de relaxare după ce roata de defilare a fost terminată
• easingAfterMouseWheelScrollingFunction. "easeOutQuart" - șir - stabilește funcția de relaxare care va fi utilizată după finalizarea derulării folosind roata.

Derulați opțiunile prin atingere

• touchScrolling. fals - boolean (true / false) - setat la true. dacă doriți să utilizați capacitatea de a derula cu degetul pe dispozitive touch, cum ar fi iPhone. iPad. android etc. În plus, ținând apăsat butonul mouse-ului și mutați-l, scroller-ul poate fi de asemenea derulat. Pentru a lucra la defilare, trebuie să conectați scriptul jquery.kinetic pe pagină. Și este recomandat să dezactivați opțiunea hotSpotScrolling. care nu funcționează foarte bine pe dispozitivele senzoriale

Opțiuni de derulare manuală (butoane fierbinți, rolă de defilare, atingere derulantă)

• manualContinuousScrolling. false - boolean (true / false) - dacă este setat la true. apoi derularea manuală va fi continuă la stânga sau la dreapta. Funcționează pentru toate tipurile: butoane fierbinți, rotiță de derulare sau atingeți.

Opțiuni automate de derulare

• autoScrollingMode. "" - string - specifică parametrii de derulare automată:

1. "(șir gol) - nu utilizați această opțiune sau nu introduceți un șir gol pentru a dezactiva derularea automată.
2. „OnStart“ - parcurgere va porni automat după pagina este încărcată în conformitate cu opțiunea autoScrollDirection - determină direcția atunci când deplasați cursorul mouse-ului la stânga sau la dreapta hotkey sau folosind rotița mouse-ului, derularea automată se va opri. După aceea, puteți derula numai cu tastele sau cu roata.
3. "întotdeauna" - tastele fierbinți vor fi dezactivate, derularea va avea loc numai în modul automat.

• autoScrollingDirection: "endlessLoopRight" - șir - această opțiune specifică direcția și comportamentul derulării automate și este utilizată numai dacă activarea automată este activată:

1. "dreapta" - derularea automată spre dreapta și oprirea ultimei diapozitive.
2. "stânga" - derulează spre stânga și se oprește din ultima diapozitiv. Setarea acestui parametru la "stânga" are sens doar dacă setați opțiunea startAtElementld. În caz contrar, defilarea pornește de la primul diapozitiv și, prin urmare, derularea spre stânga nu poate începe.
3. "backAndForth" - derularea automată pornește spre dreapta atunci când ajunge la sfârșit, va avea loc o schimbare automată a direcției, iar defilarea va merge spre stânga etc. ca în ping-pong.
4. "endlessLoopRight" - derulare automată continuă spre dreapta
5. "endlessLoopLeft" - derulare automată continuă spre stânga

• autoScrollingStep. 1 - număr (în px) - stabilește lungimea pasului pentru autocrolling. O valoare mai mare va face scrolling-ul mai rapid, dar, de asemenea, face mai puțin buna.
• autoScrollingInterval. 10 număr (în ms) - stabilește numărul de milisecunde dintre pașii de defilare. O valoare mai mare va face derularea mai lentă, deoarece derularea va aștepta mai mult pentru pasul următor. Acest parametru poate fi comparat cu numărul de cadre pe secundă din film.

Opțiuni pentru metoda scrollToElement

• scrollToAnimationDuration. 1000 - număr (în ms) - stabilește timpul pentru derularea animației la un anumit element
• scrollToEasingFunction: "easeOutQuart" - șir - determină ce funcție de relaxare va fi folosită

Descărcați DOWNLOAD: 6687
1,74 Mb Cine a descărcat-o?

Trimiteți-le prietenilor: