Bună ziua, vreau să vă ofer o destul de simplă, dar din această lecție nu mai puțin eficientă privind redimensionarea imaginilor folosind un cursor (alergător). Pentru început, să ne dăm seama cu ce vom avea de-a face.
Primul lucru care trebuie început este să conectați JQuery, descărcați aici.
A doua etapă de conectare a jQuery UI este un add-on foarte util pentru jQuery, în acest caz avem nevoie de un widget Slider. Puteți descărca aici. principalul lucru nu uitați să eliminați (Deselectați toate). Cu alte cuvinte, cu excepția Slider și UI Core, în caz contrar riscați să obțineți un fișier uriaș și inutil (pentru această lecție).
Arhiva conține toate cele necesare, dar încă mai am recomanda pentru testare utilizează arhiva mea, care a efectuat deja să lucreze la purificarea sa de stiluri care nu sunt necesare și alte fișiere demonstrative.
Marcarea HTML a documentului nostru este cât se poate de simplă.
Două elemente ale formei de intrare, în care vor fi afișate datele despre dimensiunea imaginii sau, mai degrabă, lățimea și înălțimea:
De fapt, cursorul în sine (sau glisorul, după cum doriți)
Și, desigur, imaginea de mai sus pe care o vom lucra (dimensiunea reală a imaginii este de 666 x 1000 px)
Atenție vă rog! Atunci când adăugați o imagine, este necesar să se prescrie lățimea și înălțimea atributelor.
Acum, jQuery:
Să aruncăm o privire la ceea ce am făcut:
- Folosind comanda attr (), obținem valoarea atributelor lățimii și înălțimii imaginii noastre și le atribuim variabilelor corespunzătoare.
- determină raportul de aspect al lățimii imaginii - înălțime. Acest lucru ne va ajuta să îl proporționăm corect pe pagină.
conectați widgetul Slider la marcajul html și, în special, la adresa noastră
- reglați cursorul pentru cerințele noastre:
orientare - poziție pe pagină, poate lua două valori "orizontală" și "verticală"
min și max - valorile maxime ale scalei minime și (puteți specifica orice, în utilizarea reală de pe site-ul Vă recomandăm să-l lega la dimensiunea maximă a imaginilor)
valoare - definește poziția inițială a cursorului, îi atribuie valoarea lățimii variabile (în general, poate fi orice valoare numerică în limitele min și max)
- evenimente la care sliderul răspunde
- deoarece ui.value - valoarea curentă a opțiunilor de valoare, și este atașat la lățimea atribut (lățimea imaginii), pentru a determina înălțimea, avem nevoie pentru a efectua aritmetică simplă pentru a împărți valoarea curentă latime cu z, care vă veți aminti este raportul de aspect al imaginii. Și rotunjiți valoarea cu ajutorul funcției Math.round.
- comanda val () este folosită pentru a accesa valorile din elementele formularului.
- aici, cel mai important, schimbăm lățimea și înălțimea imaginii direct în pagini folosind comenzile width () și height ()
Dacă doriți, puteți adăuga un mic cod php, pentru a obține date despre dimensiunea fotografiei când este descărcat și apoi veți obține un script destul de generic.
De fapt, totul, mulțumesc pentru atenție, sper că lecția va veni la îndemână.
O lecție din partea cititorului nostru este Maxim Chagin. În sursa lecției cerute să indice, aparent, site-ul său.
Ultimele 5 lecții din rubrica "jQuery"
Astăzi dorim să vă spunem despre biblioteca TypeIt - un plugin jQuery gratuit. Cu aceasta, puteți simula tastarea. Dacă totul este ajustat corect, puteți obține un efect foarte realist.
jQuery plugin pentru crearea unei cronologii.
jQuery plugin pentru crearea unei diagrame Gantt.
Un exemplu de încărcare a unui fișier prin PHP și jQuery ajax.
Un lucru foarte util, imediat a existat o idee de a aplica pe site-ul dvs., pentru că, de exemplu din anumite motive, înălțimea maximă și lățimea maximă nu funcționează foarte bine, însă această funcție este corectă.
DimaBitrix
Un lucru foarte util, mai ales pe site-urile în cazul în care există o galerie de orice imagine, asta e doar prietenul meu galeria foto, ar trebui să-l consilieze pentru a verifica acest tutorial, cred că ar fi încântat. Mulțumesc.
Mulțumesc! Script foarte bun, cu toate acestea, ca totul pe acest site! Mai ales mi-a plăcut demo-ul când l-am deschis și mi-am văzut dragostea acolo - Anna Pletneva!
Te plec pentru tot ce e aici.
Excelent! Multe mulțumiri, de mult căutând ceva de genul acesta))
Alo Am căutat ceva de genul asta de mult timp, dar nu o găsesc. Nu este nevoie să măriți imaginea, ci fișierul SWF. Încercat să înțeleagă acest cod, dar nu a putut. Dacă cineva vă spune cum să faceți acest lucru sau unde puteți căuta, voi fi recunoscător. Vă mulțumim anticipat.
Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți în mod constant în limba pe care o învățați și să vă verificați imediat cunoștințele!
Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!
Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!
Articole similare
Trimiteți-le prietenilor: