1. A fantasztikus diavetítés a jquery "elasztikus diavetítésen"
Diavetítés miniatúrákkal és leírásokkal. A képek megváltoztatásának különböző hatásai. Két lehetőség van: automatikus diaváltás és anélkül.
2. Tiszta CSS3 csúszka
Aranyos kép csúszka Leírás és automatikus diaváltás. Ha a kurzort lebegít, a forgási kép leáll. A Stop CSS3 hatással jár.
3. JQUERY DOUNGING "FOTORAMA"
Jó galéria csúszka.
4. Szöveghatások "Tipográfiai hatások"
Érdekes hatások a CSS3-val és a jQuery tipográfia használatára. 7 különböző hűvös hatások.
5. Plugin "Darkbox"
Egy kis világos bővítmény, amely megjeleníti a képeket a pop-up blokkban.
6. Hover-hatás a jqueryre
Körkörös hatás, amikor lebeg.
7. Animált jquery CSS3 gombok
Sok különböző animált CSS3 effektus a lenyűgöző gombok létrehozásához a webhelyhez. Csak nagyon hűvös hatások, amikor lebegnek.
8. HTML5 JQUERY A háttérképek módosítása
Ha rákattint a bélyegképekre, a háttérképek kicserélik egymást a homályos hatással. Amikor a böngészőablak átméretezett, a háttérkép mérete megváltozik.
8. Interaktív tipográfiai hatások
Érdekes szöveghatások HTML5 és JQuery segítségével (4 különböző hatások). Egér a szöveg fölé, hogy megnézze a hatást.
9. Felugró kép aláírása
Sok különböző animációs effektus, amikor a felugró kép aláírásainak megvalósításához kapcsolódik.
10. Plugin "Portamento"
Lebegő blokk a jquery-en. Mindig a láthatósági zónában marad, amikor az oldal lefelé görget.
11. Tartalomkrollerek
jQuery plugin a rögzített méretű blokkok megjelenítéséhez. Több stílusú díszítés.
12. Plugin "scrolllars"
a tartalom vízszintes és függőleges görgetése a rögzített méretű egységben.
13. Plugin "Tiny ScrollBar"
jQuery plugin a tartalom függőleges és vízszintes görgetése.
Demó
Letöltés
14. Plugin "jscrollpane"
Keresztböngésző görgetési tartalma a blokkban.
15. Lebegő blokk "görgetés követése"
Plugin, hogy létrehozzon egy blokkot, amely az oldal görgetése után görget. Lehetőség van a blokk rögzítésére a linkre kattintva.
16. A "Sidebar" pop-up panelek
Futó panelek a weboldal minden oldaláról.
17. Spectacular CSS3 megoldások a plug oldalhoz
Három lehetőség az animált hatások megvalósításához, hogy hozzon létre egy dugó "webhelyet a fejlesztésben".
17. Hatás az oldal görgetésekor
Csodálatos hatás Az oldal görgetésekor: Az elemek a képernyő mögötti területről távoznak, vagy fordítva a képernyő mögött rejtőzik. Az ilyen megoldás tökéletes a portfólió helyszíneken történő használathoz, a befejezett projektek látványos bemutatásához rövid leírással.
19. Plugin "FancyBox 2"
A sok plugin által említett Fancybox új, teljesen átírt változata, a képek és egyéb tartalmak megjelenítéséhez a modális ablakokban.
20. Minimit Galéria.
Funkcionális plugin nagy funkciókkal: galéria, karusszel, csúszka, menü, extender, animált gombok.
21. JQuery News Ticker
Rotátor hírek az oldalon. Az üzenetek cserélik egymást, és megjelennek a nyomtatott gép érdekes hatásával. A HÍREK módosítását a "Szünet" gombra kattintva leállíthatja. Az arrogmenteket az egyik üzenetből a másikba lehet mozgatni.
22. Adaptív képek.
Skálázható képek a megjelenítéshez mobil eszközök. A képméretek az ablak méretétől függenek. Használt technológiák: JavaScript és PHP5.
23. VScroller
Függőleges jquery, CSS3 Scroller. A görgetés sebessége és a késleltetési idő beállítása.
24. Többszintű legördülő menü "jqsimplemenu"
Friss jquery plugin a többszintű vízszintes legördülő menü létrehozásához a webhelyen.
25. "JSCAROUSEL 2.0"
jquery plugin a függőleges és vízszintes karusszel megvalósításához.
26. Rotátor "Dinamikus hírek"
jQuery plugin a legfrissebb hírek megjelenítéséhez RSS Ribbon.
27. Animált menü
Animált hatás, amikor a menüelem lebegése.
28. Animált szöveghatás
Három látványos példa a munkára CSS tulajdonság "Háttér-klip: szöveg". CSS3 A hatás nem működik a régi böngészőkben.
29. CSS3 jquery elmosódott hatása
Amikor a kurzort a blokkba vetíti, ami növekszik, és a megmaradt blokkok a szöveg homályos a háttérben.
30. CSS3 jquery pop-up tippek
31. JQuery pop-up lebegő tippek
32. Könnyű CSS menü
33. Megjegyzések CSS3 és HTML5
A blokkokhoz hasonló blokkok végrehajtása.
34. RIVILLBOX.
Média rendszer megjelenítése pop-up blokkokban: képek, videó, flash.
35. JQuery Zumber
Növelje a négyzetterületet.
36. CSS3 JQuery Image Leírás
Csatlakoztatás "alapú tolóajtó tartalomgaléria", hogy megvalósítsa a pop-up kép leírásait. Amikor lebegíted a kurzort a bemutatott képekhez rövid leírás A teljes cikkre való hivatkozással. Ha lebeg, a garázskapuk felemelésének hatása.
37. A "jquery dugó" előtt és után "
Gondolva a függönyt, összehasonlíthatja a két képet egymásra. Ideális azokban az esetekben, amikor két lehetőséget kell szervezni az oldalon bármiért: előtt és után.
38. Képforgó hatás
39. A béke és az európai és az USA interaktív térképei
40. Slide show "Slider.js v1.1"
Több különböző animációs átmeneti hatás a diák között.
1. JQUY DOUNGING "HOVER ZOOM"
Az eredeti megoldás a képek leírásának megvalósításához, amikor a kurzort zoom hatással lebegteti.
2. Csatlakoztassa a "Csatlakozó"
3. JQuery Image Leírás a galériában
Amikor lebegíti a kurzort, megjelenik egy leírás, és a kép maga áttetsző réteg, egy bizonyos színű.
4. A képmegjelölések jquery megvalósítása
Számos olyan kiviteli alakja van, amelyek az egérmutatót lebegnek, amikor megjelennek.
5. A csúszó ajtók jquery hatása
Ha egy miniatűren lebeg, akkor a leírás a helyén jelenik meg.
6. A "Zoominfo" jquery dugó
Ha a kurzort a képre helyezi, csökken, és megjelenik a fotó neve és leírása.
7. JQuery dugó "mozaik"
A felbukkanó kép leírásainak megvalósítása az egér kurzor lebegése során. 8 különböző típusú pop-up aláírást biztosítanak. Láthatja őket a demó oldalon.
Ha az egérmutatót a képre lehúzza, rövid leírást hagy a részletes információkra való hivatkozással.
9. Plugin a kép aláírásának megvalósításához
Egy másik lehetőség a pop-up kép aláírásainak megvalósításához a kurzor lebegése során. Van lehetőség közül választhat kettőből jQuery Effects Az aláírások megjelenése.
10. Az "Előnézeti ablak" kép leírása
Plugin az aláírási képekhez. Ha az egérmutatót animált hatással mozgatja, megjelenik a leírás. A jquery animáció létrehozására szolgál.
Az anyagok alapján készült
a JQuery plugins a leginkább szükséges komponensek közé tartozik, amikor egy webhelyet építenek, és valójában bármely webes alkalmazás. Lehetővé teszik, hogy bővítse a funkcionalitását. Ez a cikk 2012-ben felsorolja a leghasznosabb bővítményeket. Többért kényelmes keresés az összes bővítmény a következő kategóriákra oszlik: weboldal elrendezés - pluginok, navigációs címkék, pluginok, plug-inek a csúszkák létrehozásához, plug-inek a diagramokhoz és grafikonokhoz, képekhez és mások számára. Ezek közül a bővítmények között van olyan bővítmények, amelyek segítenek létrehozni az adaptív alkalmazások.
Oldal elrendezési bővítmények
equalize.js egy jquery plugin, amely lehetővé teszi a webhely blokkszerkezetének létrehozását. Lehetővé teszi bármely elem magasságát és szélességét.
Az Adaptive Layouts.freetile új bővítmény lehetővé teszi bármilyen méretű elemek létrehozását, míg a rácsoszlopok rögzített méretének megteremtésének szükségességét eltűnik.
Gridster.js jquery plugin az épület drag and drop-rácshoz. A használatával is dinamikusan törölhető és elemeket adhat a rácsból.
Zoomooz.js. - Ez egy könnyen használható jquery-plugin, amely növeli a weboldal bármely elemét. Könnyedén hozzáadhat egy zoomhatást, ha egyszerűen hozzáadja a "zoomtarget" osztályt bármilyen HTML elemhez. A növekedés visszaállítható az oldalra kattintva. A plugint teszteltük Internet böngésző. 9, Safari 3 +, Firefox 3.6 +, Opera és Chrome.
A WOÓMARK egy dinamikus multinkiscood sablon létrehozásához.
a JQuery HiddenPosition egy plugin, amely lehetővé teszi, hogy bármilyen elemet adjon hozzá, még akkor is, ha rejtve van.
Stellar.js - JQuery-plugin, amely a parallaxis elemek hatását biztosítja.
A JQuery plugin, amely hozzáadja az oldalak valódi átkapcsolását a szakaszok közötti átmenet során. Használt hardveres gyorsítás. Tablettákon és okostelefonokon működik.
Plugin adaptív tipográfiahoz. Lehetővé teszi a tökéletes betűméretet generáló választó használatát.
Lehetővé teszi, hogy animált mozgásokat építsen a webhelyen, beleértve az összes lehetséges transzformációt is.
Navigációs pluginok
A Vízszintes Nav egy jquery plugin, amely a vízszintes menüt biztosítja, hogy megfeleljen a tartály teljes szélességének. Ha valaha is megpróbálta létrehozni a navigációs menü megfelelő feszültségének hatását CSS tartály A projekt, akkor biztosan tudja, milyen nehéz a böngésző kompatibilitásának. Ez a plugin könnyen.
a Stickymojo egy könnyű, gyors és rugalmas plug-in "Lipuchy" oldalpanel a jquery-en. A Firefox, a Chrome, a Safari és az IE8 + (jól támogatja a régi verzió IE).
a DDSlick egy plugin, amely lehetővé teszi a képek és leírások legördülő menük létrehozását.
Plugin a legördülő panelek egyszerű szervezéséhez. A plugin támogatja a cookie-kkal való munkát a panelek állapotának tárolásához. A lehetőségek közül a referenciafunkciókat konfigurálják a szakaszok nyitási és zárási folyamatát.
Plugin, hogy olyan összecsukható blokkokat hozzon létre, amelyek tartalmazhatnak bármilyen adatot korlátozott helyen.
Pluginok kialakítása
A plugin lehetővé teszi a jelszó összetettségének meghatározását.
Jquery-plugin a fájl letöltési folyamatának megjelenítéséhez. Támogatja a Drag & Drop-ot, és azonnali előnézeteket hoz létre a fotókhoz.
Plugin, amely meghatározza és ellenőrzi a hitelkártyaszámokat. Lehetővé teszi a hitelkártya típusának meghatározását.
Plugin az adatok szűréséhez. Szűrheti az adatokat a címkén és több címkék és kategória esetén.
Plugin, amely ellenőrzi a bemenetet email az előkészített lista helyességéről (itt a legnépszerűbbek levélszolgáltatások Mail.ru, yandrex.ru, gmail stb.).
Pluginok csúszkák és karusszel létrehozásához
Plugin, amely lehetővé teszi az átmenetek vezérlését az egér, az érintőképernyő és a billentyűzet segítségével. Az alapértelmezés szerint beállított átmenetekhez további, a forrásfájlban is hozzáadhat.
iosslider.
az Iosslider egy adaptív kereszt böngésző csúszka plugin.
RSLIDER - Teljes képernyős adaptív csúszka. RÓL RŐLh automatikusan alkalmazkodik a képernyő szélességéhez.
A fresco egy adaptív Likebox-plugin. Használható lenyűgöző overlay programok létrehozására, amelyek tökéletesen működnek az összes böngészőben lévő képernyőméreteken, minden eszközön.
Bookblock: plugin flip tartalom
A BookBlock egy jquery-plugin, amely felhasználható komponensek létrehozására olyan füzetek formájában, amelyek lehetővé teszik a navigáció létrehozását, mint a "oldalak fordítása". Itt bármilyen tartalmat használhat, legyen IT képek vagy szöveg. A plugin átalakítja a szerkezet csak szükség esetén (más szóval, csak akkor, ha az oldal megfordult) és felhasználások átfedő és árnyékok kölcsönöz realizmus.
Az adapter egy egyszerű tartalomcsomagoló, amely egyszerű felületet biztosít a fejlesztők számára, hogy hozzon létre egy gyönyörű 2D vagy 3D-s igazítási animációt a diák. Jelenleg támogatja a 3D tulajdonságait a Webkit és a Firefox böngészők számára. Az összes 2D átmenetet IE6 + és más modern böngészők teszteltük.
Folyamatos karusszel több hasznos funkcióval.Könnyen konfigurálható és támogatja a régi böngészőket is.
Rhinoslider. - nagyon rugalmas jquery. Plugin diavetítés. Nemcsak számos hatást kínálnak, hanem saját stílusukat, hatásait és funkcióit hozzáadhatja a csúszkához.
A szekvencia egy jquery-plugin, amely az eredeti módon görgethető, és teljes körű vezérlést biztosít. Bármilyen típusú tartalmat használhat; Végtelenül fog görgetni. A szemantikai jelölést itt használják, valamint az adaptív sablonokat és az érintőképességen alapuló eszközöket.
A glisse.js egy egyszerű, adaptív és könnyen testreszabható jquery-fotógaléria.
Pluginok diagramokhoz és grafikonokhoz
A Morris.js egy könnyű könyvtár, amely Jquery és Raphaël-t használ, hogy megkönnyítse az ütemezési ütemtervek ütemezését.
A JQuery Org diagram egy plugin, amely lehetővé teszi, hogy a fák struktúrákat hozzon létre beágyazott elemekkel. Az adatok beágyazott rendezetlen listába kerülnek, ami a plugint hihetetlenül könnyű használni.
Plugins a tipográfiahoz
A Bacon.js egy jquery plugin, amely lehetővé teszi, hogy a szöveget a Bezier vagy a vonal görbe körül tekerje.
Textualizer - JQuery plugin, hogy szép effekteket hozzon létre a szöveg felett. Támogatott munka: Chrome, Safari 4+, Firefox 3.5+, IE 6,7,8,0, Opera 10.6+, Mobil Safari (iOS 4)
A SlabText egy nagyon hasznos jquery-plugin, amely fényesíti a fejléceket, mielőtt megváltoztatná az egyes sorok méretét, hogy a rendelkezésre álló területet vízszintesen töltse ki.
a Trunk8 egy szöveg TrigTele plugin jqueryben. Lehetővé teszi, hogy egy nagy szövegblokkot kisebb részre vághasson előzetes ellenőrzés céljából.
Plugins a képek különböző effektusok létrehozásához
Ez egy jquery plugin, amely CSS3 szűrőket használ a döntési hatás létrehozásához.
Plugin az adaptív képek hatásának megvalósításához.
jQuery plugin, amely megkönnyíti a képkártyák létrehozását. Ezzel az eszközzel minden térképkép kiemelhető vagy kiválasztható, valamint a kártya vezérelhető. különböző utak. Minden nagyobb böngészőn működik, beleértve az Internet Explorer 6-ot, nem használja a vakut, és nem igényel semmit, csak jquery. Néhány fejlett hatás HTML5 támogatást igényel, de még mindig a régi böngészőkben dolgozik.
Adaptív, vagy ha szeretné, az érzékeny webdesign most nem csak egy másik tervező trend, akkor ez már egy bizonyos szabvány a fejlesztő webhelyek számára, amelyek a weboldalak egyetemességét, harmonikus vizuális érzékelést biztosítanak a különböző felhasználói eszközök képernyőkéről. A közelmúltban, amikor fejlődik adaptív sablonKülönböző nehézségekkel kellett foglalkoznom bizonyos csúszkák és képgalériák integrációjában, anélkül, hogy megszakítanám az általános tervezési stílust. Most minden sokkal könnyebb, hatalmas számú készenléti megoldás van a hálózatban, és mi különösen örülve, legtöbbjük szabadon hozzáférhető, nyílt forráskódú.
A javasolt eszközök sokszínűségének köszönhetően összeállítottam az adaptív jquery csúszkák legjelentősebb fejlesztéseinek, amelyek legutóbbi időben megjelentek, és korlátozások nélkül elosztottak, vagyis korlátozások nélkül. teljesen szabad.
Wow csúszka.
Adaptív jquery csúszka, csodálatos készlet vizuális effektek (fordulatok, indulások, elmosódások, spirálok, vakok stb. ...) és sok kész mintázat. A beillesztett varázsló segítségével a Wowerbe épített, könnyen és könnyen létrehozhat lenyűgöző diavetítést percek alatt. A fejlesztő honlapja a szükséges dokumentációval rendelkezik a dugaszolás beállítása és felhasználása az orosz, kiváló élő példákban a plug-in műveletben. Szintén letölthető külön plugin wordpress És a Joomla modul. Biztos vagyok benne, hogy sokan szeretik ezt a csodálatos csúszkát, mind a kezdők, mind a vezető webmátot.
Hislider.
HTML5, JQUERY Slider és képgaléria, abszolút ingyenes plugin személyes használatra a népszerű rendszerek - WordPress, Joomla, Drupal. Ezzel az egyszerű, de inkább működő eszközzel könnyedén létrehozhat weboldalaink oldalainkat, csodálatos és fényes diavetítéseket, látványos bemutatókat és új üzenetek hirdetését. Számos kész mintát és bőrt egy csúszka, lenyűgöző átmeneti hatások (változás) tartalom, különböző multimédiás tartalom kimenete: videó a YouTube és a Vimeo, rugalmas egyéni beállítások stb.
Nivo csúszka.
A Nivo csúszka egy öregfajta, jól ismert mindenkinek, aki a témában van, az egyik legszebb és könnyen használható kép csúszka. A JQUERY NIVO Slider plugin szabadon letölthető és további felhasználás, amelyet az MIT engedély keretében oszthat meg. Van egy külön bővítmény a WordPress számára, de sajnos már kifizetett és leesik, hogy 29 dollár lesz engedélyenként. Jobb, ha egy kicsit felkészülünk a WP téma fájljaival, és rögzítik a NIVO Slider plugin ingyenes jquery verzióját a blogodhoz, az információ hasznát Hogyan kell csinálni a hálózatban.
Ami a funkcionális, minden tökéletes rendben van. A jQuery v1.7 + könyvtárat a munka, a gyönyörű átmeneti hatások, az egyszerű és nagyon rugalmas beállítások, az adaptív elrendezés, az automatikus kép vágás és még sok más.
A csúszka ötletét a fejlesztők ihlette, az Apple termékeinek teljes stílusának jól ismert, ahol több kis elem (kép) változik, hogy kattintson a kiválasztott kategóriára az animáció egyszerű hatásával. A Codrops az Ön rendelkezésére bocsátja az Ön rendelkezésére álló leckét, hogy létrehozza ezt a csúszkát, a HTML jelölés teljes összehangolását, a CSS-szabályokat és a végrehajtható jquery plugint, valamint egy csodálatos életmódot, amely egy csúszkát használ.
Slit csúszka.
Teljes képernyős kép csúszka a jQuery és a CSS3 + részletes tankönyv a plug-in integrálására a webhely oldalon. Az ötlet az, hogy a következő vagy korábbi tartalomra váltson egy adott tartalommal egy adott tartalommal. TÓL TŐL jquery használata. És a CSS animációit egyedi átmeneteket hozhat létre a diákok között. A csúszka adaptív elrendezése biztosítja, hogy a képernyőn megjelenjen a képernyőkön a képernyőkön. különböző típusok Egyéni eszközök.
Elasztikus tartalom csúszka.
A legmagasabb tartalom csúszka a szélességben és magasságban van beállítva a szülő tartály méretétől függően, amelyben található. Elég egyszerű, egyszerű design és rugalmas csúszka a jquery beállításaiban, az alján navigációval, a képernyő méretének megváltoztatásakor a navigáció ikonként jelenik meg. Nagyon részletes dokumentáció (lecke létrehozása) és az élő példák használata.
3D Stack Slider
A csúszka kísérleti változata, amely bemutatja a 3D-s síkból származó átmeneteket. A képeket két vízszintes halmozásra törik, a navigációs nyíl segítségével megjelenik, és az egyes későbbi képeket a megtekintési állapotba mutatja. Általában semmi különös, de a végrehajtás nagyon ötlete és technikája meglehetősen érdekes.
Nagyon egyszerű, 100% adaptív és teljes képernyős jquery csúszka. A csúszka munkája CSS-átmeneteken (tulajdon-átmenet) alapul, jquery mágiával ellátott kötegben. A maximális szélességi érték 100% -kal van telepítve alapértelmezés szerint, így a képek mérete a képernyőméretek függvényében megváltozik. Semmi különleges animációs hatások és élvezetek a tervezésben, minden egyszerű, és megszakítás nélküli munka.
Minimális csúszdák
A név önmagában beszél, talán az egyik legkönnyebb és minimalista jquery csúszkák az általam teljesített képek (plugin 1kb). Felelősségek. -Kornet JQuery plugin, amely diavetítést hoz létre a tartály belsejében lévő elemekkel. Működik a böngészők széles skálájával, beleértve az IE - a híres haladási fék minden verzióját, az IE6-tól és magasabbra. A papír CSS3 átmeneteket használ egy kötegben a JavaScript-szel, a megbízhatóság érdekében. Egyszerű jelölés egy rendezetlen listával, átmeneti és időintervallumok beállítása, automatikus és manuális irányítás A csúszdák átkapcsolása, valamint számos diavetítés támogatása. Ez egy ilyen frisky "baba".
Kamera.
Fényképezőgép - ingyenes jquery. Plugin a diavetítés szervezéséhez a webhelyek oldalain, egy fénycsúszda, amely számos átmeneti hatással, 100% adaptív elrendezéssel és nagyon egyszerű beállítások. Csodálatosan illeszkedjen a felhasználói eszközök (PC monitorok, tabletták, okostelefonok és mobiltelefonok). A beépített videó bemutatása. Automatikus diaváltás és kézi vezérlés gombokkal és blokk segítségével. Gyakorlatilag egy teljes kép galériája kompakt kialakításban.
bXSLIDER JQUERY.
Egy másik, meglehetősen egyszerű adaptív csúszka a jquery-en. A diákban bármilyen tartalmat, videót, képet, szöveget és egyéb elemeket elhelyezhet. A szenzoros képernyők hosszabb támogatása. Használja a CSS-animációs átmeneteket. Számos különböző változat a diavetítések és a kompakt képgalériák bemutatásában. Automatikus és kézi vezérlés. A csúszdák kapcsolása a gombokkal a miniatűrök kiválasztásával. A forrásfájl kis mérete nagyon egyszerű a beállításokban és a megvalósításban.
FLEXSLIDER 2.
FLEXSLIDER 2 - Frissített verzió Az azonos név csúszka, jobb válaszarány, szkript minisztérium, és minimalizálja az újraképítő / újradíjat. A bővítmény tartalmaz egy alap csúszka szabályozza a kontroll diák miniatűrök használata, a beépített nyilak a bal-jobb és az alsó navigációs panelen a gombok formájában. Az a képesség, hogy kimeneti video diák (Vimeo), rugalmas beállítási paraméterek (átmenetek, tervezés, időintervallum), teljesen adaptív elrendezése.
Galleria.
Jól ismert és elég népszerű adaptív plugin JQUERY, hogy kiváló minőségű galériákat és csúszkákat hozzon létre. A csúszka felület, a kezelőpanelnek köszönhetően vizuálisan hasonlít a szokásos videolejátszóra, a plugin összetétele számos különböző díszítést tartalmaz. Beágyazott videók és képek népszerű szolgáltatások: Flickr, Vimeo, YouTube és mások. Részletes dokumentáció Beállítással és használatával.
Áfonya.
Egyszerű frills nélkül FREE FREE JQUIZE A képek, amelyeket kifejezetten adaptív webdesignért írtak. Az áfonya egy kísérleti jquery nyílt forráskódú plugin. Minimalista kialakítás, nincs hatása, csak zökkenőmentes felugró képek, amelyek egy bizonyos idő elteltével helyettesítik egymást. Minden nagyon egyszerű, tegye, összekötöttem és előre ...
jquery popeye 2.1.
Nagyon kompakt JQuery kép csúszka, lightbox elemekkel. Rugalmas méretei miatt nagyon egyszerűen beágyazódik bármely tartályba egy kisállatba egy miniatűr formájában, amikor az egérmutatót lebegíti, vagy kattintson a Lightbox aktiválva egy nagyított kép- és vezérlőelemekkel. Kényelmes egy ilyen csúszkát az oldalsó panelekbe helyezni, a termékek vagy hírek bemutatásához. Kiváló megoldás a nagy mennyiségű információkhoz.
Sorrend
Ingyenes adaptív csúszka kiterjesztett CSS3 átmenetekkel. Minimalista stílus, 3 díszítés, mindegyik keret csúszik a vízszintes irányban megjelenő vízszintes irányban, amely a kép közepén kezdődik, jobbra aláírása, a miniatúrák duplikálódnak a jobb alsó sarokban. A termék bemutató oldalainak törése minden keretben. A vezérlés magában foglalja az oda-vissza gombokat is. Támogat modern böngészők.
ELCSÓR.
A beállítások teljesen promóciós csúszkája és a beállítások és a beállítások, a beállításokból a diavetítés sebességének változása van, a kézi üzemmód csatlakoztatása (a vezérlőgombok aktiválva vannak), Folyamatos diavetítés. Ez a csúszka joga van arra, hogy legyen, és csak azt a tényt vonzza, hogy ez az, hogy nem találtam semmit, ami különösen érdekes ebben a fejlődésben, talán rosszul kerestem)))
Érzékeny kép csúszka.
Gyönyörű ilyen adaptív csúszka Vladimir Kudinovov. Jó, fejlett eszköz, vizuális példákkal és részletes útmutatással, telepítéshez és használathoz. Adaptív tervezés, Aranyos gombok és a zöld lövöldözők, minden nagyon aranyos és nyugodtan, nyomás nélkül.
Fraktionslider.
Ingyenes JQuery Slider plugin parallaxis hatással képeket és szöveges diák. A dia animáció több megjelenítési értékkel rendelkezik, amelyek teljes körű ellenőrzést tartalmaznak minden egyes alkalommal és animációs paraméterben. Az animáció képessége egyszerre több elemet a dia. Beállíthatja különböző módszerek Animációk, a diákok eltűnése vagy átmenet egy bizonyos irányból. Automatikus kijelző és kézi vezérlés A navigációs nyilak segítségével pop-up, amikor lebeg. 10 típusú animációs hatások a csúszdák megjelenésének és még sok más ...
A felülvizsgálat meglehetősen kiterjedt volt, de nem volt elegendő informatív a vizsgált termékek nagy száma miatt. Minden részletet és részletes leírást. funkcionalitás Egy plug-in, közvetlenül a fejlesztők oldalain tanulhat. Reméljük, hogy valaki megkönnyítette a legkevésbé szükséges eszköz keresését, színes képcsúcsokat hoz létre webhelyeik oldalán.
Azt gondolta, hogy jó lenne, ha az orosz sablonokkal dolgozhatna? Gondolj egy percig. Nincs időzítés az angol nyelvű sablonokkal való munkavégzésre. Sietünk, hogy kérjük, hogy a templatemonster most megtalálható a templatemonster marketingen. Az egyesek szövegét manuálisan írták. Természetesen minden kész megoldás hihetetlenül könnyen használható.
Minden tekintetben Andrew
A böngészők automatikusan létrehoznak pop-up tippeket, ha a webmesterek az attribútumra kerülnek cím bármilyen szöveg (szabály, attribútum) cím A címkékre
és
. Linkek és képek). Amikor a felhasználók hozzák az egérmutatót olyan címkékhez, amelyekben az attribútum jelen van címA böngésző felbukkanó csúcsot jelenít meg. Ezek a pop-up tippek ( tooltip.) Szerkesszük.
Ez a cikk megvizsgálja:
- A plugin használata a szabványos felugró tippek cseréjéhez
- Hogyan kell konfigurálni a QTIP eszköztippeket
- hogyan lehet megjeleníteni az Ajax tartalmat a pop-up tippben
Egyszerű egyéni szöveg előugró tippek
Remélem, nem kell megmagyarázni, hogy az ilyen attribútumok, mint a cím, az alt gyakran rendkívül szükséges. Végtére is segítenek a felhasználók számára, hogy jobban navigáljanak számos információban, és továbbá rendkívül hasznosak a keresőoptimalizáláshoz. Az egyetlen probléma az utasításokkal - nem lehet megváltoztatni a CSS stílusokat. A probléma megoldásához használjuk a lehetőséget.
1. Hozzon létre az alapvető HTML fájlkeretet, amely a cím attribútummal rendelkezik.
Linkek listája:
- a fő
- A cégről
- Névjegyzék
- Portfólió
2. Most meg kell tölteni a QTIP plugint a tárolóból.
3. Csatlakoztassa a letöltött fájlokat:
// Szabványkönyvtár jquery. // Ebben a fájlban JQuery parancsfájlokat írunk elő
4. A pop-up tippmel elég ahhoz, hogy regisztráljon a scripts.js-ben:
$ (Dokumentum). Ready (funkció () ($ ("A"). Qtip ();));
Ez a design azt jelenti, hogy a cím attribútumban jelenlévő referenciák esetében a QTIP () módszer használatával kerül alkalmazásra.
Jquery qtip beállítása.
1. A pop-up tippek testreszabása más lehet. Kezdje, módosítsa azt a pozíciót, amellyel az utasítások megjelennek.
$ ("A"). Qtip ((pozíció: (My: (az "alsóközpont", // a kurzor helyzete: "Top Center", // pop-up tippek Pozíció: $ (ablak) // tip nem fog nyalja az élek képernyőjét))))));
2. A pozíció beállítása után színes diagramot készíthet. Alapértelmezés szerint a jquery.qtip.min.css fájl a következő színes stílusokat tartalmazza:
Qtip-alapértelmezett (sárga alapértelmezett stílus)
Qtip-bootstrap
Néhány ilyen stílushoz hozzáadhat egy árnyékot: qtip-árnyék. Ezenkívül senki sem zavarja meg saját stílusukat, tökéletesen kombinálva az általános, bár több, mint a visszaélések.
$ ("A"). Qtip ((Pozíció: (My: (My: "Bottom Center", AT: "Top Center", Viewport: $ (Ablak)), Stílus: (Osztályok: "Qtip-Green Qtip-Shadow") ;
Navigációs menü létrehozása pop-up utasításokkal
1. Kezdje, hozzon létre egy HTML-keretet:
#Navigálás (háttér: RGB (132,136,206); / * régi böngészők * / háttér: -Moz-lineáris gradiens (felső, RGBA (132,136,206,1) 0%, RGBA (72,79,181,1) 50%, RGBA (132,136,206) , 1) 100%); / * FF3.6 + * / Háttér: -webkit-gradiens (lineáris, bal felső, bal alsó, szín-stop (0%, RGBA (132,136,206,1)), színmegálló (50 %, RGBA (72,79,181,1)), színmegálló (100%, RGBA (132,136,206,1))); / * króm, szafari4 + * / háttér: -webkit-lineáris gradiens (felső, RGBA (132,136,206) , 1) 0%, RGBA (72,79,181,1) 50%, RGBA (132,136,206,1) 100%) 100%); / * Chrome10 +, Safari5.1 + * / háttér: -O-lineáris gradiens (felső, RGBA) (132,136,206, 1) 0%, RGBA (72,79,181,1) 50%, RGBA (132,136,206,1) 100%) 100%); / * Opera11.10 + * / háttér: -ms-lineáris gradiens (felső, RGBA ( 132,136,206, 1) 0%, RGBA (72,79,181,1) 50%, RGBA (132,136,206,1) 100%); / * IE10 + * / szűrő: Progid: dximagetransform.microsoft.gradient \u003d "# 8488ce , Endcolorsstr \u003d "# 8488ce", gradienstype \u003d 0); / * IE6-9 * / háttér: lineáris gradiens (felső, RGBA (132,136,206,1) 0%, RGBA (72,79,181,1) 50%, RGBA ( 132,136,206,1) 100%); / * W3C * / Lista-stílusú típus: Nincs; Margó: 100px 20px 20px 20px; Padding: 0; Túlcsordulás: rejtett; -Webkit-határ-sugár: 5px; -Moz-határ-sugár: 5px; Border-sugara: 5px; ) #Navigation Li (Margin: 0, Padding: 0, Kijelző: Blokk; Float: Bal, Border-Right: 1PX Solid # 4449a8;) #navigation A (Szín: #FFF; Border Right: 1px Solid # 8488ce; blokk; párnázás: 10px;) #navigation a: lebegés (háttér: # 859900; határ-jobbszín: # A3BB00;)
Ennek eredményeképpen a következő képet kell beszerezni:
3. A Scripts.js fájlban Hozzáadás:
$ ("# Navigáció"). Qtip ((pozíció: (My: "(My:" Top Center ", AT:" Bottom Center ", Viewport: $ (ablak)), show: (Effect: Funkció (Offset) ($ (ez ) .Slidedown (300);))), elrejtése: (Effect: funkció (offset) ($ (ez) .slideUp (100);)), Stílus: (osztályok: "Qtip-Green Qtip-Shadow" ;
Most, ha az egérmutatót a navigációs menüben lebegítjük, megjelenik a pop-up tipp (cím attribútum).
Egyéb tartalmak megjelenítése a pop-up tippben
A szabványos címkék megjelenítéséhez egy másik tartalom megjeleníthető egy pop-up tippben, például egy fájlból, egy rejtett tartályból, vagy az adatbázisból, és az oldal újraindítása anélkül, hogy újraindítaná az AJAX technológiát.
Ez a link az AJAX-val tartja a fájlt
A href \u003d "tooltip.txt" attribútum értéke azt jelenti, hogy a hiperlink a szokásos TXT fájlra utal.
$ (". Infobox"). Mindegyik (funkció () ($) .qtip ((tartalom: (szöveg: (szöveg: "betöltés ...", // miközben a tartalom betöltődik, ez a rekord Ajax megjelenik: (URL: $ (ez) .attr ("href") // Hol kell tartani a tartalmat), cím: (// Adjon hozzá egy mezőt a tooltip szöveggel: $ (this) .ttr ("Cím"), gomb: true // Hozzáad egy gombot a tippek zárásához))), Pozíció: (My: "Top Center", AT: "Bottom Center", Hatás: FALSE, // Eltávolítja a Effectport-ot: $ (ablak)), show: (Esemény: "Kattints ", // Tipp kijelző Ha rákattint a linkre, helyettesíthető a" Hover "kifejezéssel, akkor a SOLO: TRUE // Lehetővé teszi, hogy csak egy eszköztippet jelenítsen meg a képernyőn), elrejtse:" unfocus ", // TIP kattintás, amikor egy másik stílusú oldalelemre kattint: (osztályok:" qtip-zöld qtip-árnyék ")))));)));)). Bind (" kattintás ", funkció (e)) (E.PREVENTDEFAULT ())) ; // Ha rákattint a linkre, a böngésző nem tölti le az URL-t
Ez az AJAX vétel csak akkor működik, ha a kiszolgáló fut. Tehát, hogy a helyi számítógépen szerzett, például.
Eddig nem felejtettem el, hogy milyen előnyökkel és hátrányokkal rendelkezik alumínium szekció radiátorokkal, és amelyek radiátorok általában a fogyasztókat választják.
(Csepegés: 409)
