1. Հիանալի սլայդերի ցուցադրություն jQuery- ի վրա «Էլաստիկ սլայդերի» վրա

Սլայդերի ցուցադրում `սլայդների մանրանկարներով եւ նկարագրություններով: Պատկերների փոփոխման տարբեր հետեւանքներ: Գոյություն ունեն երկու տարբերակ, ավտոմատ սլայդ փոփոխությամբ եւ առանց:

2. Մաքուր CSS3 սլայդ

Cute Image Slider նկարագրությամբ եւ ավտոմատ սլայդ փոփոխությամբ: Երբ կուրսորը սավառնեք, ռոտացիայի պատկերը դադարում է: Stop- ը ուղեկցվում է CSS3 էֆեկտով:

3. jQuery pluging "photorama"

Լավ պատկերասրահ-սլայդ:

4. Տեքստի էֆեկտներ «Տիպոգրաֆիա էֆեկտներ»

Հետաքրքիր էֆեկտներ `CSS3- ի եւ JQuery- ի հետ տպագրության հետ աշխատելու համար: 7 տարբեր զով էֆեկտներ:

5. plugin «Darkbox»

Փոքր թեթեւ plugin `նկարները ցուցադրելու համար թռուցիկ բլոկում:

6. Հովեր-ազդեցություն jQuery- ի վրա

Շրջանաձեւ ազդեցություն, երբ սավառնում է:

7. Անիմացիոն JQuery CSS3 կոճակներ

Շատ տարբեր անիմացիոն CSS3 էֆեկտներ ձեր կայքի համար ցնցող կոճակներ ստեղծելու համար: Պարզապես շատ թույն էֆեկտներ սավառնելիս:

8. HTML5 jQuery- ը փոխում է ֆոնային պատկերներ

Երբ կտտացրեք մանրապատկերները, ֆոնային պատկերները միմյանց փոխարինում են բլուրի ազդեցությամբ: Երբ զննարկչի պատուհանը չափափոխվում է, ֆոնային պատկերի չափը փոխված է:

8. Ինտերակտիվ տպագրության հետեւանքներ

Հետաքրքիր տեքստային էֆեկտներ, օգտագործելով HTML5 եւ JQuery (4 տարբեր էֆեկտներ): Մկնիկը տեքստի վրա `ազդեցությունը տեսնելու համար:

9. Թռուցիկ պատկերի ստորագրություններ

Բազմաթիվ տարբեր անիմացիոն էֆեկտներ `թռուցիկ պատկերի ստորագրություններ իրականացնելու համար:

10. plugin «Պորտամենտո»

Լողացող բլոկ jQuery- ում: Էջը ներքեւ պտտվելիս միշտ մնում է տեսանելիության գոտում:

11. Բովանդակության ոլորումներ

jQuery plugin- ը էկրանավորելու է SCIST- ի ֆիքսված չափի բլոկներում: Մի քանի ոճային զարդեր:

12. plugin «scrollbars»

Ֆիքսված չափի ստորաբաժանում պարունակության հորիզոնական եւ ուղղահայաց պտտման jQuery ներդրում:

13. Plugin «Tiny Scrollbar»

jQuery plugin- ը բովանդակության ուղղահայաց եւ հորիզոնական ոլորումներ իրականացնելու համար:

Ցուցադրում

Ներբեռնեք

14. plugin «jscrollpane»

Խաչ զննարկչի պտտվող բովանդակությունը բլոկում:

15. Լողացող բլոկ «Ոլորեք հետեւեք»

Plugin- ը `էջի պտտվելուց հետո շրջելու համար բլոկ ստեղծելու համար: Հնարավոր է շտկել բլոկը `կտտացնելով հղումը:

16. Pop-up վահանակներ «Sidebar»

Վեբ էջի բոլոր կողմերից վահանակներ:

17. CSS3 տպավորիչ լուծումներ Խրոցի էջի համար

Անիմացիոն էֆեկտների իրականացման երեք տարբերակ `« Կայքը զարգացում »խրոցը ստեղծելու համար:

17. Էջը էջը պտտելու ժամանակ էֆեկտ

Զարմանալի ազդեցություն Էջը ոլորելիս. Էլեմենտները հեռանում են էկրանի հետեւում գտնվող տարածքից, կամ հակառակը թաքնվում է էկրանի տարածքի հետեւում: Նման լուծումը կատարյալ է պորտֆելի կայքերում օգտագործելու համար, ավարտված նախագծերի հիանալի ներկայացման համար `համառոտ նկարագրությամբ:

19. Լրացուցիչ «Fancybox 2»

Բազմաթիվ plugin- ի կողմից նշված ֆանտաստիկ տուփի նոր, լիարժեք վերաշարադրված տարբերակը, մոդալ պատուհաններում պատկերներ եւ այլ բովանդակություն ցուցադրելու համար:

20. Մինիմիտ պատկերասրահ:

Ֆունկցիոնալ plugin- ը `մեծ քանակությամբ առանձնահատկություններով. Պատկերասրահ, կարուսել, սահող, ընտրացանկ, ընդարձակ, անիմացիոն կոճակներ:

21. JQuery News Ticker

Ռոտատորի նորություններ կայքում: Հաղորդագրությունները փոխարինում են միմյանց եւ հայտնվում են տպագիր մեքենայի հետաքրքիր ազդեցություն: Կարող եք դադարեցնել փոփոխությունները փոխել, կտտացնելով «Դադար» կոճակը: Գումարները կարող են տեղափոխվել մեկ հաղորդագրությունից մյուսը:

22. Հարմարվողական պատկերներ:

Ցուցադրման մասշտաբային պատկերներ Բջջային սարքեր, Պատկերի չափերը կախված են պատուհանի չափից: Օգտագործված տեխնոլոգիաներ. JavaScript եւ php5:

23. VScroller.

Ուղղահայաց jQuery, CSS3 պտտվող: Ոլորման արագությունը եւ ձգձգման ժամանակը ճշգրտվում է:

24. Բազմամակարդակ իջեցված ընտրացանկ «JQSIMPLEMENU»

Թարմ jquery plugin- ը կայքում բազմաշերտ հորիզոնական բացվող ընտրացանկ ստեղծելու համար:

