1. awesome slīdrāde uz jQuery "elastīgo slīdrādi"
Slaidrādi ar miniatūrām un slaidu aprakstiem. Dažādas blakusparādības. Ir divas iespējas: ar automātisko slaidu maiņu un bez.
2. Pure CSS3 slīdni
Cute attēlu slīdnis ar aprakstu un automātisko slaidu maiņu. Kad jūs virzīt kursoru, rotācijas attēls apstājas. Stop ir pievienots CSS3 efekts.
3. JQuery Pievienot "Photorama"
Labs galerijas slīdnis.
4. Teksta efekti "Tipogrāfijas efekti"
Interesantas sekas darbam ar tipogrāfiju ar CSS3 un jquery. 7 dažādas vēsas efekti.
5. Plugin "Darkbox"
Neliels gaismas spraudnis, lai parādītu attēlus uznirstošajā blokā.
6. Hover efekts par jQuery
Apļveida iedarbība.
7. Animated Jquery CSS3 pogas
Daudzas dažādas animācijas CSS3 efektus, lai izveidotu jūsu vietnes apdullināšanas pogas. Tikai ļoti atdzist efektus, kad tie atrodas.
8. HTML5 JQuery Mainot fona attēlus
Noklikšķinot uz sīktēliem, fona attēli aizstāj viens otru ar izplūšanas efektu. Kad pārlūkprogrammas logs tiek mainīts, tiek mainīts fona attēla izmērs.
8. Interaktīvās tipogrāfijas efekti
Interesanti teksta efekti, izmantojot HTML5 un jQuery (4 dažādas sekas). Peles virs teksta, lai redzētu efektu.
9. Uznirstošie attēla paraksti
Daudz dažādu animētu efektu, piesaistot, lai ieviestu uznirstošos attēla parakstus.
10. spraudnis "portamento"
Peldošā bloks uz jQuery. Vienmēr paliek redzamības zonā, ritinot lapu uz leju.
11. Satura scrollingers
jquery spraudnis, lai parādītu, ritiniet fiksētā izmēra blokos. Vairāki stila rotājumi.
12. spraudnis "Scrollbars"
jquery ieviešana horizontālās un vertikālās ritināšanas satura fiksētā izmēra vienībā.
13. Plugin "Tiny Scrollbar"
jQuery spraudnis, lai īstenotu satura vertikālu un horizontālu ritināšanu.
Demo
Lejupielāde
14. spraudnis "jscrollpane"
Pārrobežu pārlūkprogrammas ritināšanas saturs blokā.
15. Peldošā bloks "ritiniet sekot"
Spraudnis, lai izveidotu bloku, kas ritina pēc lapas ritināšanas. Ir iespējams noteikt bloku, noklikšķinot uz saites.
16. Pop-up paneļi "Sidebar"
Paneļi no visām tīmekļa lapas pusēm.
17. Spectacular CSS3 risinājumi plug lapai
Trīs iespējas īstenošanai animētu efektu, lai izveidotu kontaktdakšu "vietne attīstībā".
17. Efekts, ritinot lapu
Pārsteidzošs efekts, ritinot lapu: elementi atstāj no laukuma aiz ekrāna vai otrādi slēpjas aiz ekrāna zonas. Šāds risinājums ir ideāli piemērots izmantošanai portfeļa vietnēs, lai iegūtu iespaidīgu pabeigtu projektu prezentāciju ar īsu aprakstu.
19. spraudnis "Fancybox 2"
Jauna, pilnībā pārrakstīta daudzu spraudņa minēto fancybox versija, lai parādītu attēlus un citu saturu modālos logos.
20. MINIMIT galerija.
Funkcionālais spraudnis ar lielu funkciju kopumu: galerija, karuselis, slīdnis, izvēlne, paplašinātājs, animācijas pogas.
21. JQuery News Ticker
Rotator ziņas uz vietas. Ziņojumi aizstāj viens otru un parādās, izmantojot interesantu iespieddarbu efektu. Jūs varat pārtraukt mainīt ziņas, noklikšķinot uz pogas "Pauze". Arogments var pārvietot no viena ziņojuma uz citu.
22. Adaptīvie attēli.
Mērogojamie attēli displejam mobilās ierīces. Attēlu izmēri ir atkarīgi no loga izmēra. Lietotās tehnoloģijas: JavaScript un PHP5.
23. vscroller
Vertikālās jQuery, CSS3 scroller. Ritināšanas ātrums un aiztures laiks tiek koriģēts.
24. Daudzlīmeņu nolaižamā izvēlne "JQsimplemenu"
Svaigi jquery spraudnis, lai izveidotu vairāku līmeņu horizontālu nolaižamo izvēlni vietnē.
25. "JSCAROUSEL 2.0"
jQuery spraudnis, lai īstenotu vertikālus un horizontālus karuseļus.
26. Rotator "Dynamic News"
jQuery spraudnis par diezgan displeju jaunāko ziņu no RSS lentes.
27. Animācijas izvēlne
Animācijas efekts, kad atrodas izvēlnes elementā.
28. Animācijas teksta efekts
Trīs iespaidīgie piemēri, kas strādā ar CSS īpašums "Fona klips: teksts". CSS3 efekts nedarbojas vecajās pārlūkprogrammās.
29. CSS3 jQuery blur efekts
Kad jūs virzīt kursoru uz bloku, tas palielinās, un atlikušie bloki ar tekstu ir neskaidra fonā.
30. CSS3 JQuery pop-up padomi
31. JQuery Pop-Up Hovering padomi
32. Easy CSS izvēlne
33. Piezīmes CSS3 un HTML5
Bloku ieviešana, kas ir līdzīga albumu grāmatām.
34. RickicBox.
Multivides sistēmas parādīšana pop-up blokos: attēli, video, zibspuldze.
35. JQuery Zumber
Palieliniet kvadrātveida zonu.
36. CSS3 JQuery Image Apraksts
Pievienojot "bāzes bīdāmo durvju satura galeriju", lai īstenotu pop-up attēlu aprakstus. Kad jūs virzīt kursoru uz dažiem attēliem parādās attēli Īss apraksts Atsaucoties uz pilnu rakstu. Kad jūs lidināties: garāžas durvju pacelšanas efekts.
37. Ietekme "pirms un pēc" jQuery plug "ucompare"
Domājot aizkaru, jūs varat salīdzināt divus attēlus virsū viens otram. Ideāli piemērots tiem gadījumiem, kad jums ir jāorganizē divas iespējas par kaut ko lapā: pirms un pēc.
38. Attēlu rotācijas efekts
39. Interaktīvās miera un Eiropas un ASV kartes
40. Slaidrāde "Slider.js v1.1"
Vairākas atšķirīgas animācijas pārejas efekti starp slaidiem.
1. jQuery pievienošana "lidināties tālummaiņu"
Sākotnējais risinājums attēlu apraksta īstenošanai, braucot kursoru, izmantojot tālummaiņas efektu.
2. Plug "Capty"
3. JQuery Image Apraksts galerijā
Kad jūs virzīt kursoru, parādās apraksts, un pats attēls tiek ielej caurspīdīgu slāni, noteiktu krāsu.
4. JQuery ieviešana attēlu parakstu
Vairāki parakstu parādīšanās attēliem, kas parādās, kad jūs pārvietojat peles kursoru.
5. Bīdāmo durvju jQuery efekts
Kad jūs atradīsiet miniatūru, tā vietā parādās apraksts.
6. JQuery Plug "Zoominfo"
Kad jūs virzīt kursoru uz attēlu, tas samazinās un parādās fotoattēla nosaukums un apraksts.
7. JQuery Plug "Mosaic"
Pop-up attēlu aprakstu ieviešana, braucot peles kursoru. Tiek sniegti 8 dažādi pop-up parakstu veidi. Jūs varat redzēt tos demo lapā.
Kad jūs virzīt peles kursoru uz attēlu, atstāj īsu aprakstu, atsaucoties uz detalizētu informāciju.
9. spraudnis, lai īstenotu attēla parakstu
Vēl viena iespēja ieviest uznirstošos attēla parakstus, braucot kursoru. Ir iespēja izvēlēties no diviem jQuery efekts Parakstu izskats.
10. Image "Preview logs" apraksts
Spraudnis parakstu attēliem. Kad jūs virzīt peles kursoru ar animētu efektu, parādās apraksts. Jquery tiek izmantots, lai izveidotu animāciju.
Sagatavots, pamatojoties uz materiāliem
jquery spraudņi ir viens no visvairāk nepieciešamajiem komponentiem, veidojot vietni, un patiešām jebkuru tīmekļa lietojumprogrammu. Tie ļauj jums paplašināt savu funkcionalitāti. Šajā rakstā ir uzskaitīti visnoderīgākie spraudņi 2012. gadā. Vairāk Ērta meklēšana visi spraudņi ir sadalīti šādās kategorijās: tīmekļa lapas izkārtojums - spraudņi, navigācijas etiķetes, veidlapas spraudņi, spraudņi, lai izveidotu slīdņus, spraudņus diagrammām un grafikiem, attēliem un citiem efektiem. Arī starp šiem spraudņiem ir spraudņi, kas palīdzēs jums izveidot adaptīvās lietojumprogrammas.
Lapas izkārtojuma spraudņi
izlīdzināt.JS ir jquery spraudnis, kas ļauj izveidot vietnes bloku struktūru. Tas ļauj jums izlīdzināt jebkura elementa augstumu un platumu.
Jaunais adaptīvo izkārtojumu spraudnis.Freetile ļauj jums izveidot jebkura izmēra elementus, bet nepieciešamība izveidot fiksētu tīkla kolonnu izmēru.
Gridster.js jquery spraudnis ēku vilkšanai un nometšanai - režģis. Arī to var dinamiski izdzēst un pievienot elementus no režģa.
Zoomooz.js. - Tas ir viegli lietojams jquery spraudnis, lai palielinātu jebkuru tīmekļa lapas elementu. Jūs varat viegli pievienot tālummaiņas efektu, vienkārši pievienojot "ZoomTarget" klasi jebkuram HTML elementam. Palielinājumu var atiestatīt, noklikšķinot uz lapas. Spraudnis tika pārbaudīts Internet Explorer. 9, Safari 3 +, Firefox 3.6 +, Opera un Chrome.
Wookmark ir spraudnis, lai izveidotu dinamisku multiscount veidni.
jquery Hiddenposition ir spraudnis, kas ļauj pievienot jebkuru vienumu, pat ja tas ir paslēpts.
Stellar.JS - jquery-spraudnis, kas nodrošina priekšmetu paralaksi.
JQuery spraudnis, kas papildina reālu lappušu flipping pārejas starp sadaļām. Lietota aparatūras paātrinājums. Darbojas uz tabletēm un viedtālruņiem.
Spraudnis adaptīvajai tipogrāfijai. Tas ļauj izmantot selektoru, kas ģenerē perfektu fonta lielumu.
Ļauj veidot animācijas kustības uz vietas, ieskaitot visas iespējamās transformācijas.
Spraudņi navigācijai
Horizontalnav ir jQuery spraudnis, kas stiepjas horizontālajā ēdienkartē, lai tas atbilstu visai tvertnes platumam. Ja esat kādreiz mēģinājis izveidot efektu pareizu spriedzi navigācijas izvēlnes CSS konteiners Projekts, tad jūs noteikti zināt, cik grūti ir jādara savietojamības pārrobežu pārlūkprogrammas. Šis spraudnis to dara viegli.
stickymojo ir vienkāršs, ātrs un elastīgs plug-in "lipuchy" sānu panelis jquery. Tas darbojas ar Firefox, Chrome, Safari un IE8 + (labi atbalsta veco versiju IE).
dDSlick ir spraudnis, kas ļauj izveidot nolaižamās izvēlnes ar attēliem un aprakstiem.
Plugin vienkāršu nolaižamo paneļu organizēšanu. Plugins atbalsta darbu ar sīkfailiem, lai saglabātu paneļu statusu. Opcijas ir atsauces funkcijas, lai konfigurētu sadaļu atvēršanas un aizvēršanas procesu.
Spraudnis, lai izveidotu locīšanas blokus, kas var saturēt datus ierobežotā telpā.
Veidojot spraudņus
Spraudnis ļauj noteikt paroles sarežģītības līmeni.
Jquery-spraudnis, lai vizualizētu failu lejupielādes procesu. Tā atbalsta velciet un nometiet un rada tūlītējus priekšskatījumus fotogrāfijām.
Spraudnis, kas nosaka un pārbauda kredītkaršu numurus. Tas ļauj noteikt kredītkartes veidu.
Spraudnis, lai filtrētu datus. Datus var filtrēt uz taga un vairākiem tagiem un kategorijām.
Spraudnis, kas pārbauda ievadi e-pasta adrese par iepriekš sagatavotā saraksta pareizību (šeit jūs varat iekļaut populārāko pasta pakalpojumi Mail.ru, yandrex.ru, gmail, uc).
Spraudņi slīdņu un karuseļu izveidei
Spraudnis, kas ļauj kontrolēt pārejas, izmantojot peli, skārienpaliktni un tastatūru. Pārejām, kas iestatītas pēc noklusējuma, varat pievienot papildu, kas ir arī avota failā.
iOslider.
iOSSLIDER ir spraudnis adaptīvā pārrobežu pārlūkprogrammas slīdni.
RSlider - pilnekrāna režīms adaptīvais slīdnis. Parh automātiski pielāgojas jūsu ekrāna platumam.
Fresco ir adaptīvs, piemēram, spraudnis. To var izmantot, lai izveidotu satriecošas pārklājuma programmas, kas darbojas perfekti uz visiem ekrāna izmēriem visās pārlūkprogrammās, visās ierīcēs.
Bookblock: spraudņa flip saturs
Bookblock ir jquery-spraudnis, ko var izmantot, lai izveidotu komponentus bukletu veidā, kas ļaus jums izveidot navigāciju, piemēram, "pagriežot lapas". Šeit jūs varat izmantot jebkuru saturu, vaiiet attēlus vai tekstu. Spraudnis pārveido struktūru tikai tad, ja nepieciešams (citiem vārdiem sakot, tikai tad, kad lapa ir pārvērtēta) un izmanto pārklāšanās un ēnas, lai piešķirtu reālisms.
Adapteris ir viegls satura slīdnis, kas nodrošina vienkāršu saskarni izstrādātājiem, lai izveidotu skaistu 2D vai 3D izlīdzināšanas animāciju slaidiem. Pašlaik ir atbalsts 3D īpašībām Webkit un Firefox pārlūkprogrammās. Visas 2D pārejas tika pārbaudītas IE6 + un citās mūsdienu pārlūkprogrammās.
Nepārtraukta karuselis ar vairākām noderīgām funkcijām.Ir viegli konfigurēt un atbalstīt pat vecās pārlūkprogrammas.
Rhinoslider. - diezgan elastīgs jQuery. Spraudnis slaidrādi. Tiek piedāvāti ne tikai dažādi efekti, bet ir iespējams pievienot savus stilus, efektus un funkcijas slīdni.
Secība ir jquery-spraudnis, lai ritinātu saturu ar sākotnējo veidu un nodrošina pilnīgu kontroli. Jūs varat izmantot jebkura veida saturu; Tas ritinātu bezgalīgi. Šeit tiek izmantots semantiskais iezīmējums, kā arī adaptīvās veidnes un ierīces, kas balstītas uz skārienjutēm.
Glisse.js ir vienkāršs, adaptīvs un viegli pielāgojams jquery-foto galerija.
Plugins diagrammām un grafikiem
Morris.js ir viegla bibliotēka, kas izmanto jQuery un Raphaël, lai atvieglotu zīmēšanas laika grafikus.
Jquery Org diagramma ir spraudnis, kas ļauj izveidot koku struktūras ar ligzdotiem elementiem. Dati tiek ievadīti iegultā nerakstītā sarakstā, kas padara spraudni neticami viegli lietojams.
Spraudņi tipogrāfijai
Bacon.js ir jquery spraudnis, kas ļauj jums ietīt tekstu ap beziera vai līnijas līkni.
Textiferizer - jQuery spraudnis, lai radītu skaistu ietekmi uz tekstu. Atbalstītais darbs: Chrome, Safari 4+, Firefox 3.5+, ti, 6,7,8,0, Opera 10.6+, Mobilo safari (iOS 4)
SLABText ir ļoti noderīgs jQuery-spraudnis, kas atvieglo galvenes pirms katras rindas izmēra maiņas, lai aizpildītu pieejamo zonu horizontāli.
trunk8 ir teksts trigele spraudnis jquery. Ļauj samazināt lielu teksta bloku uz mazāku daļu sākotnējai pārbaudei.
Spraudņi dažādu efektu radīšanai attēliem
Tas ir jQuery spraudnis, kas izmanto CSS3 filtrus, lai radītu slīpuma efektu.
Spraudnis, lai īstenotu adaptīvo attēlu ietekmi.
jquery spraudnis, kas ļauj viegli izveidot attēlu kartes. Izmantojot šo rīku, jebkuru kartes attēlu var iezīmēt vai atlasīt, kā arī karti var kontrolēt. dažādi ceļi. Tas darbojas visās galvenajās pārlūkprogrammās, tostarp Internet Explorer 6, tas neizmanto zibspuldzi un neprasa neko citu, bet jQuery. Dažām uzlabotas iedarbības prasa HTML5 atbalstu, bet tas joprojām darbosies vecajās pārlūkprogrammās.
Adaptīvs, vai, ja jūs vēlaties, atsaucīgs web dizains tagad nav tikai cita dizainera tendence, tas jau ir noteikts standarts, lai izstrādātu vietnes, kas nodrošina tīmekļa vietņu universālumu, harmonisku vizuālo uztveri uz dažādu lietotāju ierīču ekrāniem. Vēl nesen, izstrādājot adaptīvā veidneMan bija jārisina dažādas grūtības, integrējot dažus slīdņus un attēlu galerijas, nesalaužot kopējo dizaina stilu. Tagad viss ir daudz vieglāk, tīklā ir milzīgs skaits gatavu risinājumu un tas, kas ir īpaši apmierināts, lielākā daļa no tiem ir brīvi piekļūt, ar atvērtā koda.
Ierosināto instrumentu daudzveidības dēļ es apkopoju nelielu pārskatu par vispiemērotākajiem adaptīvās jquery slīdņu notikumiem, kas parādījās pēdējā laikā un izplata bez jebkādiem ierobežojumiem, t.i. pilnīgi bez maksas.
Wow slīdni.
Adaptīvā jQuery slīdni attēli ar lielisku komplektu vizuālās sekas (pagriezieni, izlidojumi, izplūšana, spirāli, žalūzijas, utt ...) un daudzus gatavus modeļus. Ar palīdzību ievietošanas vednis uzcelta wower, jūs varat viegli un viegli izveidot apdullināšanu slīdrādes dažu minūšu laikā. Izstrādātāja tīmekļa vietnei ir visas nepieciešamās dokumentācijas par spraudņa iestatīšanu un izmantošanu krievu valodā, lieliskos plug-in darbības piemērus. Pieejams arī lejupielādei atsevišķi spraudnis WordPress Un modulis Joomla. Es esmu pārliecināts, ka daudzi vēlaties šo brīnišķīgo slīdni, gan iesācējiem, gan ceļvedis webmother.
Hislider.
HTML5, jQuery slīdni un attēlu galerija, absolūti bezmaksas spraudnis personiskai lietošanai vietnēs, kurās darbojas populārās sistēmas - WordPress, Joomla, Drupal. Ar šo vienkāršo, bet gan funkcionālo instrumentu jūs varat viegli izveidot mūsu vietņu lapās, pārsteidzošās un spilgtas slaidrādes, iespaidīgas prezentācijas un jauno ziņojumu paziņojumus. Vairāki gatavie modeļi un ādas slīdni, apdullināšanas pārejas efekti (mainās) saturs, dažādu multivides satura produkcija:, video ar YouTube un Vimeo, elastīgiem pielāgotiem iestatījumiem utt.
NIVO slīdni.
Nivo Slider ir vecs, labi zināms visiem, kas atrodas tematā, viens no skaistākajiem un viegli lietojamiem attēlu slīdņiem. Jquery Nivo slīdni spraudnis var brīvi lejupielādēt un tālāk izmantot, izplatīts saskaņā ar MIT licenci. Ir arī atsevišķs spraudnis WordPress, bet diemžēl jau maksā un nomest, jo tas būs 29 $ par licenci. Tas ir labāk, lai mazliet mazliet līdz ar WP tēmu failus un piestipriniet bezmaksas jQuery versiju NIVO slīdņa spraudnis jūsu emuārā, kas ir ieguvums, kā to izdarīt pietiekami tīklā.
Attiecībā uz funkcionālo, viss ir perfektā kārtībā. Jquery v1.7 + bibliotēka tiek izmantota darbam, skaistām pārejas efektiem, vienkāršiem un ļoti elastīgiem iestatījumiem, adaptīvo izkārtojumu, automātisko attēlu apgriešanu un daudz ko citu.
Slīdņa ideju iedvesmoja izstrādātāji, kas labi pazīstami visā Apple produktu stilā, kur mainās vairāki mazi vienumi (attēli), lai noklikšķinātu uz izvēlētās kategorijas ar vienkāršu animācijas efektu. Codrops iepazīstina ar jūsu rīcībā detalizētu mācību, lai izveidotu šo slīdni, pilnīgu HTML marķējuma saskaņošanu, CSS noteikumu kopumu un izpildāmo jquery spraudni, kā arī brīnišķīgu dzīves piemēru, izmantojot slīdni.
Slīdēt slīdni.
Pilna ekrāna attēla slīdnis uz jQuery un CSS3 + detalizētu mācību grāmatu par spraudņa integrāciju vietnes lapā. Ideja ir samazināt atvērto strāvas slaidu ar konkrētu saturu, pārejot uz nākamo vai iepriekšējo saturu. No izmantojot jQuery. Un CSS animācijas jūs varat izveidot unikālas pārejas starp slaidiem. Slīdņa adaptīvais izkārtojums nodrošina, ka ekrānos tas būs vienlīdz labi apskatīt ekrāniem. dažādi veidi Pielāgotas ierīces.
Elastīgs satura slīdnis.
Satura slīdni, kas automātiski tiek noregulēts platumā un augstumā atkarībā no mātes konteinera lieluma, kurā tā atrodas. Diezgan vienkāršs dizains un elastīgs slīdnis jQuery iestatījumos ar navigāciju apakšā, mainot ekrāna izmēru līdz samazināšanai, navigācija tiek parādīta kā ikonas. Ļoti detalizēta dokumentācija (nodarbību radīšana) un dzīves piemēri.
3D Stack slider.
Slīdņa eksperimentālā versija, kas demonstrē attēlus ar pārejām no 3D plaknes. Attēli tiek sadalīti divos horizontālos skursteņos, izmantojot navigācijas bultiņu, tiek parādīta un pāreja katru nākamo attēlu skatīšanās valstī. Kopumā nekas īpašs, bet paša ideja un izpildes metode ir diezgan interesanta.
Ļoti vienkāršs, 100% adaptīvs un pilnekrāna jquery slīdni attēli. Slīdņa darbs ir balstīts uz CSS pārejām (īpašuma pāreja) komplektā ar jQuery Magic. Maksimālā platuma vērtība ir 100% instalēta pēc noklusējuma, šādā veidā attēla lielums tiks mainīts atkarībā no ekrāna izmēriem. Nekas īpašas animācijas efekti un prieki dizainā, viss ir vienkāršs un asinājums ar nepārtrauktu darbu.
Minimālie slaidi
Nosaukums runā par sevi, iespējams, ir viens no vieglākajiem un minimālistiskākajiem jquery slīdņiem no attēliem, kurus es satiku (spraudnis 1KB). AtbildesLides.js. -Kornet jQuery spraudnis, kas izveido slaidrādi, izmantojot elementus konteinera iekšpusē. Darbojas ar plašu pārlūkprogrammu klāstu, ieskaitot visas IE versijas - slaveno progresa bremzi no IE6 un augstākas. Papīra izmanto CSS3 pārejas komplektā ar JavaScript, uzticamību. Vienkārša iezīmēšana, izmantojot neierobežotu sarakstu, pārejas un laika intervālu, automātiskās un manuāla kontrole slaidu pārslēgšana, kā arī atbalsts vairākām slīdrām. Tas ir tik frisky "bērns".
Kamera.
Kamera - bezmaksas jquery. Spraudnis, lai organizētu slaidrādi vietņu lapās, gaismas slīdni ar daudziem pārejas efektiem, ar 100% adaptīvu izkārtojumu un ļoti vienkārši iestatījumi. Brīnišķīgi iederas jebkuru lietotāju ierīču ekrānos (PC monitori, tabletes, viedtālruņi un mobilie tālruņi). Spēja demonstrēt iebūvēto video. Automātiska slaidu maiņa un manuāla vadība, izmantojot pogas un attēlu bloku. Praktiski pilnīga attēlu galerija kompaktajā dizainā.
bXSLIDER JQuery.
Vēl viens, diezgan vienkāršs adaptīvs slīdnis par jquery. Slaidos jūs varat ievietot jebkuru saturu, video, attēlus, tekstu un citus elementus. Paplašināts atbalsts sensoriem ekrāniem. Izmantojiet CSS-animācijas pārejas. Liels skaits dažādu variāciju prezentācijā slīdrādes un kompakta attēlu galerijas. Automātiska un manuāla kontrole. Slaidu pārslēgšana, izmantojot pogas, izvēloties sīktēlus. Satura faila mazais izmērs ir ļoti vienkāršs iestatījumos un īstenošanā.
FlexSlider 2.
FlexSlider 2 - Atjaunināta versija Tāda paša nosaukuma slīdnis, uzlabojot reakcijas ātrumu, skriptu ministriju un samazinot saunšanos / pārkraušanu. Spraudnis ietver pamata slīdni, kontrolējot slaidu kontroli, izmantojot sīktēlus, iebūvētās bultiņas pa kreisi pa labi un apakšējo navigācijas rūti pogām. Spēja izvadīt video slaidos (Vimeo), elastīgus parametru iestatījumus (pārejas, dizains, laika intervāls), pilnībā adaptīva izkārtojums.
Galerija.
Labi zināms un diezgan populārs adaptīvais spraudnis jQuery, lai izveidotu augstas kvalitātes galerijas un attēlus. Slīdņa interfeiss, pateicoties tās vadības panelim, vizuāli atgādina parasto video atskaņotāju, spraudņa sastāvs ietver vairākus dažādus rotājumus. Iegulto video un attēlus ar populāri pakalpojumi: Flickr, Vimeo, YouTube un citi. Detalizēta dokumentācija Izveidojot un lietojot.
Melleņu.
Vienkārši bez frills bezmaksas jquery slīdni attēlu, kas rakstīts tieši adaptīvo web dizainu. Melleņu ir eksperimentāls jQuery atvērtā koda spraudnis. Minimālisma dizains, ne efekti, tikai nevainojami pop-up attēlus, kas aizstāj viens otru pēc noteikta laika. Viss ir ļoti vienkāršs, ielieciet, es savienoju un uz priekšu ...
jQuery Popeye 2.1.
Ļoti kompakts jquery attēla slīdnis ar gaismas logu elementiem. Sakarā ar tās elastīgajiem izmēriem, tas ir ļoti vienkārši iestrādāts jebkurā konteinerā vienā amatā formā miniatūru, kad jūs virzīt peles kursoru vai noklikšķiniet uz kura gaismas kaste ir aktivizēta ar palielinātu attēlu un kontroles elementiem. Tas ir ērti izvietot šādu slīdni sānu paneļos, lai prezentētu produktu vai ziņu paziņojumus. Lielisks risinājums vietnēm ar lielu informācijas apjomu.
Secība
Bezmaksas adaptīvais slīdnis ar paplašinātām CSS3 pārejām. Minimālisma stils, 3 dekorēšanas tēmas, katrs rāmis slaidi horizontālā virzienā, kas parādās attēla centrā, paraksta pa labi, miniatūras tiek dublēti apakšējā labajā stūrī. Produktu prezentācijas lapu bojājums skatīšanai katrā rāmī. Kontrole ietver arī pogas uz priekšu un atpakaļ. Atbalstīt visus mūsdienu pārlūkprogrammas.
Zvēliens.
Ir pilnīgi reklāmas slīdni attēlu un funkcionalitāti un uz iestatījumiem, no iestatījumiem, ir izmaiņas ātruma slaidu maiņas, savienojot manuālo režīmu (vadības pogas ir aktivizētas), nepārtraukta slaidrāde. Šis slīdnis ir tiesības būt, un viņš mani piesaista tikai ar to, ka tas ir, es neatradu neko īpaši interesantu šajā attīstībā, es varētu būt bijis meklē slikti)))
Atsaucīgs attēlu slīdnis.
Skaista tāda adaptīvā attēlu slīdni no Vladimirs Kudinovova. Labs, augsti izstrādāts rīks, kas nodrošināts ar vizuāliem piemēriem un detalizētiem norādījumiem, lai izveidotu, uzstādītu un izmantotu. Adaptīvais dizains, Gudrs pogas un zaļās šāvēji, viss ir diezgan gudrs un mierīgi, bez spiediena.
Frakcionējums.
Bezmaksas jquery slīdni spraudnis ar parallax efektu attēliem un teksta slaidiem. Slaidu animācijai ir vairākas parādīt vērtības ar pilnu kontroli katrā laika un animācijas parametrā. Spēja animāciju uzreiz vairākiem elementiem uz slaida. Jūs varat iestatīt dažādas metodes Animācijas, izzušana slaidu vai pārejām no noteiktā virzienā. Automātiskais displejs un manuālā kontrole, izmantojot navigācijas bultiņas pop-up, kad jūs lidināties. 10 veidu animācijas ietekme slaidu izskatu un daudz ko citu veidu ...
Pārskatīšana bija diezgan plaša, bet ne pietiekami informatīva dēļ, ņemot vērā apsvērumu skaitu. Visas detaļas un detalizēti apraksti. funkcionalitāte Viens spraudnis, jūs varat uzzināt tieši izstrādātāju lapās. Vēlams cerēt, ka kāds ir atvieglojis meklēšanu visatbilstošāko rīku, lai izveidotu krāsainu attēlu slīdņus to vietņu lapās.
Vai esat kādreiz domājuši, ka būtu jauki, lai varētu strādāt ar rusificētām veidnēm? Vienkārši domājiet par minūti. Nav laika, lai strādātu ar angļu valodas veidnēm. Mēs steidzamies, lūdzu, lūdzu, tagad var atrast Templatemster Marketer. Katrs no tiem teksts tika uzrakstīts manuāli. Un, protams, visi gatavie risinājumi ir neticami viegli lietojami.
Ar visu cieņu, Andrew
Pārlūkprogrammas automātiski izveido uznirstošos padomus, kad tīmekļa pārziņi ir parakstīti atribūtam virsraksts Jebkurš teksts (kā noteikums, atribūts virsraksts Attiecas uz tagiem
un
. Uz saitēm un attēliem). Kad lietotāji iegūst peles kursoru uz tagiem, kuros atribūts ir klāt virsrakstsPārlūks parāda uznirstošo galu. Šie uznirstošie padomi ( tooltip.) Mēs rediģēsim.
Šis raksts izskatīs:
- kā izmantot spraudni, lai aizstātu standarta uznirstošos padomus
- kā konfigurēt QTIP rīkus
- kā parādīt AJAX saturu uznirstošajā tipā
Vienkārši pielāgotas teksta uznirstošie padomi
Es ceru, ka jums nav jāpaskaidro, ka šādi atribūti kā nosaukumi, ALT bieži vien ir ļoti nepieciešami. Galu galā, tie palīdz lietotājiem labāk pārvietoties lielā skaitā informācijas, un turklāt tas ir ļoti noderīgs meklētājprogrammas optimizācijai. Vienīgā problēma ar uzvednēm - tos nevar mainīt, izmantojot CSS stilus. Lai atrisinātu šo problēmu, mēs izmantojam iespēju.
1. Izveidojiet pamata HTML faila rāmi, kas satur ar nosaukuma atribūtu.
Saites saraksts:
- galvenais
- Par uzņēmumu
- Kontakti
- Portfelis
2. Tagad ir nepieciešams lejupielādēt QTIP spraudni no repozitorija.
3. Pievienojiet lejupielādētos failus:
// Standarta bibliotēka jQuery. // Šajā failā mēs izrakstīsim jQuery skriptus
4. Lai strādātu uznirstošo mājienu, lai reģistrētos skriptos .JS:
$ (Dokuments) .ready (funkcija () ($ ("A"). QTIP (););
Šis dizains nozīmē, ka visām atsaucēm, kas atrodas virsraksta atribūtā, tiks piemērota, izmantojot QTIP () metodi.
Izveidojot jQuery QTIP.
1. Pielāgot uznirstošos padomus var būt atšķirīgs. Lai sāktu, mainiet pozīciju, ar kuru tiks parādīti norādījumi.
$ ("A"). QTIP ((pozīcija: (mans: "apakšējais centrs", // pozīcija kursora vietnē: "Top Center", // pop-up padomi pozīciju: $ (logs) // TIP NAV laizīt malu ekrānu)));
2. Pēc pozīcijas iestatīšanas jūs varat veikt uzvednes krāsu diagrammu. Pēc noklusējuma jquery.qtip.min.css failā ir šādi krāsu stili:
QTIP-noklusējums (dzeltens noklusējuma stils)
Qtip-bootstrap
Dažiem no šiem stiliem jūs varat pievienot ēnu: QTIP-ēnu. Turklāt neviens neietekmē savu stilu, perfekti apvienojumā ar vispārējo, lai gan standarta vairāk nekā ļaunprātīga izmantošana.
$ ("A"). QTIP ((pozīcija: (mans: "apakšējais centrs", AT: "Top Center", Viewport: $ (logs)), stils: (klases: "QTIP-Green QTIP-Shadow")))) ;
Navigācijas izvēlnes izveide ar pop-up uzvednēm
1. Lai sāktu ar, izveidot HTML rāmi:
#Navigācija (fons: RGB (132,136,206); / * vecās pārlūkprogrammas * / fons: -Moz-lineāra gradients (tops, RGBA (132,136,206,1) 0%, RGBA (72,79,181,1) 50%, RGBA (132,136,206 (132,136,206) , 1) 100%); / * ff3.6 + * / fons: -webkit-gradients (lineārs, pa kreisi, kreisā apakšējā daļa, krāsu apstāšanās (0%, RGBA (132,136,206,1)), krāsu apstāšanās (50 %, RGBA (72,79,181,1)), krāsu apstāšanās (100%, RGBA (132,136,206,1))); / * hroms, safari4 + * / fons: -webkit lineārā gradients (tops, RGBA (132,136,206) , 1) 0%, RGBA (72,79,181,1) 50%, RGBA (132,136,206,1) 100%); / * hrome10 +, safari5.1 + * / fons: -O lineārā gradients (tops, RGBA (132,136,206, 1) 0%, RGBA (72,79,181,1) 50%, RGBA (132,136,206,1) 100%); / * Opera11.10 + * / Background: -MS lineārā gradients (Top, RGBA ( 132,136,206, 1) 0%, RGBA (72,79,181,1) 50%, RGBA (132,136,206,1) 100%); / * IE10 + * / Filtrs: progid: dximagetransform.microsoft.gradient (Startcolorstr \u003d "# 8488CE" " , Endcolorstr \u003d "# 8488ce", gradientType \u003d 0); / * IE6-9 * / fons: lineārā gradients (tops, RGBA (132,136,206,1) 0%, RGBA (72,79,181,1) 50%, RGBA ( 132,136,206,1) 100%); / * W3C * / saraksta stila veids: nav; Margin: 100px 20px 20px 20px; Polsterējums: 0; Pārplūde: slēpta; -Webkit-robežu rādiuss: 5px; -Moz-robežu-rādiuss: 5px; Robežu rādiuss: 5px; ) #Navigācija Li (rezerve: 0; polsterējums: 0; displejs: bloks; pludiņš: pa kreisi; Robeža: 1px Solid # 4449a8;) #Navigācija a (krāsa: #FFF; Robežu tiesības: 1px Solid # 8488ce; Displejs: displejs: bloks; polsterējums: 10px;) #Navigācija A: Hover (fons: # 859900; Robežmalas krāsa: # A3BB00;);)
Rezultātā jāiegūst šāds attēls:
3. Skripti.JS failā pievienojiet:
$ ("# Navigācija A"). QTIP ((pozīcija: (mans: "Top Center", AT: "Bottom Center", Viewport: $ (logs)), parādīt: (Effect: Funkcija (OFFSET) ($ (tas ir tas) ) .Slidown (300);)), slēpt: (Effect: funkcija (kompensācija) ($ (tas) .slideup (100);)), stils: (klases: "QTIP-Green QTIP-Shadow"))))))))))))))))))))))))))) ;
Tagad, kad navigācijas izvēlnē pārvietojos peles kursoru, tiks parādīts uznirstošais mājiens (virsraksts).
Parādot citu saturu pop-up padomā
Papildus attēlot standarta tagus, citu saturu var parādīt uznirstošajā mājiņā, piemēram, ņem no faila, no slēptās konteinera vai datu bāzes, un, pārstartējot lapu, izmantojot AJAX tehnoloģiju.
Šī saite aizņem saturu no faila ar AJAX
Atribūta Href \u003d "Tooltip.txt" vērtība nozīmē, ka hipersaite attiecas uz parasto txt failu.
$ (". Infobox"). Katrs (funkcija () ($) (tas) .attr ("href") // kur veikt saturu), virsraksts: (// Pievienot lauku ar pozīciju rīkjoslas tekstā: $ (tas) .attr ("nosaukums"), poga: True // Pievieno pogu aizvēršanai padomiem)), pozīcija: (mans: "Top Center", AT: "Bottom Center", Effect: False, // Noņem Effect Viewport: $ (logs)), parādīt: (notikums: "Noklikšķiniet uz ", // TIP displejs Noklikšķinot uz saites, var aizstāt ar" Hover ", tad uzvedne parādās, kad jūs lidināties Solo: True // ļauj parādīt tikai vienu rīku institūciju ekrānā), paslēpt:" Offocus ", // TIP klikšķi, noklikšķinot uz cita stila lapas elementa: (klases:" QTIP-GREEN QTIP-Ēna ")));)). Saistīts (" Click ", Funkcija (E) (E.preventdefault ())) ; // Noklikšķinot uz saites, pārlūks netiks lejupielādēts URL
Šī AJAX uztveršana darbojas tikai tad, kad serveris darbojas. Lai viņš nopelnījis vietējā datorā, ir jāuzstāda, piemēram,.
Līdz šim es neesmu aizmirsis, kādi plusi un mīnusi ir alumīnija sekcijas radiatori un kas radiatori parasti izvēlas patērētājus.
(Nomešana: 409)
