Share
În acest tutorial, vom construi un scroller de imagini, folosind funcțiile de animație excelente ale lui jQuery și, în general, având unele distracții cu cod. Scrollerele de imagini nu sunt, desigur, nimic nou; versiunile lor ies tot timpul. Multe dintre ele însă sunt inițiate de utilizator; ceea ce înseamnă că pentru ca conținutul afișat în prezent să se schimbe, vizitatorul trebuie să facă clic pe un buton sau să efectueze alte acțiuni. Acest scroller va fi diferit în sensul că va fi complet autonom și va începe să deruleze odată ce pagina se încarcă.
Widget-ul final va fi complet cross-browser și va funcționa conform așteptărilor în cele mai recente versiuni ale celor mai cunoscute browsere. De asemenea, vom construi o interacțiune adăugând comenzi care permit vizitatorului să schimbe direcția animației. Vom lucra doar cu jQuery și un mic cod HTML și CSS în acest tutorial și ar trebui să fie capabili să execute exemplele fără o configurare completă a serverului web.
Să creați mai întâi pagina HTML subiacentă; într-o pagină nouă din editorul dvs. de text, adăugați următorul cod:
PictureScroller Image Carousel 
Salvați ca imageScroller.html în interiorul unui nou dosar. Conectăm la o foaie de stil personalizată în capul paginii, pe care o vom codifica în scurt timp și vom include un link către versiunea găzduită a celei mai recente versiuni a jQuery în partea de jos a paginii. Încărcarea scripturilor la sfârșitul corpului este o tehnică recunoscută pentru îmbunătățirea performanței paginii dvs. și ar trebui, prin urmare, să fie practicată ori de câte ori este posibil.
Widget-ul nostru constă dintr-o serie de containere imbricate și o grămadă de imagini înfășurate în legături. Imaginile plasate în containere sunt codate ca fiind hardcoded în pagină din motive de accesibilitate. Nu vom recupera imaginile dinamic; toate imaginile plasate în widget vor fi derulate în mod automat (cu condiția ca acestea să fie înfășurate într-o legătură cu numele corespunzător al clasei).
Cel mai exterior container va fi folosit în primul rând pentru scopuri poziționale și de afișare, în timp ce următorul container este folosit pentru a decora widget-ul cu o imagine de fundal. Containerul exterior este, de asemenea, necesar pentru adăugarea comenzilor astfel încât acestea să apară corect deasupra conținutului în IE.
Cel mai interior container este elementul care va fi utilizat pentru vizualizarea imaginilor. Acest element este dat clasei js-disabled, care va fi folosit exclusiv pentru vizitatorii care au JavaScript dezactivat. Vom folosi această clasă pentru a micșora imaginile cu CSS, astfel încât acestea să fie vizibile.
Imaginile au toate dimensiunile uniforme, iar containerele vor fi dimensionate pentru a le adapta destul de bine. Dimensiunea imaginii este, de asemenea, utilizată în scriptul pe care îl adăugăm; Voi sublinia în mod special locul în care se fac aceste referințe, dar trebuie să fiți conștienți de faptul că dacă doriți să utilizați imagini cu o altă dimensiune, scriptul și mărimea containerelor vor trebui să fie ajustate corespunzător.
După legătura cu jQuery, avem un element de script personalizat cu jQuery document.ready shortcut, așteptând să adăugăm codul care va aduce la viață widgetul. Înainte de a face asta, totuși, să adăugăm rapid CSS. Într-un alt fișier nou din editorul de text, adăugați următorii selectori și reguli de stil:
/ * js-disabled class - setarea dimensiunilor imaginilor astfel încât să se potrivească toate în vizualizatorul * / .js-dezactivat img width: 100px; height: 100px; display: block; plutește la stânga; margine: 30px 0 0; #outerContainer width: 542px; height: 202px; margin: auto; Poziția: relativă; #imageScroller lățime: 542px; height: 202px; Poziția: relativă; fundal: # 000000 url (imagini / imageScrollerBG.png) no-repeat; #viewer width: 522px; height: 182px; overflow: ascuns; margin: auto; Poziția: relativă; top: 10px; #imageScroller a: activ, #imageScroller a: vizitat culoare: # 000000; #imageScroller un img frontieră: 0; #controls width: 534px; înălțime: 47px; fundal: url (images / controlsBG.png) no-repeat; Poziția: absolută; sus: 4px; stânga: 4px; z-index: 10; #controale a width: 37px; înălțime: 35px; Poziția: absolută; sus: 3px; #controale a: activ, #controale a: vizitat color: # 0d0d0d; #title culoare: #ffffff; font-family: Arial; font-size: 100%; font-weight: bold; lățime: 100%; text-align: center; margin-top: 10px; #rtl fundal: url (images / rtl.png) no-repeat; stânga: 100px; #rtl: treceți background: url (images / rtl_over.png) no-repeat; stânga: 99px; #ltr fundal: url (imagini / ltr.png) no-repeat; dreapta: 100px; #ltr: treceți background: url (images / ltr_over.png) no-repeat;
Dacă JavaScript este dezactivat și în timp ce pagina se încarcă, toate imaginile vor fi vizibile
Salvați ca imageScroller.css în același director ca și pagina web. Mai întâi avem selectorul de clasă care ne vizează js cu handicap clasă; cu aceste reguli dimensiunea pur și simplu a imaginilor, astfel încât acestea să fie suficient de mici pentru a se alătura unul lângă celălalt de-a lungul lățimii widget-ului. Dacă JavaScript este dezactivat și în timp ce pagina se încarcă, toate imaginile vor fi vizibile - o schimbare rapidă și ușoară, dar una care nu este neapărat o dovadă greșită și, cu siguranță, nu este completă Îmbunătățirea progresivă. Valorile specificate pentru lățime și înălțime vor trebui să varieze în funcție de numărul de imagini din vizualizator.
În urma acestui lucru, avem selectorii și regulile care modelează widget-ul și îl face să funcționeze corect. Majoritatea codurilor sunt doar pentru scopuri de afișare, imagini de fundal, culori etc. O regulă importantă, pe care implementarea se bazează pentru a funcționa corect, este setarea de preaplin: ascunsă în containerul privitor de vizualizare. Aceasta va ascunde imaginile care nu au fost încă afișate și imaginile care au trecut deja prin vizualizator. În această etapă când conducem pagina, ar trebui să vedem ceva de genul:
Unele dintre CSS pe care le vom pune în JavaScript într-un moment și unele dintre elementele pe care le vizăm în CSS nu există încă, dar acesta este tot ce trebuie să intrăm în fișierul CSS.
În etapa finală a acestui tutorial vom adăuga JavaScript jQuery-flavored, care va face ca widgetul să funcționeze și să creeze comportamentul pe care îl dorim. În cadrul funcției anonime goale din partea de jos a paginii HTML adăugați următorul cod:
Accentsconagua
// eliminați js-disabled class $ ("# viewer"). removeClass ("js-disabled"); // crea un container nou pentru imagini $ ("") .attr (" id "," container ") css (position:" absolut ") () () $ (this) .appendTo ("div # container");); // a determina durata de animație bazată pe numărul de imagini (1 secundă pentru fiecare imagine) var duration = $ ("wrapper") lungime * 1000; // viteza de stocare pentru ultima var speed = (parseInt ($ ("div # container" + parseInt ($ ("div # viewer") width ())) / duration; // setarea direcției var direction = "rtl"; // setarea poziției inițiale și a clasei pe direcție (direcție == "rtl")? $ ("div # container") css ("stânga", $ (div divizor) width () , 0 - $ ("div container"). Width ()) addClass ("ltr"); Mai întâi de toate, eliminăm clasa JA-dezactivată din containerul de vizualizare. Apoi vom crea un nou container pentru a reține toate imaginile care se găsesc în widget. Principalul motiv pentru aceasta este ca, în loc să animăm fiecare imagine individual, rezultând un număr potențial mare de animații care rulează simultan, trebuie să animăm doar un element - containerul pe care îl creăm acum.
Lățimea noului container este setată la numărul de imagini înmulțit cu lățimea fiecărei imagini, care în acest exemplu este de 170 de pixeli. Acesta este unul dintre biții de cod pe care i-am spus mai devreme ca să menționez în mod specific și este ceva care va trebui să fie schimbat dacă vom decide să folosim imagini cu o altă dimensiune. Înălțimea recipientului este, de asemenea, setată în mod specific la înălțimea fiecărei imagini.
Este util mai târziu în scenariu să cunoaștem anumite lucruri despre natura animației, cum ar fi viteza acesteia, durata pe care o va dura și direcția călătoriei, așa că vom stabili o serie de variabile pentru a stoca această informație. durata va echivala cu exact o secundă per imagine și se bazează din nou pe numărul de imagini găsite în widget.
Viteza este ușor de realizat, fiind, desigur, distanța de călătorie împărțită la durata călătoriei. Pentru referință, în acest exemplu, viteza exactă a animației va fi de 0.274 pixeli pe milisecundă. Variabila finală, direcția, este un șir simplu care indică faptul că animația se va desfășura de la dreapta la stânga, deși am putea schimba cu ușurință acest lucru la ltr dacă vrem.
În final, am stabilit poziția de plecare a noului container; deoarece animația este setată în prezent la RTL, trebuie să poziționăm noul container de imagine astfel încât marginea stângă să fie setată la marginea dreaptă a vizualizatorului. Dacă setăm animația la ltr, marginea dreaptă a elementului va fi aliniată cu marginea stângă a containerului. Noi determinăm direcția folosind condiționarea ternară JavaScript. Pe lângă poziția sa, oferim noului container un nume de clasă care se potrivește direcției sale, pe care îl putem testa în diferite puncte ale scenariului.
Apoi va trebui să definim o nouă funcție pentru a iniția și a perpetua animația. Există mai multe vremuri diferite în timpul executării normale a scriptului, pe care va trebui să-l animăm, astfel încâlcind această funcție într-o funcție pe care o putem apela atunci când avem nevoie, ajută la reducerea cantității de cod. Adăugați următorul cod:
// funcția animator var animator = funcție (el, timp, dir) // care direcție pentru a derula dacă (dir == "rtl") // adăugați direcția de clasă el.removeClass ("ltr") addClass (" „); // animați el el.animate (stânga: "-" + el.width () + "px", timpul, "liniar" stânga: $ ("div # imageScroller") width (), dreapta: ""); // restart animator animator ($ (this, duration, rtl) div (#) controale ") lungime> 0)? $ (" div # controale ") slideUp (" lent "). altfel // adăugați clasa de direcție el.removeClass ("rtl") addClass ("ltr"); // animați el el.animate (left: $ ("div # viewer"). width () + "px", time, "linear", function () // reseta pozitia containerului $ (this). css (left: 0 - $ ("div # container") width ()); // restart animator animator ($ (this, duration, ltr) div (#) controale ") lungime> 0)? $ (" div # controale ") slideUp (" lent "). Funcția animator acceptă trei argumente; elementul de animat, durata de timp în care ar trebui să ruleze animația și direcția în care elementul ar trebui să fie animat. Funcția este împărțită în două blocuri distincte, unul pentru animația rtl și celălalt pentru ltr.
În fiecare bloc al condiționalului actualizăm numele clasei containerului de imagine pentru a reflecta direcția actuală doar în cazul în care direcția sa schimbat (aceasta este una dintre interacțiunile inițiate de vizitator).
Apoi definim animația, mutând containerul de imagine plus pentru ltr sau minus pentru rtl lățimea containerului de imagine, oferindu-i impresia de alunecare pe vizualizator. Din păcate, nu putem folosi animațiile construite în animații lente, normale sau rapide, deoarece chiar și setarea lentă limitează animația la un timp total de funcționare de numai 600 de milisecunde, ceea ce este prea rapid pentru chiar și numărul mic de imagini pe care le folosim în acest exemplu.
Specificăm șirul liniar ca al treilea argument al metodei animate, care este funcția de relaxare pe care o folosim, și setează animația să meargă la o viteză uniformă de la început până la sfârșit; dacă nu am setat acest lucru, animația s-ar accelera semnificativ și ar încetini la începutul și sfârșitul animației.
În cele din urmă, adăugăm o funcție anonimă de apel invers care va fi executată imediat ce animația se va încheia; în cadrul acestei funcții de returnare a apelurilor, returnați containerul imaginii în poziția sa inițială, apelați recursiv funcția de animator care trece din nou în setările corecte în funcție de ce ramură a condiționalului este executată și ascundeți panoul de control dacă este vizibil. Nu am adăugat încă codul care va crea panoul de control, dar trebuie să adăugăm încă acest cod aici când avem.
Pentru a începe animația când pagina are încărcări, trebuie să sunăm acum la funcția pe care tocmai am definit-o; adăugați următoarea funcție de apeluri:
// anim animați animația ($ ("div # container"), durata, direcția); Tot ce facem este să apelați funcția care trece în elementul de animat și variabilele pe care le-am setat în prima secțiune a codului. Dacă rulam pagina acum, ar trebui să constatăm că animația începe imediat ce pagina a fost încărcată și continuă pe o perioadă nedeterminată, după cum se arată în felul următor:
Adăugarea unei anumite interacțiuni
Suntem acum în stadiul în care avem funcționalitatea de bază a widget-ului și putem începe să adăugăm o interactivitate extra care îl va face să se angajeze. După apelul la funcția de animator, adăugați următorul cod:
// pauză pe mouseover $ ("a.wrapper") live ("mouseover", funcția () // stop anim $ ("div # container" div # controale ") lungime == 0)? $ (""), .attr (" id "," controale ") appendTo (" div # externalContainer ") css (opacity: 0.7). .length == 0)? $ (""), .attr (id:" rtl ", href:" # ", titlu:" rtl ") appendTo (" # controls "): null; )? $ ("") .attr (id:" ltr ", href:" # ", title:" ltr ") appendTo (" .attr ("title"); // adăugați p dacă nu există, actualizați-l dacă acesta este ($ ("p # title"") .attr (" id "," title ") text (titlu) .appendTo (" div # controls "): $ (" p # title ");
După cum indică comentariul, acest manipulator de evenimente va opri animația atunci când vizitatorul va deplasa indicatorul pe una dintre imaginile din widget.
Utilizăm metoda jQuery live (new to 1.3!) Pentru a atașa dispozitivul de manipulare elementelor și specificați o funcție anonimă care trebuie executată la apariția evenimentului.
În cadrul acestei funcții, oprim mai întâi animația folosind metoda stop jQuery, trecând într-o valoare booleană adevărată ca argument. Acest argument va anula coada de animație dacă există; nu ar trebui să facă, deoarece ar trebui să existe o singură animație în orice moment, dar este util să folosiți acest argument doar în cazul în care.
Verificăm dacă panoul de control există deja și dacă nu creăm un nou element div, dați-i un id astfel încât acesta să preia regulile stilului și să îl atașeze la containerul exterior. Apoi, folosim metoda css a jQuery pentru a seta opacitatea într-o manieră încrucișată pentru a evita nevoia de a viza diferite browsere cu CSS-ul nostru și a glisa controalele în jos.
De asemenea, creăm câteva linkuri și le adăugăm la panoul de control; aceste linkuri vor acționa ca butoane care permit vizitatorului să schimbe direcția în care se mișcă imaginile. Vom adăuga manipulatorii pentru aceste butoane într-o clipă. În cele din urmă, obținem conținutul atributului de titlu al legăturii de tip wrapper care a declanșat evenimentul mouseover și a creat un nou element de paragraf cu textul interior setat la titlu. Ne bazăm foarte mult pe scurtătura condiționată ternară JavaScript din această secțiune a codului, deoarece oferă un mecanism excelent pentru crearea și adăugarea elementelor numai dacă acestea nu există deja.
S-ar putea să fi observat, de asemenea, că am stabilit o variabilă pentru a ține conținutul atributului de titlu al declanșatorului curent, s-ar putea să te întrebi de ce nu folosim următorul cod:
// adauga p daca nu exista, actualizati-l daca face acest lucru ($ ("p # title"). $ (“") .attr (" id "," titlu ") text ($ (this) .attr (" titlu ")) );
Motivul pentru aceasta este că nu există ambiguități cu privire la ce se referă la $ (acest). Utilizarea codului de mai sus nu funcționează, dar aruncă erori, care, în timp ce nu sunt fatale, nu sunt totuși liniștitoare pentru potențialii utilizatori ai widget-ului. Utilizarea variabilei asigură pur și simplu evitarea acestor erori. Panoul de control, când este vizibil, apare ca în următoarea captură de ecran:
În urma mouse-ului, animația va fi oprită; îl putem porni din nou cu ușurință folosind un handler de evenimente mouseout, pe care ar trebui să-l adăugăm în continuare:
// reîncepeți pe mouseout $ ("a.wrapper") live ("mouseout", funcția (e) // ascundeți controalele dacă nu treceți peste ele (e.relatedTarget == null)? null: (e.relatedTarget. ()): () () () () () () () () .width ()) + parseInt ($ ("div # viewer") width ();; // work out distance left pentru a călători var distanceLeft = ($ ("div # container" ? totalDistance - (parseInt ($ ("div # container") css ("stânga")) + parseInt ($ ("div # container" ("left")))); // noua durată este distanța stânga / viteza var newDuration = distanceLeft / speed; // restart anim anim ($ ("div # container"), newDuration, $ ("div # container"); ); Din nou, folosim metoda live a lui jQuery, dar de data aceasta, trecem și obiectul evenimentului brut în funcția de apel invers anonim. Folosim imediat acest obiect pentru a vedea dacă indicatorul a trecut pe panoul de control. Dacă nu, ascundem comenzile, dar dacă nu, nu facem nimic și continuăm cu reluarea animației. Observați modul în care folosim un ternar imbricat care este echivalent cu o condiție dacă este altfel condiționată.
Scopul principal al funcției anonime este de a reporni animația, dar înainte de a putea face acest lucru trebuie să elaborăm durata animației; nu putem codifica valoarea, deoarece containerul imaginii se va muta. Durata inițială a fost setată la 1 secundă pentru fiecare imagine, în acest exemplu 5 secunde. Dacă există o singură imagine rămasă vizibilă în vizualizator și am setat din nou animația la 5 secunde, animația va continua semnificativ mai încet.
În primul rând, analizăm distanța totală pe care conteinerea imaginii o deplasează într-o animație completă. Apoi descoperim cât de departe este încă distanța. Va trebui să facem un calcul diferit în funcție de faptul dacă animația se întâmplă de la stânga la dreapta sau de la celălalt, așa că din nou facem uz de condiția condiționată ternară.
Dacă animația are loc de la stânga la dreapta, distanța rămasă pentru a călători este atributul stilului stâng al containerului de imagine (obținut folosind metoda css jQuery) adăugat la lățimea containerului de imagine, scăzut din distanța totală. Dacă containerul de imagini se mișcă de la dreapta la stânga, distanța rămasă pentru a călători este lățimea containerului de imagine minus atributul stil stâng, scăzând din distanța totală. Metodele lățime și css jQuery returnează valorile șirului, deci folosim funcția parseInt a JavaScript pentru a le converti în valori numerice.
Noua durată a animației este apoi calculată prin împărțirea distanței rămase pentru a călători cu viteza pe care am elaborat-o chiar la începutul codului. Odată ce avem această cifră, putem apela funcția de animator din nou, trecând în parametrii necesari, făcând animația pornită din nou de unde sa oprit, în aceeași direcție de deplasare.
Schimbarea direcției
Pentru partea finală a scriptului nostru putem adăuga manipulatorii pentru link-urile din panoul de control folosite pentru a schimba direcția animației. Imediat după codul pe care tocmai l-am adăugat, introduceți următorul cod:
// handler pentru butonul ltr $ ("# ltr") live ("click", functie () // stop animatie $ ("div # container" div container ") removeClass (" rtl ") addClass (" ltr "); // trasează distanța totală de deplasare var totalDistance = parseInt ($ "div # viewer") lățime ()); / / trasează distanța rămasă var distanceLeft = totalDistance - (parseInt ($ ("div # container" container "); width ())); // noua durată este distanța stânga / viteza var newDuration = distanceLeft / speed; // restart anim anim ($ ("div # container"), newDuration, "ltr"); ); Această funcție, declanșată atunci când se face clic pe butonul din stânga-dreapta, este relativ simplă și conține un cod foarte asemănător cu cel pe care l-am folosit deja; vom opri mai întâi animația curentă (aceasta va fi reluată atunci când vizitatorul va muta pointerul de pe panoul de control) și apoi va schimba numele clasei astfel încât să se potrivească cu noua direcție de deplasare. Apoi, elaborăm noua durată a animației în același mod pe care am făcut-o mai devreme, înainte de a mai apela în sfârșit funcția animatorului. Acesta este doar un buton pentru butonul ltr; butonul pentru butonul rtl este aproape identic, dar utilizează calculul corect pentru direcția opusă de deplasare:
// handler pentru butonul rtl $ ("# rtl") live ("click", funcția () // stop animație $ ("div # container" div container ") removeClass (" ltr ") addClass (" rtl "); // trasează distanța totală de deplasare var totalDistance = parseInt ($ "div # viewer") width ()); // trasează distanța rămasă var distanceLeft = totalDistance - (parseInt ($ ("div # viewer" ) .css ("stânga")))); // noua durată este distanța stânga / viteza var newDuration = distanceLeft / speed; // restart anim anim ($ ("div # container"), newDuration, "rtl"); ); Acesta este acum codul de care avem nevoie pentru a scrie, dacă rulați pagina într-un browser în acest moment, ar trebui să găsiți că widgetul funcționează așa cum sa intenționat.
rezumat
În acest tutorial am creat un widget distractiv și interactiv pentru afișarea unei serii de imagini și ar putea fi folosit pentru a afișa logo-urile producătorilor de produse pe care le vindeți sau logoul de software pe care îl recomandați sau orice altceva care vă place. Ne-am concentrat în principal pe aspectele de animație și de interacțiune ale widget-ului, dar, de asemenea, am considerat lucruri, cum ar fi furnizarea unei rezervări de bază în cazul în care JavaScript este dezactivat în browser.