25. «JSCAROSEL 2.0»

jQuery Plugin- ը ուղղահայաց եւ հորիզոնական կարուսելներ իրականացնելու համար:

26. Ռոտատոր «Դինամիկ նորություններ»

jQuery Plugin- ը RSS ժապավենի վերջին լուրերի գեղեցիկ ցուցադրման համար:

27. Անիմացիոն ընտրացանկ

Անիմացիոն ազդեցություն, երբ ընտրացանկի կետում սավառնելիս:

28. Անիմացիոն տեքստի էֆեկտ

Աշխատելու երեք տպավորիչ օրինակ CSS գույք "Background-clip: Text". CSS3 էֆեկտը չի գործում հին զննարկիչներում:

29. CSS3 JQuery Blur Effect

Երբ սավառնում եք կուրսորը բլոկի վրա, այն մեծանում է, եւ տեքստով մնացած բլոկները ֆոնին խառնվում են:

30. CSS3 JQuery Pop-up Tips

31. jQuery pop-up սավանի հուշումներ

32. Հեշտ CSS մենյու

33. Նշումներ CSS3 եւ HTML5

Գրանցամատյանների նման բլոկների իրականացումը:

34. Լլաթ տուփ:

Pop-up բլոկներում լրատվամիջոցների համակարգի ցուցադրում. Նկարներ, տեսանյութ, ֆլեշ:

35. jQuery zumber

Ավելացնել քառակուսի տարածքը:

36. CSS3 JQuery Image Նկարագրություն

Խմբագրում է «հիմնված լոգարիթմական դռների բովանդակության պատկերասրահը» `թռուցիկ պատկերի նկարագրություններ իրականացնելու համար: Երբ սավառնում եք կուրսորը ներկայացված պատկերների մի մասը հայտնվում է Կարճ նկարագրություն Լրիվ հոդվածի հղումով: Երբ դուք սավառնեք. Ավտոտնակի դռների բարձրացման ազդեցությունը:

37. Էֆեկտը «առաջ եւ հետո» jQuery Plug «Ucompare»

Մտածում եք վարագույրը, դուք կարող եք համեմատել միմյանց վրա գերհզոր երկու պատկերներ: Իդեալական է այն դեպքերի համար, երբ էջում անհրաժեշտ է կազմակերպել երկու տարբերակ: Նախքան եւ հետո:

38. Պատկերի ռոտացիայի էֆեկտը

39. Խաղաղության եւ Եվրոպայի եւ ԱՄՆ-ի ինտերակտիվ քարտեզներ

40. Սլայդ շոու «Slider.js v1.1»

Սլայդների միջեւ մի քանի տարբեր անիմացիոն անցումային էֆեկտներ:

1. jQuery pluging "hover zoom"

Պատկերների նկարագրության նկարագրության իրականացման բնօրինակ լուծումը `կուրսորը սավառնելիս, օգտագործելով խոշորացում:

2. Միացրեք «Pratfify»

3. jQuery պատկերի նկարագրությունը պատկերասրահում

Երբ կուրսորը սավառնեք, նկարագրություն է հայտնվում, եւ նկարը ինքնին լցվում է կիսաթափանցիկ շերտով, որոշակի գույնով:

4. Պատկերների ստորագրությունների jQuery ներդրում

Ստորագրությունների մի քանի մարմնավորում պատկերների համար, որոնք հայտնվում են մկնիկի կուրսորը սավառնելիս:

5. Լոգարիթմական դռների jQuery ազդեցություն

Երբ դուք տեղափոխում եք մանրանկարչություն, նկարագրություն է հայտնվում իր տեղում:

6. jQuery Plug «Zoominfo»

Երբ կուրսորը սավառնեք դեպի պատկերը, այն նվազում է, եւ հայտնվում է լուսանկարի անվանումը եւ նկարագիրը:

7. jQuery Plug «Mosaic»

Մկնիկի կուրսորը սավառնելիս թռուցիկ պատկերի նկարագրությունների իրականացում: Ապահովված է թռուցիկ ստորագրությունների տարբեր տեսակներ: Դուք կարող եք տեսնել դրանք ցուցադրական էջում:

Երբ դուք սավառնեք մկնիկի կուրսորը պատկերի վրա, թողնում է համառոտ նկարագրություն `մանրամասն տեղեկություններ հղումով:

9. Plugin- ը պատկերի ստորագրությունը կյանքի կոչելու համար

Կուրսորը սավառնելիս թռուցիկ պատկերի ստորագրություններ իրականացնելու եւս մեկ տարբերակ: Երկուսից ընտրելու հնարավորություն կա jQuery էֆեկտներ Ստորագրությունների տեսքը:

10. Պատկերի նկարագրությունը «Նախադիտման պատուհանը»

Ստորագրության պատկերների համար: Երբ դիմակավորեք մկնիկի կուրսորը անիմացիոն էֆեկտով, հայտնվում է նկարագրություն: JQuery- ն օգտագործվում է անիմացիա ստեղծելու համար:

Պատրաստված նյութերի հիման վրա

jQuery plugins- ը կայք կառուցելիս ամենանկալվող բաղադրիչներից է, եւ իսկապես ցանկացած վեբ դիմում: Նրանք թույլ են տալիս ընդլայնել ձեր ֆունկցիոնալությունը: Այս հոդվածում նշվում է 2012 թվականի առավել օգտակար plugins- ը: Ավելին Հարմար որոնում Բոլոր plugins- ը բաժանված է հետեւյալ կատեգորիաների. Վեբ էջի դասավորությունը `ներարկիչ, նավարկության պիտակներ, ձեւի plugins, plug-ins, պատկերների եւ այլոց համար: Նաեւ այս plugins- ի մեջ կան plugins, որոնք կօգնեն ձեզ ստեղծել ձեր հարմարվողական ծրագրերը:

Էջի դասավորության plugins

Հավասարակշռություն.js- ը jquery plugin է, որը թույլ է տալիս ստեղծել կայքի բլոկային կառուցվածք: Այն թույլ է տալիս մակարդել ցանկացած տարրի բարձրությունն ու լայնությունը:

