1. Slideshow minunat pe jQuery "Slidehow Elastic"
Slideshow cu miniaturi și descrieri de diapozitive. Diverse efecte ale schimbării imaginilor. Există două opțiuni: cu și fără schimbarea automată a diapozitivelor.
2. Glisor CSS3 pur
Slider frumos pentru imagine cu descriere și schimbare automată a diapozitivelor Când treceți cu mouse-ul peste imagine, rotația se oprește. Oprirea este însoțită de un efect CSS3.
3. pluginul jQuery PhotoFrame
Slider frumos pentru galerie.
4. Efecte text "Efecte tipografice"
Efecte de tipografie cool cu CSS3 și jQuery. 7 efecte diferite.
5. Plugin „Darkbox”
Un mic plugin ușor pentru afișarea imaginilor într-un bloc popup.
6. Efectuați cursorul pe jQuery
Efect circular de plutire.
7. Butoane jQuery CSS3 animate
O mulțime de diferite efecte animate CSS3 pentru a crea butoane minunate pentru site-ul dvs. web. Efecte de plutire foarte cool.
8. HTML5 jQuery schimbarea imaginilor de fundal
Când faceți clic pe miniaturi, imaginile de fundal alternează cu un efect de estompare. Când fereastra browserului este redimensionată, imaginea de fundal este redimensionată.
8. Efecte tipografice interactive
Efecte text interesante folosind HTML5 și jQuery (4 efecte diferite). Plasați cursorul peste text pentru a vedea efectul.
9. Subtitrări de imagine pop-up
Multe efecte animate diferite pentru a implementa subtitrări de imagini pop-up.
10. Plugin "Portamento"
Bloc plutitor în jQuery. Rămâne întotdeauna vizibil atunci când derulați pagina în jos.
11. Derulatoare de conținut
Plugin jQuery pentru afișarea defilării în blocuri de dimensiuni fixe. Mai multe stiluri.
12. Pluginul „Bare de derulare”
jQuery implementează derularea orizontală și verticală a conținutului într-un bloc de dimensiuni fixe.
13. Pluginul „Bara de derulare mică”
Plugin jQuery pentru derularea verticală și orizontală a conținutului.
Demo
Descarca
14. Plugin "jScrollPane"
Defilare încrucișată a conținutului dintr-un bloc.
15. Bloc plutitor „Derulați Urmăriți”
Plugin pentru crearea unui bloc care va derula după derularea paginii. Este posibil să remediați blocul făcând clic pe link.
16. Panouri laterale SideBar
Panouri glisante pe toate laturile paginii web.
17. Soluții spectaculoase de stilizare a paginii CSS3
Trei opțiuni pentru implementarea efectelor animate pentru a crea un buton „Site în construcție”.
17. Efect la derularea paginii
Efect uimitor atunci când derulați pagina: elementele se deplasează în afara zonei din spatele ecranului sau, dimpotrivă, se ascund în spatele zonei ecranului. O astfel de soluție este perfectă pentru utilizare pe site-urile de portofoliu, pentru o prezentare eficientă a proiectelor finalizate, cu o scurtă descriere.
19. Plugin „fancyBox 2”
O nouă versiune complet rescrisă a pluginului fancybox cunoscută de mulți, pentru afișarea imaginilor și a altor conținuturi în moduri.
20. Galeria Minimit
Un plugin funcțional cu o gamă largă de caracteristici: galerie, carusel, glisor, meniu, expansor, butoane animate.
21. jQuery News Ticker
Rotator de știri pe site. Mesajele se succed și apar folosind un efect interesant de mașină de scris. Modificarea știrilor poate fi oprită făcând clic pe butonul „Pauză”. Săgețile pot fi folosite pentru a trece de la un mesaj la altul.
22. Imagini adaptive
Imagini scalabile pentru afișare dispozitive mobile... Dimensiunile imaginilor depind de dimensiunea ferestrei. Tehnologii utilizate: JavaScript și PHP5.
23. vScroller
Vertical jQuery, CSS3 scroller. Viteza de derulare și timpii de întârziere sunt reglabili.
24. Meniul derulant pe mai multe niveluri "jQSimpleMenu"
Plugin jQuery proaspăt pentru crearea de meniuri derulante orizontale pe mai multe niveluri pe site.
25. "jsCarousel 2.0"
Plugin jQuery pentru implementarea caruselelor verticale și orizontale.
26. Rotator „Știri dinamice”
Plugin jQuery pentru afișarea frumoasă a ultimelor știri dintr-un flux RSS.
27. Meniu animat
Efect animat când treceți cu mouse-ul peste un element de meniu.
28. Efect text animat
Trei exemple spectaculoase de lucru cu Proprietate CSS Background-clip: text. Efectul CSS3 nu funcționează în browserele mai vechi.
29 CSS3 jQuery efect de estompare
Când plasați cursorul peste un bloc, acesta se mărește, iar restul blocurilor de text sunt neclare în fundal.
30. CSS3 jQuery tooltips
31 jQuery hover tooltips
32. Meniu CSS ușor
33. Note CSS3 și HTML5
Implementarea blocurilor similare cu notele lipicioase cu text.
34. Rlightbox
Afișarea conținutului media în blocuri pop-up: imagini, video, Flash.
35.jQuery buzzer
Măriți suprafața pătrată.
36 CSS3 jQuery descriere imagine
Plugin "Galerie de conținut cu ușă glisantă bazată" pentru implementarea descrierilor de imagini pop-up. Când plasați cursorul peste oricare dintre imaginile afișate, a scurta descriere cu un link către articolul complet. În plan: efectul ridicării ușilor de garaj.
37. Efectul "Înainte și după" plugin jQuery "uCompare"
Tragând declanșatorul, puteți compara două imagini suprapuse. Ideal pentru acele cazuri în care trebuie să aranjați două opțiuni pentru ceva pe pagină: înainte și după.
38. Efect de rotație a imaginii
39. Hărți interactive ale lumii, ale Europei și ale SUA
40. Slide show "Slider.js v1.1"
Mai multe efecte de tranziție diapozitive animate diferite.
1. jQuery Hover Zoom Plugin
O soluție originală pentru implementarea descrierii imaginilor pe hover folosind efectul Zoom.
2. Pluginul „Captify”
3.jDescrierea interogării imaginilor din galerie
Când plasați cursorul, apare o descriere a imaginii, iar imaginea în sine este umplută cu un strat semitransparent de o anumită culoare.
4.jConsultați implementarea subtitrărilor de imagine
Mai multe opțiuni pentru implementarea subtitrărilor pentru imaginile care apar atunci când treceți cursorul mouse-ului peste imagine.
5. jQuery efectul ușii glisante
Când plasați cursorul peste o miniatură, apare o descriere în locul ei.
6. plugin jQuery „Zoominfo”
Când deplasați cursorul peste imagine, acesta scade și apare numele și descrierea fotografiei.
7. Plugin jQuery Mosaic
Implementarea descrierilor pop-up ale imaginilor pe mouse-ul. Există 8 tipuri diferite de semnături pop-up. Le puteți vedea pe pagina demonstrativă.
Când plasați cursorul mouse-ului peste imagine, apare o scurtă descriere cu un link către informații detaliate.
9. Plugin pentru implementarea semnăturii imaginii
O altă opțiune pentru implementarea subtitrărilor de imagini pop-up pe hover. Există o alegere dintre două Efecte jQuery apariția semnăturilor.
10. Descrierea imaginilor „Fereastra de previzualizare”
Plugin pentru semnarea imaginilor. Când plasați cursorul mouse-ului cu un efect animat, apare o descriere a imaginii. JQuery este folosit pentru a crea animația.
Preparat pe baza materialelor
Pluginurile jQuery sunt una dintre cele mai esențiale componente atunci când construiți un site web sau, într-adevăr, orice aplicație web. Acestea vă permit să vă extindeți funcționalitatea. Acest articol listează cele mai utile pluginuri din 2012. Pentru mai mult căutare convenabilă toate pluginurile sunt împărțite în următoarele categorii: Aspect pagină web - plugin-uri, plugin-uri de navigare, plugin-uri Form, pluginuri pentru crearea de glisante, pluginuri pentru diagrame și grafice, efecte pentru imagini și altele. De asemenea, printre aceste pluginuri se află pluginuri care vă vor ajuta să vă construiți aplicațiile receptive.
Pluginuri pentru aspectul paginii
equalize.js este un plugin jQuery care vă permite să creați o structură de site blocată. Vă permite să aliniați înălțimea și lățimea oricărui element.
Noul plugin pentru machete receptive Freetile vă permite să creați elemente de orice dimensiune fără a fi nevoie să creați coloane fixe în grilă.
Gridster.JS plugin de construire jquery trageți și drop - grile. De asemenea, vă permite să eliminați dinamic și să adăugați elemente din grilă.
Zoomooz.js este un plugin jQuery ușor de utilizat pentru mărirea oricărui element al unei pagini web. Puteți adăuga cu ușurință un efect de zoom prin simpla adăugare a clasei „zoomTarget” la orice element HTML. Mărirea poate fi resetată făcând clic pe pagină. Pluginul a fost testat în Internet Explorer 9, Safari 3+, Firefox 3.6+, Opera și Chrome.
Wookmark este un plugin pentru crearea unui șablon dinamic cu mai multe coloane.
jQuery HiddenPosition este un plugin care vă permite să adăugați orice element, chiar dacă este ascuns.
Stellar.js este un plugin jQuery care oferă efect de paralaxă pentru elemente.
Un plugin jQuery care adaugă un efect real de întoarcere a paginii atunci când navigați între secțiuni. Se folosește accelerarea hardware. Funcționează pe tablete și smartphone-uri.
Plugin pentru tipografie receptivă. Vă permite să utilizați un selector care generează dimensiunea ideală a fontului.
Vă permite să creați mișcări animate în jurul site-ului, inclusiv toate transformările posibile
Pluginuri de navigare
HorizontalNav este un plugin jQuery care întinde meniul orizontal pentru a se potrivi cu lățimea completă a containerului. Dacă ați încercat vreodată să creați efectul de a întinde corect meniul de navigare Container CSS proiectul, atunci cu siguranță știți cât de greu este de făcut pentru compatibilitatea cross-browser. Acest plugin face acest lucru cu ușurință.
stickyMojo este un plugin ușor, rapid și flexibil pentru bara laterală lipicioasă din jQuery. Funcționează cu Firefox, Chrome, Safari și IE8 + (acceptă destul de bine versiunile mai vechi ale IE).
ddSlick este un plugin care vă permite să creați meniuri derulante cu imagini și descrieri.
Plugin pentru organizarea ușoară a panourilor drop-down. Pluginul acceptă lucrul cu cookie-uri pentru a stoca starea panourilor. Printre opțiuni există funcții de returnare pentru configurarea deschiderii și închiderii secțiunilor.
Plugin pentru crearea de blocuri pliabile care pot conține orice date într-un spațiu limitat.
Formarea pluginurilor
Pluginul vă permite să definiți nivelul de complexitate a parolei.
Plugin JQuery pentru vizualizarea procesului de încărcare a fișierelor. Suportă drag & drop și creează previzualizări instantanee pentru fotografii.
Plugin care detectează și verifică numerele cardurilor de credit. Vă permite să determinați tipul cardului de credit.
Plugin pentru filtrarea datelor. Puteți filtra datele după etichetă și după mai multe etichete și categorii.
Plugin care validează intrarea E-mail pentru corectitudine conform unei liste pregătite anterior (aici puteți include cele mai populare servicii poștale mail.ru, yandrex.ru, gmail etc.).
Pluginuri pentru crearea de glisoare și carusele
Plugin care vă permite să controlați tranzițiile folosind mouse-ul, touchpad-ul și tastatura. Puteți adăuga tranziții suplimentare la tranzițiile implicite, care se află și în fișierul sursă.
iosSlider
iosSlider este un plugin pentru glisorul de tip cross-browser receptiv.
RSlider - ecran complet glisor receptiv... OSe va regla automat la lățimea ecranului.
Fresco este un plugin lightbox receptiv. Poate fi folosit pentru a crea suprapuneri uimitoare care funcționează excelent pe toate dimensiunile ecranului, în toate browserele, pe toate dispozitivele.
BookBlock: plugin Flip pentru conținut
BookBlock este un plugin jQuery care poate fi utilizat pentru a crea componente asemănătoare unei broșuri care vă permit să creați o navigație de tip flipping. Orice conținut poate fi folosit aici, fie că este vorba de imagini sau text. Pluginul transformă structura numai atunci când este necesar (cu alte cuvinte, numai când pagina este rotită) și folosește suprapuneri și umbre pentru a face să arate real.
Adapter este un glisor de conținut ușor, care oferă o interfață simplă pentru dezvoltatori pentru a crea animații frumoase de rotire a diapozitivelor 2D sau 3D. În prezent, există suport pentru proprietățile 3D în browserele webkit și Firefox. Toate tranzițiile 2D au fost testate în IE6 + și în alte browsere moderne.
Carusel continuu cu mai multe caracteristici utile.Este foarte personalizabil și acceptă chiar și browsere mai vechi.
Rhinoslider- destul de flexibil jQuery plugin pentru prezentare de diapozitive. Acesta oferă nu numai o varietate de efecte, dar este, de asemenea, posibil să adăugați propriile stiluri, efecte și funcții la glisor.
Secvența este un plugin jQuery care derulează conținutul într-un mod original și vă oferă control deplin. Se poate folosi orice tip de conținut; se va derula la nesfârșit. Folosește marcaj semantic și acceptă șabloane receptive și dispozitive bazate pe atingere.
Glisse.js este o galerie foto jQuery simplă, receptivă și foarte personalizabilă.
Pluginuri pentru diagrame și grafice
Morris.js este o bibliotecă ușoară care folosește jQuery și Raphaël pentru a facilita desenarea graficelor de serii temporale.
JQuery Org Chart este un plugin care vă permite să creați structuri de copac cu elemente imbricate. Datele sunt introduse într-o listă imbricată neordonată, ceea ce face pluginul incredibil de ușor de utilizat.
Pluginuri de tipografie
Bacon.js este un plugin jQuery care vă permite să înfășurați text în jurul unei curbe sau linii Bézier.
Textualizer este un plugin jQuery pentru a crea efecte frumoase asupra textului. Lucrări acceptate în: Chrome, Safari 4+, Firefox 3.5+, IE 6,7,8,9+, Opera 10.6+, Mobile Safari (iOS 4)
SlabText este un plugin jQuery foarte util care împarte titlurile linie cu linie înainte de a redimensiona fiecare linie pentru a umple spațiul orizontal disponibil.
trunk8 este un plugin de trunchiere a textului jQuery. Reduce un bloc mare de text într-o secțiune mai mică pentru previzualizare.
Pluginuri pentru crearea diferitelor efecte pentru imagini
Acesta este un plugin jQuery care folosește filtre CSS3 pentru a crea un efect de înclinare.
Plugin pentru implementarea efectului imaginilor receptive.
Plugin jQuery care facilitează crearea hărților de imagini. Cu acest instrument, orice hartă de imagine poate fi evidențiată sau selectată, iar harta poate fi manipulată căi diferite... Funcționează pe toate browserele importante, inclusiv pe Internet Explorer 6, nu folosește Flash și nu necesită altceva decât jQuery. Unele efecte avansate necesită suport HTML5, dar va funcționa în continuare în browsere mai vechi.
Responsive sau, dacă doriți, design web receptiv nu este doar o altă tendință de proiectare acum, este deja un fel de standard de dezvoltare a site-ului web care asigură universalitatea site-urilor web, o percepție vizuală armonioasă pe ecranele diferitelor dispozitive ale utilizatorilor. Mai recent, în timpul dezvoltării șablon receptiv, A trebuit să fac față diferitelor dificultăți de integrare a anumitor glisante și galerii de imagini fără a rupe stilul general de proiectare. Acum totul este mult mai simplu, există un număr imens de soluții gata făcute în rețea și ceea ce este deosebit de plăcut, majoritatea sunt disponibile gratuit, open source.
Datorită varietății de instrumente oferite, am compilat o mică prezentare generală a celor mai notabile evoluții ale glisorelor de imagine responsive jQuery care au apărut recent și sunt distribuite fără restricții, adică absolut gratuit.
Wow glisor
Glisor de imagine jQuery receptiv cu set excelent efecte vizuale(viraje, plecări, estompare, spirale, jaluzele, etc ...) și multe șabloane gata făcute. Cu ajutorul expertului de inserare a paginii încorporat WOW Slider, puteți crea cu ușurință și cu ușurință prezentări uimitoare în câteva minute. Site-ul dezvoltatorului conține toată documentația necesară pentru configurarea și utilizarea pluginului în limba rusă, exemple live excelente ale activității pluginului. De asemenea, este disponibil pentru descărcare separat plugin wordpressși un modul pentru Joomla. Sunt sigur că mulți vor dori acest glisor minunat, atât pentru începători, cât și pentru webmasteri cu experiență.
HiSlider
HiSlider - HTML5, glisor Jquery și galerie de imagini, absolut plugin gratuit pentru uz personal pe site-uri care rulează sisteme populare - WordPress, Joomla, Drupal. Cu ajutorul acestui instrument simplu, dar destul de funcțional, puteți crea cu ușurință diapozitive uimitoare și vii, prezentări eficiente și anunțuri de mesaje noi pe paginile site-urilor dvs. Mai multe șabloane și skin-uri gata făcute pentru glisor, efecte de tranziție uimitoare (schimbare) ale conținutului, ieșirea diverselor conținuturi multimedia: videoclipuri de pe YouTube și Vimeo, setări flexibile ale utilizatorului etc.
Glisor Nivo
Nivo Slider este un vechi bun, bine cunoscut pentru toată lumea din subiect, unul dintre cele mai frumoase și ușor de utilizat glisor de imagine. Pluginul jQuery Nivo Slider este gratuit pentru descărcare și utilizare, distribuit sub licența MIT. Există, de asemenea, un plugin separat pentru WordPress, dar, din păcate, este deja plătit și va trebui să plătiți 29 USD pentru o licență. Este mai bine să faceți puțină magie cu fișierele tematice WP și să atașați versiunea gratuită jQuery a pluginului Nivo Slider pe blogul dvs., deoarece există suficiente informații despre cum să faceți acest lucru pe web.
În ceea ce privește funcționalitatea, totul este în regulă cu asta. Pentru muncă, se utilizează biblioteca jQuery v1.7 +, efecte de tranziție frumoase, setări simple și foarte flexibile, aspect receptiv, decupare automată a imaginilor și multe altele.
Ideea glisorului a fost inspirată de dezvoltatori, care sunt bine-cunoscuți pentru stilul de prezentare a produselor Apple, unde mai multe obiecte mici (imagini) se schimbă făcând clic pe categoria selectată cu un efect de animație simplu. Codrops vă oferă un tutorial detaliat despre cum să creați acest glisor, un aspect HTML complet, un set de reguli CSS și un plugin executabil jQuery, precum și un minunat exemplu live de utilizare a glisorului.
Slit Slider
Glisor de imagine pe ecran complet în jQuery și CSS3 + un tutorial detaliat despre integrarea pluginului în paginile site-ului. Ideea este să deschideți diapozitivul curent cu conținut specific atunci când navigați la conținutul următor sau anterior. CU folosind jQueryși animații CSS puteți crea tranziții unice între diapozitive. Aspectul glisor receptiv asigură aspectul la fel de bun pe ecrane tipuri diferite dispozitivele utilizatorului.
Glisor de conținut elastic
Glisor de conținut, care se reglează automat în lățime și înălțime în funcție de dimensiunea containerului părinte în care este situat. Destul de simplu în execuție și flexibil în glisorul de setări alimentat de jQuery, cu navigare în partea de jos, când dimensiunea ecranului este modificată în jos, navigarea este afișată sub formă de pictograme. Documentație foarte detaliată (tutorial despre creație) și exemple live de utilizare.
Slider 3D Stack
Un glisor experimental care arată imagini cu tranziții din planul 3D. Imaginile sunt împărțite în două grămezi orizontale, cu ajutorul săgeților de navigare, se efectuează schimbarea și tranziția fiecărei imagini ulterioare la starea de vizionare. În general, nimic special, dar ideea în sine și tehnica de execuție sunt destul de interesante.
Un glisor de imagine jQuery foarte simplu, 100% receptiv și cu ecran complet. Glisorul se bazează pe tranziții CSS (proprietatea de tranziție) împreună cu magia jQuery. Lățimea maximă este setată la 100% în mod implicit, astfel încât dimensiunea imaginilor se va schimba în funcție de modificările dimensiunii ecranului. Nu există efecte de animație speciale și delicatese în design, totul este simplu și ascuțit pentru o funcționare lină.
Diapozitive minime
Numele vorbește de la sine, acesta este probabil unul dintre cele mai ușoare și minimaliste glisoare de imagine jQuery pe care le-am întâlnit (plugin în 1kb). ResponsiveSlides.js este un mic plugin jQuery care creează prezentări de diapozitive folosind elemente din interiorul unui container. Funcționează cu o gamă largă de browsere, inclusiv toate versiunile de IE, faimoasa frână de progres, de la IE6 și în sus. Lucrarea folosește tranziții CSS3 împreună cu javascript, pentru fiabilitate. Marcare simplă utilizând o listă neordonată, personalizând tranzițiile și calendarul, automat și control manual comutarea diapozitivelor, precum și suport pentru mai multe prezentări simultan. Iată un „copil” atât de jucăuș.
aparat foto
Camera este un plugin jQuery gratuit pentru organizarea de prezentări de diapozitive pe paginile site-ului, un glisor ușor cu multe efecte de tranziție, cu un aspect 100% receptiv și un foarte setări simple... Se potrivește perfect pe ecranele oricărui dispozitiv de utilizator (monitoare PC, tablete, smartphone-uri și Telefoane mobile). Capacitatea de a demonstra videoclipuri încorporate. Schimbarea automată a diapozitivelor și controlul manual folosind butoane și un bloc de miniaturi de imagini. O galerie aproape completă de imagini într-un design compact.
bxSlider jQuery
Un alt glisor jQuery receptiv destul de simplu. Orice conținut, videoclip, imagini, text și alte elemente pot fi plasate în diapozitive. Suport extins ecranele tactile... Utilizarea animațiilor de tranziție CSS. Un număr mare de variații diferite ale prezentării de prezentări de diapozitive și galerii de imagini compacte. Control automat și manual. Comutarea diapozitivelor folosind butoane și selectând miniaturi. Dimensiune mică a fișierului sursă, foarte ușor de configurat și implementat.
FlexSlider 2
FlexSlider 2 - Versiune actualizata glisor cu același nume, cu o reacție îmbunătățită, reducerea scriptului și reducerea redimensionării / redesenării. Pluginul include un glisor de bază, control al diapozitivelor cu miniaturi, săgeți încorporate stânga-dreapta și o bară de navigare de jos sub formă de butoane. Capacitatea de a afișa videoclipuri în diapozitive (vimeo), setări flexibile ale parametrilor (tranziții, decorare, interval de timp), aspect complet receptiv.
Galleria
Bine cunoscut și destul de popular, plugin receptiv jQuery pentru crearea de galerii de imagini și glisoare de înaltă calitate. Interfața glisantă, datorită panoului său de control seamănă vizual cu un player video familiar, pluginul include mai multe teme diferite. Suport pentru video și imagini încorporate de la servicii populare: Flickr, Vimeo, YouTube și altele. Documentație detaliată la configurare și utilizare.
Coacăze
Un glisor de imagini jQuery gratuit, fără clopote și fluiere, scris special pentru designul web receptiv. Blueberry este un plugin experimental jQuery open source. Design minimalist, fără efecte, doar imagini pop-up care se înlocuiesc reciproc după o anumită perioadă de timp. Totul este foarte simplu, configurați-l, conectați-l și mergeți ...
jQuery popeye 2.1
Un glisor de imagine jQuery foarte compact cu elemente Lightbox. Datorită dimensiunii sale flexibile, este foarte ușor să încorporați în orice container, într-o singură intrare sub formă de miniaturi, atunci când plasați cursorul mouse-ului sau faceți clic pe care este activată o casetă cu o imagine mărită și comenzi. Este convenabil să plasați un astfel de glisor în bare laterale pentru a prezenta produse sau anunțuri de știri. O soluție excelentă pentru site-urile cu o cantitate mare de informații.
Secvenţă
Slider cu receptivitate gratuită cu tranziții CSS3 avansate. Stil minimalist, 3 teme de design, fiecare cadru alunecă orizontal, apare în centru, imaginea merge în stânga, subtitrarea în dreapta, miniaturile sunt duplicate în colțul din dreapta jos. Paginarea prezentărilor produselor pentru vizualizare în fiecare cadru. Comenzile includ, de asemenea, butoane înapoi și înainte. Sprijin de către toți browsere moderne.
Beţivan
Un glisor foarte simplu de imagini atât în ceea ce privește funcționalitatea, cât și setările, din setări există o modificare a vitezei de schimbare a diapozitivelor, conectarea unui mod manual (butoanele de control sunt activate), o prezentare continuă. Acest glisor are dreptul să fie și m-a atras doar prin faptul că este, nu am găsit nimic deosebit de interesant în această dezvoltare, poate că arătam prost)))
Glisor de imagine receptiv
Un glisor de imagine atât de frumos, adaptabil de la Vladimir Kudinov și însoțitori. Un instrument solid, bine conceput, prevăzut cu exemple ilustrative și instrucțiuni detaliate pentru crearea, instalarea și utilizarea. Design adaptiv, butoane frumoase și săgeți în verde, totul este destul de frumos și calm, fără presiune.
FractionSlider
Plugin jQuery paralax gratuit pentru imagini și diapozitive text. Animația de diapozitive are mai multe valori de spectacol cu control complet în fiecare setare de sincronizare și animație. Abilitatea de a anima mai multe elemente pe un diapozitiv simultan. Puteți instala diferite metode animații, diapozitive care dispar sau tranziții dintr-o anumită direcție. Afișare automată și control manual cu săgeți de navigare care apar atunci când treceți cu mouse-ul peste o imagine. 10 tipuri de efecte de animație pentru apariția diapozitivelor și multe altele ...
Revizuirea sa dovedit a fi destul de extinsă, dar nu suficient de informativă din cauza numărului mare de produse luate în considerare. Toate detaliile și descrierile detaliate funcționalitate a unui anumit plugin, puteți afla direct pe paginile dezvoltatorilor. Nu pot decât să sper că cineva a făcut mai ușor pentru cineva să găsească acel instrument foarte necesar pentru a crea glisoare colorate pe paginile site-urilor lor.
V-ați întrebat vreodată dacă ar fi frumos să puteți lucra cu șabloane rusificate? Gândește-te doar un minut. Nu a fost pierdut timp lucrând cu șabloane în limba engleză. Ne grăbim să vă mulțumim cu faptul că acum puteți găsi pe piața TemplateMonster. Textul pentru fiecare dintre ele a fost scris de mână. Și, desigur, toate soluțiile gata făcute sunt incredibil de ușor de utilizat.
Cu tot respectul, Andrew
Browserele creează automat sfaturi de instrumente atunci când webmasterii scriu într-un atribut titlu un anumit text (de obicei un atribut titlu se aplică etichetelor
și
, adică la linkuri și imagini). Când utilizatorii trec cu mouse-ul peste etichetele care conțin atributul titlu, apoi browserul afișează sfatul de instrument. Acestea sunt sfaturile de instrumente ( sfat de instrumente) vom edita.
Acest articol va acoperi:
- cum să utilizați pluginul pentru a înlocui sfaturile de instrumente standard
- cum să configurați sfaturile qTip
- cum să afișați conținutul Ajax într-un tooltip
Sfaturi de instrumente text personalizate simple
Sperăm că nu este necesar să se explice că atributele precum titlul, alt, sunt adesea extrem de necesare. La urma urmei, acestea îi ajută pe utilizatori să navigheze mai bine într-o cantitate mare de informații și, în plus, sunt extrem de utile pentru optimizarea motorului de căutare a site-ului. Singura problemă cu sfaturile de instrumente este că nu pot fi modificate cu stilurile CSS. Pentru a rezolva această problemă, vom folosi oportunitățile.
1. Creați un fișier HTML de schelet de bază care conține atributul title.
Lista linkurilor:
- principalul
- Despre companie
- Contacte
- Portofoliu
2. Acum trebuie să descărcați pluginul qTip din depozit.
3. Conectați fișierele descărcate:
// Biblioteca standard jQuery // În acest fișier vom scrie scripturi jQuery
4. Pentru ca sfatul de funcționare să funcționeze, trebuie doar să scrieți în scripts.js:
$ (document) .ready (function () ($ ("a"). qtip ();));
Această construcție înseamnă că pentru toate linkurile care au atributul title, va fi aplicată metoda qtip ().
Configurare JQuery qTip
1. Puteți personaliza sfaturile de instrumente în moduri diferite. Mai întâi, să schimbăm poziția din care vor fi afișate sfaturile de instrumente.
$ ("a"). qtip ((poziția: (my: "partea de jos a centrului", // Poziția cursorului la: "partea de sus a centrului", // Poziția sfatului de tip toolport: $ (fereastră) // Tooltip-ul va fi nu linge ecranul de margini)));
2. După ce ați reglat poziția, puteți aborda schema de culori a afișajului de tip tooltip. În mod implicit, fișierul jquery.qtip.min.css conține următoarele stiluri de culoare:
Qtip-implicit (stil galben implicit)
Qtip-bootstrap
La unele dintre aceste stiluri se poate adăuga o umbră: qtip-shadow. În plus, nimeni nu se deranjează să-ți creeze propriul stil care să se potrivească bine cu generalul, deși există mai multe decât suficiente standarde.
$ ("a"). qtip ((poziția: (mea: "centrul de jos", la: "centrul de sus", fereastră: $ (fereastră)), stil: (clase: "qtip-verde qtip-umbră")) );
Crearea unui meniu de navigare cu sfaturi de instrumente
1. În primul rând, să creăm un schelet HTML:
#navigation (background: rgb (132,136,206); / * Browsere vechi * / background: -moz-linear-gradient (top, rgba (132,136,206,1) 0%, rgba (72,79,181,1) 50%, rgba (132,136,206) , 1) 100%); / * FF3.6 + * / fundal: -webkit-gradient (liniar, stânga sus, stânga jos, color-stop (0%, rgba (132.136.206,1)), color-stop (50 %, rgba (72,79,181,1)), color-stop (100%, rgba (132,136,206,1))); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (sus, rgba (132,136,206 , 1) 0%, rgba (72,79,181,1) 50%, rgba (132,136,206,1) 100%); / * Chrome10 +, Safari5,1 + * / background: -o-linear-gradient (sus, rgba (132,136,206, 1) 0%, rgba (72,79,181,1) 50%, rgba (132,136,206,1) 100%); / * Opera11,10 + * / background: -ms-linear-gradient (top, rgba ( 132,136,206, 1) 0%, rgba (72,79,181,1) 50%, rgba (132,136,206,1) 100%); / * IE10 + * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 8488ce" , endColorstr = "# 8488ce", GradientType = 0); / * IE6-9 * / background: linear-gradient (top, rgba (132,136,206,1) 0%, rgba (72,79,181,1) 50%, rgba ( 132.136.206,1) 100%); / * W3C * / list-style-type: none; marjă: 100px 20px 20px 20px; umplutură: 0; overflow: ascuns; -webkit-border-radius: 5px; -moz-border-radius: 5px; raza chenarului: 5px; ) #navigation li (margin: 0; padding: 0; display: block; float: left; border-right: 1px solid # 4449a8;) #navigation a (color: #fff; border-right: 1px solid # 8488ce; display : block; padding: 10px;) #navigation a: hover (fundal: # 859900; border-right-color: # a3bb00;)
Rezultatul ar trebui să fie următoarea imagine:
3. Adăugați la fișierul scripts.js:
$ ("# navigare a"). qtip ((poziția: (mea: "centrul de sus", la: "centrul de jos", fereastra: $ (fereastră)), arată: (efect: funcție (offset) ($ (acest ) .slideDown (300);)), hide: (effect: function (offset) ($ (this) .slideUp (100);)), style: (classes: "qtip-green qtip-shadow",))) ;
Acum, când plasați cursorul mouse-ului peste meniul de navigare, va fi afișat un tooltip (atribut title).
Afișarea altui conținut într-o descriere
Pe lângă afișarea etichetelor standard, puteți afișa și alte tipuri de conținut în sfat, de exemplu, preluat dintr-un fișier, dintr-un container ascuns sau dintr-o bază de date și fără a reîncărca pagina folosind tehnologia Ajax.
Acest link preia conținut dintr-un fișier folosind Ajax
Valoarea atributului href = "tooltip.txt" înseamnă că hyperlinkul se referă la un fișier txt obișnuit.
$ (". infobox"). each (function () ($ (this) .qtip ((content: (text: "Loading ..."), // În timp ce se încarcă conținutul, această intrare va fi afișată ajax: ( url: $ (this) .attr ("href") // De unde se obține conținutul), title: (// Adaugă un câmp de titlu la textul tooltip: $ (this) .attr ("title"), buton : adevărat // Adaugă un buton pentru închiderea sfatului de instrumente)), poziție: (my: "centru de sus", la: "centru de jos", efect: fals, // Elimină fereastra de efect de ieșire: $ (fereastră)), arată : (eveniment: „faceți clic”, // Tooltip-ul va fi afișat când faceți clic pe link, îl puteți înlocui cu „hover”, apoi tooltip-ul va fi afișat pe hover solo: true // Permite afișarea unui singur tooltip pe ecranul), ascundeți: "nefocalizează", // Sfatul de instrumente se va închide când faceți clic pe un alt element al stilului paginii: (clase: "qtip-green qtip-shadow")));)). bind ("click", function (e) (e.preventDefault ())); // Când faceți clic pe link, browserul nu va încărca adresa URL
Această tehnică Ajax funcționează numai când serverul rulează. Pentru a-l face să funcționeze computer local trebuie să instalați, de exemplu ,.
Până când am uitat care sunt avantajele și dezavantajele radiatoarelor secționale din aluminiu și ce fel de radiatoare sunt de obicei alese de consumatori.
(Descărcări: 409)