Adaptive Layouts- ի նոր plugin- ը: Freetile- ը թույլ է տալիս ստեղծել ցանկացած չափի տարրեր, իսկ ցանցի սյուների ֆիքսված չափը ստեղծելու անհրաժեշտությունը անհետանում է:

Gridster.js JQuery Plugin- ը `շենքի քաշման եւ կաթիլների համար` ցանց: Նաեւ այն օգտագործելը կարող է դինամիկ ջնջվել եւ ավելացնել տարրերը ցանցից:

Zoomooz.js. - Սա հեշտ օգտագործման jQuery-plugin է `վեբ էջի ցանկացած տարր բարձրացնելու համար: Կարող եք հեշտությամբ ավելացնել խոշորացման ազդեցություն, պարզապես «Zoomtarget» դասը ավելացնելով ցանկացած HTML տարր: Բարձրացումը կարող է վերակայվել `սեղմելով էջը: Plugin- ը փորձարկվել է Internet Explorer. 9, Safari 3 +, Firefox 3.6 +, Օպերա եւ քրոմ:

WookMark- ը Plugin է, դինամիկ բազմամյա ձեւանմուշ ստեղծելու համար:

jQuery Honderposition- ը plugin է, որը թույլ է տալիս ավելացնել ցանկացած առարկա, նույնիսկ եթե այն թաքնված է:

Stellar.js - jQuery-plugin, որն ապահովում է իրերի զուգահեռի ազդեցությունը:

JQuery plugin- ը, որն ավելացնում է էջերի իրական շրջանցման ազդեցությունը հատվածների միջեւ անցման ընթացքում: Օգտագործված ապարատային արագացում: Աշխատում է պլանշետների եւ սմարթֆոնների վրա:

Հարմարվող տպագրության մեջ: Այն թույլ է տալիս օգտագործել ընտրիչը, որը ստեղծում է կատարյալ տառատեսակի չափը:

Թույլ է տալիս կառուցել անիմացիոն շարժումներ կայքում, ներառյալ բոլոր հնարավոր վերափոխումները:

Նավիգացիայի մեջ

Horizontalnav- ը JQuery Plugin է, որը ձգում է հորիզոնական ընտրացանկը, որպեսզի այն համապատասխանի բեռնարկղի ամբողջ լայնությանը: Եթե \u200b\u200bերբեւէ փորձել եք ստեղծել նավիգացիայի ընտրացանկի ճիշտ լարվածության ազդեցությունը CSS բեռնարկղ Ծրագիրը, ուրեմն հաստատ գիտեք, թե որքան դժվար է անել խաչաձեւ զննարկչի համատեղելիության համար: Այս plugin- ը դա հեշտությամբ կատարում է:

stickymojo- ն հեշտ, արագ եւ ճկուն հավելում է «լիպուչի» կողմնակի վահանակ JQuery- ի վրա: Այն աշխատում է Firefox- ի, Chrome- ի, Safari- ի եւ IE8 + -ի հետ (լավ աջակցում է հին տարբերակին):

dDSLICK- ը մի plugin է, որը թույլ է տալիս ստեղծել ներքեւի ընտրացանկեր պատկերներով եւ նկարագրություններով:

Ներխուժվող վահանակների պարզ կազմակերպման համար: Plugin- ը աջակցում է թխուկների հետ աշխատանքը `վահանակների կարգավիճակը պահելու համար: Ընտրանքների շարքում կան հղման գործառույթներ `բաժանելու հատվածների բացման եւ փակման գործընթացը:

Լրացուցիչ բլոկներ ստեղծելու համար, որոնք կարող են պարունակել ցանկացած տվյալ սահմանափակ տարածքում:

Լրացուցիչ plugins

Plugin- ը թույլ է տալիս որոշել գաղտնաբառի բարդության մակարդակը:

JQuery-plugin- ը ֆայլի ներբեռնման գործընթացը պատկերացնելու համար: Այն աջակցում է քաշել եւ թողնել եւ առաջացնում է ակնթարթային նախադիտումներ լուսանկարների համար:

Plugin, որը որոշում եւ ստուգում է վարկային քարտի համարները: Այն թույլ է տալիս որոշել կրեդիտ քարտի տեսակը:

Տվյալները զտելու համար: Կարող եք զտել տվյալները պիտակի եւ մի քանի պիտակների եւ կատեգորիաների համար:

Plugin, որը ստուգում է մուտքը Էլ Նախնական պատրաստված ցուցակի ճիշտության վրա (այստեղ կարող եք ներառել ամենատարածվածը Փոստի ծառայություններ Mail.ru, yandrex.ru, gmail եւ այլն):

Սլայներ եւ կարուսելներ ստեղծելու plugins

Plugin, որը թույլ է տալիս վերահսկել մկնիկը, TouchPad- ը եւ ստեղնաշարի օգտագործումը: Անցման համար, որոնք լռելյայն սահմանված են, կարող եք ավելացնել լրացուցիչ, որոնք նույնպես աղբյուրի ֆայլում են:

iosslider.

iosslider- ը հարմարվողական խաչմերուկի սլայդերի հավելված է:

RSLIDER - Ամբողջ էկրանով Հարմարվողական սահիկ, ՄԱՍԻՆԺը ինքնաբերաբար հարմարվելու է ձեր էկրանի լայնությանը:

Fresco- ն հարմարվողական Likebox- plugin է: Այն կարող է օգտագործվել ցնցող ծածկույթների ծրագրեր ստեղծելու համար, որոնք հիանալի կերպով աշխատում են էկրանի ցանկացած չափի բոլոր զննարկիչներում, բոլոր սարքերի վրա:

Bookblock. Plugin մատով բովանդակություն

Bookblock- ը JQuery-plugin է, որը կարող է օգտագործվել բաղադրիչներ ստեղծելու համար բուկլետների տեսքով, որոնք թույլ կտան ստեղծել նավարկություն, ինչպիսիք են «շրջադարձային էջերը»: Այստեղ կարող եք օգտագործել ցանկացած բովանդակություն, լինել պատկերներ կամ տեքստ: Plugin- ը կառուցվածքը փոխում է միայն անհրաժեշտության դեպքում (այլ կերպ ասած, միայն այն դեպքում, երբ էջը շրջվում է) եւ իր ռեալիզմը հաղորդելու համար օգտագործում է համընկնում եւ ստվերներ:

Adapter- ը դյուրին բովանդակության սահիկ է, որն ապահովում է մշակողների պարզ ինտերֆեյս `սայթաքուների գեղեցիկ 2D կամ 3D հավասարեցման անիմացիա ստեղծելու համար: Ներկայումս WebKit եւ Firefox զննարկիչներում կա 3D հատկությունների աջակցություն: Բոլոր 2D անցումները փորձարկվել են IE6 + եւ այլ ժամանակակից զննարկիչներում:

Շարունակական կարուսելի մի քանի օգտակար հատկություններով:Հեշտ է կարգավորել եւ աջակցել նույնիսկ հին զննարկիչներին:

Rhinoslider. - բավականին ճկուն jQuery Plugin SlideShow. Ոչ միայն առաջարկվում են մի շարք հետեւանքներ, բայց սահողին հնարավոր է ավելացնել իրենց ոճերը, հետեւանքներն ու գործառույթները:

Հաջորդականությունը jQuery-plugin է բնօրինակ ձեւով բովանդակություն պտտելու համար եւ ձեզ լիարժեք վերահսկողություն է տալիս: Կարող եք օգտագործել ցանկացած տեսակի բովանդակություն. Այն անսահմանորեն կուղղվի: Այստեղ օգտագործվում է իմաստաբանական նշագիծ, ինչպես նաեւ հարմարվողական ձեւանմուշներ եւ սարքեր, հպման տեխնոլոգիայի հիման վրա:

Glisse.js- ը պարզ, հարմարվողական եւ հեշտությամբ կարգավորելի JQuery-Photo պատկերասրահ է:

Լրագրերի եւ գծապատկերների plugins

Morris.js- ը թեթեւ գրադարան է, որն օգտագործում է jQuery եւ raphaël, նկարչական ժամանակի գրաֆիկները հեշտացնելու համար:

Jquery org աղյուսակը մի plugin է, որը թույլ է տալիս ստեղծել ծառի կառույցներ բուրչե տարրերով: Տվյալները մուտքագրվում են ներկառուցված անկարգ ցուցակի մեջ, ինչը plugin- ը դարձնում է աներեւակայելի օգտագործման համար:

Տպագրության plugins

Bacon.js- ը jquery plugin է, որը թույլ է տալիս փաթեթավորել տեքստը Bezier- ի կամ Line Curve- ի շուրջ:

Textualizer - jQuery plugin- ը տեքստի վրա գեղեցիկ էֆեկտներ ստեղծելու համար: Աջակցված աշխատանքում. Chrome, Safari 4+, Firefox 3.5+, այսինքն `6,7,8,0, Օպերա 10.6+, Mobile Safari (iOS 4)

Slabtext- ը շատ օգտակար JQuery-plugin է, որը պայծառացնում է վերնագրերը նախքան յուրաքանչյուր շարքի չափը փոխելը `առկա տարածքը հորիզոնական լրացնելու համար:

trunk8- ը JQuery- ում տեքստի ազդանշանի հավելված է: Թույլ է տալիս տեքստի մեծ բլոկը կտրել ավելի փոքր մասի `նախնական ստուգման համար:

Պատկերների համար տարբեր ազդեցություն ստեղծելու plugins

Սա jQuery plugin է, որն օգտագործում է CSS3 ֆիլտրեր `թեքման ազդեցություն ստեղծելու համար:

Ադապտոնական պատկերների ազդեցությունը կյանքի կոչելու համար:

jQuery Plugin, որը հեշտացնում է պատկերային քարտեր ստեղծել: Այս գործիքի միջոցով ցանկացած քարտեզի պատկեր կարող է ընդգծել կամ ընտրվել, ինչպես նաեւ քարտը հնարավոր է վերահսկել: տարբեր ճանապարհներ, Այն աշխատում է բոլոր խոշոր բրաուզերների վրա, ներառյալ Internet Explorer 6-ը, այն չի օգտագործում Flash- ը եւ ոչինչ չի պահանջում, քան jquery: Որոշ առաջադեմ հետեւանքներ պահանջում են HTML5 աջակցություն, բայց այն դեռ կաշխատի հին զննարկիչներում:

Հարմարվողական, կամ եթե ցանկանում եք, պատասխանատու վեբ ձեւավորումն այժմ այլ դիզայներական միտում է, սա արդեն որոշակի ստանդարտ է կայքերի մշակման համար, տարբեր օգտագործողների կոնվենցիային ցուցափեղկերի վրա: Վերջերս, երբ զարգանում է Հարմարվող ձեւանմուշԵս ստիպված էի զբաղվել տարբեր դժվարություններով `որոշակի սլայդերների եւ պատկերասրահների ինտեգրման գործընթացում, առանց դիզայնի ընդհանուր ոճը կոտրելու: Այժմ ամեն ինչ շատ ավելի հեշտ է, ցանցում կա պատրաստի պատրաստի լուծումներ եւ հատկապես ուրախ, որոնց մեծ մասը բաց կոդով գտնվում է:

Առաջարկվող գործիքների բազմազանության շնորհիվ ես կազմեցի մի փոքր ակնարկ, առավել ուշագրավ JQuery Sliders- ի պատկերների առավել ուշագրավ զարգացումների, որոնք հայտնվեցին վերջին անգամ եւ բաժանվեցին առանց որեւէ սահմանափակումների, այսինքն: Բացարձակապես անվճար:

Wow սահիկ:

Հիանալի հավաքածուով պատկերների հարմարվող JQuery Slider Տեսողական էֆեկտներ (շրջադարձեր, մեկնում, բլուր, պարույրներ, շերտավարագույրներ եւ այլն ...) եւ շատ պատրաստի նախշեր: Ուզում է ներկառուցված Wizard- ի օգնությամբ, կարող եք հեշտությամբ եւ հեշտությամբ ստեղծել ցնցող սլայդներ րոպեների ընթացքում: Մշակողների կայքը ունի բոլոր անհրաժեշտ փաստաթղթերը `plug-in ռուսերեն, plug-in- ի շահագործման գերազանց կենդանի օրինակների տեղադրման եւ օգտագործման վերաբերյալ: Առկա է նաեւ առանձին ներբեռնելու համար plugin WordPress- ը Եւ մոդուլ Joomla- ի համար: Վստահ եմ, որ շատերը դուր կգան այս հիանալի սլայդերը, ինչպես սկսնակները, այնպես էլ ուղեցույց WebMother:

Նյարդայնացիր:

HTML5, JQuery Slider and Image Gallery, Բացարձակապես անվճար plugin անձնական օգտագործման համար տեղակայված վայրերում `WordPress, Joomla, Drupal. Այս պարզ, բայց բավականին ֆունկցիոնալ գործիքով հեշտությամբ կարող եք ստեղծել մեր կայքերի, զարմանալի եւ պայծառ սլայդերի էջերում, զարմանալի շնորհանդեսներ եւ նոր հաղորդագրությունների հայտարարություններ: Մի քանի պատրաստի նախշեր եւ մաշկներ սահիկ, ցնցող անցումային էֆեկտներ (փոփոխություն) պարունակություն, տարբեր մուլտիմեդիա բովանդակության արդյունք.

NIVO SLIDER.

NIVO Slider- ը հին տեսակ է, որը հայտնի է բոլորին, ովքեր առարկայի մեջ են, պատկերների ամենագեղեցիկ եւ հեշտ օգտագործման սայթաքում: JQuery Nivo Slider plugin- ը անվճար է ներբեռնելու եւ հետագա օգտագործման համար, որը բաշխվում է MIT լիցենզիայի ներքո: WordPress- ի համար կա նաեւ առանձին plugin, բայց, ցավոք, արդեն իսկ վճարված եւ դրա համար անկումը կունենա 29 լիցենզիայի համար: Ավելի լավ է մի քիչ անել WP թեման ֆայլերով եւ ամրացնել Nivo Slider plugin- ի անվճար jQuery տարբերակը ձեր բլոգին, տեղեկատվության առավելությունը, թե ինչպես դա անել հենց ցանցում:
Ինչ վերաբերում է ֆունկցիոնալին, ապա ամեն ինչ կատարյալ կարգով է: A jquery v1.7 + գրադարանն օգտագործվում է աշխատանքի համար, գեղեցիկ անցումային էֆեկտներ, պարզ եւ շատ ճկուն պարամետրեր, հարմարվողական դասավորություն, պատկերի ավտոմատ հատում եւ շատ ավելին:

Սլայդերի գաղափարը ոգեշնչվել է մշակողների կողմից, որոնք լավ հայտնի են Apple- ի արտադրանքի ամբողջ ոճով, որտեղ մի քանի փոքր իրեր (նկարներ) փոխվում են ընտրված կատեգորիայի պարզ ազդեցությամբ: Codop- ը ձեր տրամադրության տակ է ներկայացնում այս սայթաքիչը ստեղծելու մանրամասն դաս, HTML նշման ամբողջական հավասարեցում, CSS կանոնների եւ գործադիր JQuery Plugin- ի մի շարք, ինչպես նաեւ սահնակ օգտագործելու հիանալի կենդանի օրինակ:

Slit Slider.

Ամբողջ էկրանով պատկերասրահը JQuery- ի եւ CSS3 + մանրամասն դասագիրք `plug-in- ի էջի էջի ինտեգրման վերաբերյալ: Գաղափարն այն է, որ հաջորդ կամ նախորդ բովանդակությունը անցնելիս հատուկ բովանդակությամբ կտրեք բաց ընթացիկ սլայդը հատուկ բովանդակությամբ: Դեպի օգտագործելով jQuery. Եւ CSS անիմացիաներ, որոնք կարող եք ստեղծել եզակի անցումներ սլայդների միջեւ: Սլայդերի հարմարվողական դասավորությունը ապահովում է, որ էկրաններին հավասարաչափ լավ տեսք կունենա էկրանների վրա: տարբեր տեսակներ Պատվերով սարքեր:

Էլաստիկ բովանդակության սլայդ:

Բովանդակության սլայդը, որը ինքնաբերաբար ճշգրտվում է լայնության եւ բարձրության վրա, կախված ծնողական բեռնարկղի չափից, որում տեղակայված է: Գեղեցիկ պարզ դիզայն եւ ճկուն սայթաքում jQuery- ի պարամետրերում, ներքեւի մասում նավարկությամբ, երբ էկրանի չափը վերածում է մինչեւ նվազեցումը, նավարկությունը ցուցադրվում է որպես սրբապատկերներ: Շատ մանրամասն փաստաթղթեր (դասի ստեղծում) եւ օգտագործման կենդանի օրինակներ:

3D Stack Slider.

Սահիկի փորձարարական տարբերակը, որը պատկերներ է ցույց տալիս 3D ինքնաթիռից անցումներով: Նկարները բաժանվում են երկու հորիզոնական կեռիկի, օգտագործելով նավարկության սլաքը ցուցադրվում եւ անցումից յուրաքանչյուր հաջորդ պատկեր է անցնում դիտման պետությանը: Ընդհանրապես, առանձնահատուկ ոչինչ, բայց կատարման հենց գաղափարն ու տեխնիկան բավականին հետաքրքիր են:

Պատկերների շատ պարզ, 100% հարմարվողական եւ ամբողջական էկրանի jQuery սայթաքող: Սլայդերի աշխատանքը հիմնված է CSS անցումներով (գույքի անցում) մի փաթեթում `JQuery Magic- ով: Max- լայնության արժեքը 100% -ով տեղադրված է լռելյայն, այս եղանակով նկարների չափը կփոխվի, կախված էկրանի չափերից: Ոչինչ հատուկ անիմացիոն էֆեկտներ եւ հրճվում դիզայնի մեջ, ամեն ինչ պարզ է եւ սրվում է անխափան աշխատանքի:

Նվազագույն սլայդներ

Անունը ինքնին խոսում է, թերեւս այն ամենալավ թեթեւ եւ մինիմալիստական \u200b\u200bjQuery սնձներից մեկն է, որը ես հանդիպեցի (plugin 1kb): Պատասխաններ .JS. -Kornet jQuery plugin, որը ստեղծում է սլայդ շոու, օգտագործելով տարաների ներսում տարրեր: Աշխատում է զննարկիչների լայն տեսականիով, ներառյալ IE- ի բոլոր տարբերակները `հայտնի առաջընթացի արգելակ, IE6 եւ ավելի բարձր: Թուղթը CSS3- ի անցում է կատարում մի փաթեթով JavaScript- ով, հուսալիության համար: Հասարակ նշում `օգտագործելով չկարգավորված ցուցակը, անցնելով անցումային եւ ժամային ընդմիջումներով, ավտոմատ եւ Ձեռնարկի վերահսկում Սլայդների անջատիչ, ինչպես նաեւ աջակցում են մի քանի սլայդերի համար: Սա այդպիսի տապակած «երեխա» է:

Տեսախցիկ:

Տեսախցիկ - Անվճար jQuery. Սլայդերի ցուցադրություն կայքերի էջերում սլայդերի ցուցադրում կազմակերպելու համար, լույսի սլայդ `անցումային ազդեցության բազմության, 100% հարմարվողական դասավորությունով եւ շատ Պարզ պարամետրեր, Հիանալի տեղավորվում է ցանկացած օգտագործողի սարքերի էկրանների վրա (համակարգչային մոնիտորներ, պլանշետներ, սմարթֆոններ եւ Բջջային հեռախոսներ): Ներկառուցված տեսանյութը ցուցադրելու ունակությունը: Սլայդերի ավտոմատ փոփոխություն եւ ձեռքով հսկողություն `օգտագործելով կոճակներ եւ պատկերների բլոկ: Գործնականում նկարների ամբողջական պատկերասրահ կոմպակտ դիզայնի մեջ:

bxslider jQuery.

Մեկ այլ, բավականին պարզ հարմարվողական սլայդ, jQuery- ի վրա: Սլայդներում կարող եք տեղադրել ցանկացած բովանդակություն, տեսանյութ, պատկերներ, տեքստ եւ այլ տարրեր: Զգայական էկրաններին ընդլայնված աջակցություն: Օգտագործեք CSS-անիմացիոն անցում: Սլայդերի ցուցադրումների եւ կոմպակտ պատկերի պատկերասրահների ներկայացման մեծ թվով տարբեր տատանումներ: Ավտոմատ եւ ձեռքով հսկողություն: Կոճակները օգտագործելով սլայդները `մանրապատկերներ ընտրելով: Աղբյուրի ֆայլի փոքր չափը շատ պարզ է պարամետրերի եւ իրականացման մեջ:

FlexSlider 2.

FlexSlider 2 - Թարմացված տարբերակը Նույն անունի սլայդերը, արձագանքման բարձր մակարդակով, սցենարի նախարարություն եւ նվազագույնի հասցնելով վերահաշվարկը / վերափոխումը: Plugin- ը ներառում է հիմնական սլայդ, վերահսկելով մանրապատկերների օգտագործումը, օգտագործելով մանրապատկերներ, ձախ աջ եւ ներքեւի նավիգացիայի վահանակը կոճակների տեսքով: Տեսանյութերի սլայդներում (Vimeo), պարամետրերի ճկուն պարամետրեր (անցում, ձեւավորում, ժամանակի ընդմիջում), լիովին հարմարվողական դասավորություն:

Գալերիա:

Հայտնի եւ բավականին հանրաճանաչ Հարմարվող plugin jquery ստեղծել բարձրորակ պատկերասրահներ եւ պատկերների սահնակներ: Սլայդեր ինտերֆեյսը, իր կառավարման վահանակի շնորհիվ, տեսողականորեն նման է սովորական վիդեո նվագարկիչին, plugin- ի կազմը ներառում է մի քանի տարբեր զարդեր: Ներկառուցված տեսանյութ եւ պատկերներ Հանրաճանաչ ծառայություններFlickr, Vimeo, YouTube եւ այլք: Մանրամասն փաստաթղթեր Տեղադրելով եւ օգտագործեք:

Հապալաս:

Պարզ առանց Frills անվճար jQuery slider պատկերների, որոնք հատուկ գրված են հարմարվողական վեբ ձեւավորման համար: Հապալասը փորձարարական jQuery բաց կոդով plugin է: Մինիմալիստական \u200b\u200bդիզայն, ոչ հետեւանքներ, միայն սահուն թռուցիկ նկարներ, որոնք միմյանց փոխարինում են որոշակի ժամանակահատվածից հետո: Ամեն ինչ շատ պարզ է, դնում, ես միացա եւ առաջ ...

jQuery Popeye 2.1.

Շատ կոմպակտ JQuery Image Slider Lightbox տարրերով: Իր ճկուն չափերի շնորհիվ այն շատ ներկառուցված է ցանկացած կոնտեյներով մեկ գրառման մեջ `մանրանկարչության տեսքով, երբ սավառնում եք մկնիկի կուրսորը կամ կտտացրեք, թե որ լուսատուին ակտիվացված է ընդլայնված նկարով եւ կառավարման տարրերով: Հարմար է նման սահիկ տեղադրել կողային վահանակներում, ապրանքների կամ լրատվական հայտարարությունների ներկայացման համար: Գերազանց լուծում կայքերի համար `մեծ քանակությամբ տեղեկատվություն:

Հաջորդականություն

Անվճար հարմարվողական սահիկ, ընդլայնված CSS3 անցումներով: Մինիմալիստական \u200b\u200bոճը, զարդարման 3 թեման, յուրաքանչյուր շրջանակի սլայդները, որոնք նկարվում են նկարի կենտրոնում հայտնված հորիզոնական ուղղությամբ, ձախ, ստորագրությունը աջ անկյունում կրկնօրինակվում է: Ապրանքի ներկայացման էջերի կոտրումը յուրաքանչյուր շրջանակում դիտելու համար: Վերահսկումը ներառում է նաեւ կոճակները ետ եւ առաջ: Աջակցեք բոլորին Ժամանակակից զննարկիչներ.

Սահեցրեք:

Կամերյան պարամետրերից եւ պարամետրերից կա ամբողջական գովազդային սլայդեր, եւ պարամետրերը, պարամետրերի փոփոխության արագության փոփոխություն կա, ձեռքով ռեժիմը միացնելով), շարունակական սլայդ շոու: Այս սլայդը իրավունք ունի լինել, եւ նա ինձ գրավեց միայն այն փաստով, որ այդպես էլ հետաքրքիր չէի գտել, ես կարող էի վատ փնտրել)))

Պատասխանատու պատկերի սահող:

Վլադիմիր Կուդինովովի պատկերների գեղեցիկ նման հարմարվողական սլայդը: Լավ, բարձր զարգացած գործիք, տրամադրված տեսողական օրինակներով եւ մանրամասն հրահանգներով ստեղծելու, տեղադրելու եւ օգտագործման համար: Հարմարվող ձեւավորում, Cute կոճակները եւ կանաչի հրաձիգները, ամեն ինչ բավականին գեղեցիկ եւ հանգիստ է, առանց ճնշման:

Կոտորգ

Անվճար JQuery Slider Plugin- ը զուգահեռ ազդեցությամբ `պատկերների եւ տեքստի սլայդների համար: Slide անիմացիան ունի մի քանի ցուցադրման արժեքներ, յուրաքանչյուր անգամ եւ անիմացիոն պարամետրով լիարժեք վերահսկմամբ: Միանգամից միանգամից մի քանի տարրեր մի քանի տարրեր: Կարող եք սահմանել Տարբեր մեթոդներ Անիմացիաներ, սլայդների անհետացում կամ անցում որոշակի ուղղությամբ: Ավտոմատ էկրան եւ ձեռքով հսկողություն, օգտագործելով նավիգացիայի նետերը թռուցիկ, երբ դուք սավառնեք: Սլայդերի տեսքի անիմացիոն էֆեկտների 10 տեսակներ եւ շատ ավելին ...

Վերանայումը բավականին ընդարձակ է, բայց բավարար քանակությամբ տեղեկատվական `հաշվի առնելով մեծ թվով ապրանքների: Բոլոր մանրամասները եւ մանրամասն նկարագրությունները: Ֆունկցիոնալություն Մեկ plug-in, դուք կարող եք ուղղակիորեն սովորել մշակողների էջերում: Մնում է հուսալ, որ ինչ-որ մեկը թեթեւացրել է ամենաարդյունավետ գործիքի որոնումը, իրենց կայքերի էջերում գունագեղ նկարների սողաններ ստեղծելու համար:

Երբեւէ մտածել եք, որ հաճելի կլինի, որ կարողանաք աշխատել Russified ձեւանմուշների հետ: Պարզապես մտածեք մեկ րոպե: Ոչ մի անգամ ծախսվում է անգլալեզու ձեւանմուշների հետ աշխատելու վրա: Մենք շտապում ենք ձեզ հաճեցնել այն փաստը, որ Templatemonster- ը այժմ կարող է գտնվել Templatemonster Marketer- ում: Նրանցից յուրաքանչյուրի տեքստը գրվել է ձեռքով: Եվ, իհարկե, պատրաստի բոլոր լուծումները անհավատալիորեն հեշտ են օգտագործման համար:

Բոլոր հարգանքով, Էնդրյուին

Բրաուզերներն ավտոմատ կերպով ստեղծում են թռուցիկ խորհուրդներ, երբ վեբ վարպետները նախատեսված են հատկանիշով Կոչում ցանկացած տեքստ (որպես կանոն, հատկանիշ Կոչում Դիմել է պիտակների մի քանազոր , Հղումներին եւ պատկերներին): Երբ օգտվողները մկնիկի կուրսորը բերում են պիտակների, որոնցում ներկա է հատկանիշը ԿոչումԶննարկիչը ցուցադրում է թռուցիկ հուշում: Այս թռուցիկ խորհուրդները ( Գործիքային համակարգ) Մենք խմբագրելու ենք:

Այս հոդվածը կքննարկի.

- Ինչպես օգտագործել plugin- ը `ստանդարտ թռուցիկ խորհուրդները փոխարինելու համար

- Ինչպես կարգաբերել QTIP գործիքները

- Ինչպես ցուցադրել AJAX պարունակությունը թռուցիկ հուշում

Պարզ անհատական \u200b\u200bտեքստի թռուցիկ խորհուրդներ

Հուսով եմ, որ ձեզ հարկավոր չէ բացատրել, որ նման հատկանիշները, որպես վերնագիր, Alt- ը հաճախ չափազանց անհրաժեշտ է: Ի վերջո, նրանք օգնում են օգտվողներին ավելի լավ նավարկելու մեծ թվով տեղեկատվություն եւ, ավելին, այն չափազանց օգտակար է որոնիչի օպտիմիզացման համար: Առաջադրանքների միակ խնդիրը `դրանք հնարավոր չէ փոխել CSS ոճերի միջոցով: Այս խնդիրը լուծելու համար մենք օգտագործում ենք հնարավորությունը:

1. Ստեղծեք HTML ֆայլի հիմնական շրջանակը, որը պարունակում է վերնագրի հատկանիշով:

Հղումների ցուցակ.

• Գլխավոր հիմնական
• Ընկերության մասին
• Կոնտակտներ
• Պորտֆոլիո

2. Այժմ անհրաժեշտ է ներբեռնել QTIP plugin- ը պահեստից:

3. Միացրեք ներբեռնված ֆայլերը.

// Ստանդարտ գրադարան jQuery // Այս ֆայլում մենք կշնորհեք JQuery Scripips

4. Աշխատել թռուցիկ ակնարկը, որ գրությունները գրանցվեն. JS.

$ (Փաստաթուղթ). Պատրաստ (գործառույթ () ($ («ա»): QTIP ();));

Այս ձեւավորումը նշանակում է, որ վերնագրի հատկանիշին ներկա բոլոր տեղեկանքների համար կկիրառվի QTIP () մեթոդով:

Jquery qtip- ի ստեղծում:

1. Անհատականացնել թռուցիկ խորհուրդները կարող են տարբեր լինել: Սկսելու համար փոխեք այն դիրքը, որի միջոցով կցուցադրվեն հուշումները:

$ («Ա»): QTIP ((Պաշտոն. Իմ. «Ստորեւ կենտրոնը», // կուրսորի դիրքը. «Լավագույն կենտրոն» // TIP- ը չի լինի լիզել եզրերի էկրանը)));

2. Դիրքը տեղադրելուց հետո կարող եք անհապաղ գույնի գծապատկեր վերցնել: Ըստ լռելյայն, jquery.qtip.min.css ֆայլը պարունակում է հետեւյալ գունային ոճերը.

Qtip- լռելյայն (դեղին լռելյայն ոճ)

Qtip-bootstrap

Այս ոճերից մի քանիսի համար կարող եք ավելացնել ստվեր, QTIP-Shadow: Բացի այդ, ոչ ոք չի խանգարում ստեղծել իրենց ոճը, հիանալի զուգակցված ընդհանուրի հետ, չնայած ստանդարտ է, քան չարաշահում:

$ («Ա»): QTIP ((Պաշտոն, "Ստորին կենտրոն", "Թոփ կենտրոն", Viewport: ;

Նավիգացիայի ընտրացանկի ստեղծում `թռուցիկ հուշումներով

1. Սկսելու համար ստեղծել HTML շրջանակ:

• ՏՈՒՆ.
• Մասին
• Կապ.
• Մեր աշխատանքը:

#Navigation (ֆոն. RGB (132,136,206); / * Հին բրաուզերներ * / Background: -Moz-Linear-Gradient (վերեւ, RGBA (72,136,206 , 1) 100%); / * FF3.6 + * / Background: -Երբ-գրադիենտ (գծային, ձախ վերեւ, ձախ ներքեւ (0%, RGBA ( , RGBA (72,79,181,1)), COLOR-STOP (100%, RGBA (132,136,206,1)); / * Chrome, Safari4 + * / Background: -EMBKIT-Linear-Gradient , 1) 0%, RGBA (72,79,181,1) 50%, RGBA (132,136,206,1) 100%); / * Chrome10 +, Safari5.1 + * / Background: -O-Linear-gradient (132,136,206, 1) 0%, RGBA (72,79,181,1) 50%, RGBA (132,136,206,1) 100%); / * opera11.10 + * / Background (Top, RGBA ( 132,136,206, 1) 0%, RGBA (72,79,181,1) 50%, RGBA (132,136,206,1) 100%); / * IE10 + * / Զտիչ: Progid: , Endcolorstr \u003d "# 8488ce", gradrienttype \u003d 0); / * IE6-9 * / Background: Linear-Grade: 0%, RGBA ( 132,136,206,1) 100%); / * W3C * / List անկ-ոճի տեսակը. Ոչ մեկը; ՄԱՐԳԻՆ, 100PX 20PX 20PX 20PX; Լիցք, 0; Արտահոսք. Թաքնված; -Երբ-Սահման-շառավիղ. 5px; -Մոզ-սահմանային շառավիղ. 5px; Սահման-շառավիղ. 5px; ) #Navigation Li (0; Լիցք, 0; ցուցադրում, բլոկ; բոց; ձախ; Սահմանային աջ, 1px պինդ # 8488; բլոկ; լիցք, 10px;) #Navigation A: Hover (ֆոն. # 859900; սահմանի աջ գույնը, # A3BB00;)

Արդյունքում պետք է ձեռք բերել հետեւյալ պատկերը.

3. Scripts.js ֆայլում ավելացնել.

$ ("# Նավիգացիա a"): QTIP ((Պաշտոն, "Թոփ կենտրոն", "Ստորին կենտրոն", Viewport (Offset) (Սա ) .Սլդանդավորումը (300);)), թաքցրեք. (Գործառույթ (օֆսեթ) ($ (սա) .Slide (100)))) ;

Այժմ, երբ նավարկության ընտրացանկում սավառնեք մկնիկի կուրսորը, կցուցադրվի ակնարկը (վերնագրի հատկանիշ):

Pop-up հուշում այլ բովանդակություն ցուցադրում

Ի լրումն ստանդարտ պիտակների ցուցադրման, մեկ այլ բովանդակություն կարող է ցուցադրվել թռուցիկ ակնարկով, օրինակ, ֆայլից վերցված, թաքնված կոնտեյներով կամ տվյալների բազայից, եւ առանց այտուկապատման միջոցների օգտագործման համար:

Այս հղումը բովանդակությունն է վերցնում Ajax- ով

HREF \u003d "Tooltip.txt" ատրիբուտի արժեքը նշանակում է, որ հիպերհղումը վերաբերում է սովորական TXT ֆայլին:

$ (". Infobox"): Յուրաքանչյուր (գործառույթ () ($) .QTIP ((բովանդակություն. (Բեռնվում է ... (սա) .Attr («HREF») // Որտեղ բովանդակություն վերցնել), վերնագիր. (/ / Ավելացնել գործիք, գործիքակազմով) ToolTIP տեքստում. Կոճակի փակման համար կոճակը ավելացնում է), դիրքը. «Իմ.« Թոփ կենտրոն »,« Ստորին կենտրոն », էֆեկտ. «// Հուշում ցուցադրում, երբ կտտացնում եք հղումը, կարող է փոխարինվել« Հովեր »-ով, այնուհետեւ հուշում է, երբ սողոսկում եք սոլո.« Unfocus ", // Հուշում կտտացնում է մեկ այլ ոճի էջի տարրը. (Դասարաններ," QTIP-Green Qtip-Shadow ")));)): ; // Երբ կտտացնում եք հղումը, զննարկիչը չի ներբեռնի URL- ն

Այս Ajax- ի ընդունելությունը գործում է միայն այն ժամանակ, երբ սերվերն աշխատում է: Այնպես որ, նա պետք է տեղադրվի տեղական համակարգչում, օրինակ, պետք է տեղադրվի, օրինակ:

Առայժմ ես չեմ մոռացել, թե ինչն են եւ դեմքերը ալյումինե հատվածի ռադիատորներ եւ որ ռադիատորները սովորաբար ընտրում են սպառողներին:

(Նվազեցում, 409)