1. نمایش اسلاید بسیار جذاب در jQuery "نمایش اسلاید الاستیک"

نمایش اسلاید با مینیاتوری ها و توصیف اسلایدها. اثرات مختلف تغییر تصاویر. دو گزینه وجود دارد: با تغییر اسلاید اتوماتیک و بدون.

2. Slider CSS3 خالص

لغزنده تصویر ناز با توضیحات و تغییر اسلاید خودکار. هنگامی که مکان نما را شناورید، تصویر چرخش متوقف می شود. توقف با اثر CSS3 همراه است.

3. اتصال جی کوئری "Photorama"

گالری گالری خوب.

4. اثرات متن "اثرات تایپوگرافی"

اثرات جالب برای کار با تایپوگرافی با CSS3 و جی کوئری. 7 اثر مختلف خنک.

5. پلاگین "Darkbox"

یک پلاگین نور کوچک برای نمایش تصاویر در بلوک پاپ آپ.

6. اثر شناور بر جی کوئری

اثر دایره ای هنگام شناور کردن.

7. دکمه های متحرک جی کوئری CSS3

بسیاری از اثرات CSS3 متحرک متحرک برای ایجاد دکمه های خیره کننده برای سایت شما. فقط اثرات بسیار جالب در هنگام شناور کردن.

8. جی کوئری HTML5 تغییر تصاویر پس زمینه

هنگامی که روی ریز عکسها کلیک میکنید، تصاویر پسزمینه با اثر تاری جایگزین یکدیگر می شوند. هنگامی که پنجره مرورگر تغییر اندازه داده می شود، اندازه تصویر پس زمینه تغییر می کند.

8. اثرات تایپوگرافی تعاملی

جلوه های متن جالب با استفاده از HTML5 و jQuery (4 اثر مختلف). ماوس بر روی متن برای دیدن اثر.

9. امضاهای تصویر پاپ آپ

بسیاری از اثرات متحرک مختلف هنگام پیوستن به پیاده سازی امضاهای تصویر پاپ آپ.

10. پلاگین "Portamento"

بلوک شناور در جی کوئری. هنگام پیمایش صفحه، همیشه در منطقه دید باقی می ماند.

11. Scrollers محتوا

پلاگین جی کوئری برای نمایش پیمایش در بلوک های اندازه ثابت. چندین دکوراسیون سبک.

12. پلاگین "Scrollbars"

پیاده سازی جی کوئری پیمایش افقی و عمودی محتویات در واحد اندازه ثابت.

13. پلاگین "اسکرول کوچک"

پلاگین جی کوئری برای پیاده سازی پیمایش عمودی و افقی محتوا.

نسخه ی نمایشی

دانلود

14. پلاگین "jscrollpane"

محتوای پیمایش مرورگر متقابل در بلوک.

15. بلوک شناور "پیمایش دنبال"

پلاگین برای ایجاد یک بلوک که پس از پیمایش صفحه حرکت می کند. ممکن است بلوک را با کلیک بر روی لینک حل کنید.

16. پانل های پاپ آپ "نوار کناری"

پانل های در حال اجرا از هر طرف صفحه وب.

17. راه حل های دیدنی CSS3 برای صفحه پلاگین

سه گزینه برای پیاده سازی اثرات متحرک برای ایجاد یک پلاگین "سایت در توسعه".

17. اثر هنگام پیمایش صفحه

اثر شگفت انگیز هنگام پیمایش صفحه: عناصر از منطقه پشت صفحه خارج می شوند و یا بالعکس در پشت صفحه نمایش پنهان می شوند. چنین راه حل مناسب برای استفاده در سایت های نمونه کارها، برای ارائه دیدنی و جذاب از پروژه های تکمیل شده با شرح مختصری مناسب است.

19. پلاگین "Fancybox 2"

یک نسخه جدید و کاملا بازنویسی از Fancybox ذکر شده توسط بسیاری از پلاگین، برای نمایش تصاویر و محتوای دیگر در پنجره های مدال.

20. گالری حداقل.

پلاگین عملکردی با مجموعه ای از ویژگی های بزرگ: گالری، چرخ فلک، لغزنده، منو، توسعه دهنده، دکمه های متحرک.

21. جی کوئری اخبار تیکر

اخبار روتاتور در سایت. پیام ها را جایگزین یکدیگر و به نظر می رسد با استفاده از یک اثر جالب از دستگاه چاپ شده. شما می توانید اخبار را با کلیک بر روی دکمه "مکث" تغییر دهید. غرور را می توان از یک پیام به دیگری منتقل کرد.

22. تصاویر تطبیقی.

تصاویر مقیاس پذیر برای نمایش در دستگاه های موبایل. اندازه تصویر بستگی به اندازه پنجره دارد. فن آوری های مورد استفاده: جاوا اسکریپت و PHP5.

23. Vscroller.

جی کوئری عمودی، CSS3 اسکرولر. سرعت پیمایش و زمان تاخیر تنظیم می شود.

24. منوی کشویی چند سطح "JQSIMPLEMENU"

پلاگین جی کوئری تازه برای ایجاد منوی کشویی افقی چند سطحی در سایت.

25. "JSCarousel 2.0"

پلاگین جی کوئری برای پیاده سازی چرخ فلک های عمودی و افقی.

26. Rotator "اخبار پویا"

پلاگین جی کوئری برای نمایش زیبا از آخرین اخبار از RSS روبان.

27. منوی متحرک

اثر متحرک هنگام شناور کردن در مورد منو.

28. اثر متنی متحرک

سه نمونه دیدنی از کار با املاک CSS "پس زمینه-کلیپ: متن". CSS3 اثر در مرورگرهای قدیمی کار نمی کند.

29. CSS3 Blur Blur اثر

هنگامی که مکان نما را به بلوک افزایش می دهید، افزایش می یابد و بلوک های باقی مانده با متن در پس زمینه تار می شوند.

30. نکات پاپ آپ jQuery CSS3

31. جی کوئری پاپ آپ راهنمایی

32. منوی آسان CSS

33. یادداشت CSS3 و HTML5

پیاده سازی بلوک های مشابه Scrapbooks.

34. RLUTBOX.

نمایش یک سیستم رسانه ای در بلوک های پاپ آپ: تصاویر، ویدئو، فلش.

35. JQuery Zumber

افزایش سطح مربع.

36. CSS3 توضیحات تصویر جی کوئری

اتصال "گالری محتوای کشویی بر اساس کشویی" برای پیاده سازی شرح تصویر پاپ آپ. هنگامی که مکان نما را به برخی از تصاویر ارائه شده نشان می دهید، ظاهر می شود توضیح کوتاه با اشاره به مقاله کامل. هنگامی که شما شناور: اثر افزایش درب گاراژ.

37. اثر "قبل و بعد از" جی کوئری پلاگین "Ucompare"

فکر کردن پرده، شما می توانید دو تصویر را که بر روی یکدیگر قرار دارند مقایسه کنید. ایده آل برای این موارد زمانی که شما نیاز به ترتیب دو گزینه برای هر چیزی در صفحه: قبل و بعد.

38. اثر چرخش تصویر

39. نقشه های تعاملی صلح و اروپا و ایالات متحده آمریکا

40. نمایش اسلاید "slider.js v1.1"

چندین اثر مختلف انتقال متحرک بین اسلایدها.

1. اتصال jQuery "شناور زوم"

راه حل اصلی برای پیاده سازی شرح تصاویر هنگام شناور کردن مکان نما با استفاده از اثر زوم.

2. پلاگین "ضبط"

3. توضیحات تصویر جی کوئری در گالری

هنگامی که مکان نما را شناور، توضیحات ظاهر می شود، و تصویر خود را توسط یک لایه شفاف، یک رنگ خاص ریخته می شود.

4. پیاده سازی جی کوئری امضاهای تصویر

چندین گونه از امضا برای تصاویری که هنگام نشان دادن ماوس نشان می دهند، نشان می دهد.

5. اثر جی کوئری درب های کشویی

هنگامی که شما در یک مینیاتوری شنا می کنید، یک توصیف در جای خود ظاهر می شود.

6. جی کوئری پلاگین "Zoominfo"

هنگامی که مکان نما را به تصویر متصل می کنید، آن را کاهش می دهد و نام و توصیف عکس ظاهر می شود.

7. جی کوئری پلاگین "موزاییک"

پیاده سازی شرح تصویر پاپ آپ در هنگام شناور کردن نشانگر ماوس. 8 نوع مختلف از امضاهای پاپ آپ ارائه شده است. شما می توانید آنها را در صفحه نسخه ی نمایشی ببینید.

هنگامی که شما نشانگر ماوس را به تصویر می دهید، شرح مختصری را با اشاره به اطلاعات دقیق ارائه می دهد.

9. پلاگین برای پیاده سازی امضای تصویر

یکی دیگر از گزینه ای برای پیاده سازی امضا های تصویر پاپ آپ در هنگام شناور کردن نشانگر. یک فرصت برای انتخاب از دو وجود دارد اثرات جی کوئری ظاهر امضا.

10. شرح تصویر "پیش نمایش پنجره"

پلاگین برای تصاویر امضا. هنگامی که ماوس را با یک اثر متحرک حرکت می دهید، یک توصیف ظاهر می شود. جی کوئری برای ایجاد انیمیشن استفاده می شود.

آماده شده بر اساس مواد

پلاگین های جی کوئری از جمله اجزای ضروری هنگام ساخت یک سایت و در واقع هر برنامه وب هستند. آنها به شما اجازه می دهند قابلیت های خود را گسترش دهید. این مقاله لیست های مفید ترین در سال 2012 را فهرست می کند. برای بیشتر جستجوی مناسب تمام پلاگین ها به دسته های زیر تقسیم می شوند: طرح بندی صفحه وب - پلاگین ها، برچسب ها برای ناوبری، پلاگین های فرم، پلاگین ها برای ایجاد لغزنده ها، پلاگین ها برای نمودارها و نمودارها، اثرات تصاویر و دیگران. همچنین در میان این پلاگین ها دارای پلاگین هایی هستند که به شما کمک می کند برنامه های سازگار خود را ایجاد کنید.

پلاگین طرح بندی صفحه

equalize.js یک پلاگین جی کوئری است که به شما اجازه می دهد یک ساختار بلوک از سایت ایجاد کنید. این اجازه می دهد تا شما را به ارتفاع و عرض هر عنصر.

پلاگین جدید برای طرح بندی های سازگار .Freetile اجازه می دهد تا شما را به ایجاد عناصر هر اندازه، در حالی که نیاز به ایجاد یک اندازه ثابت از ستون های شبکه ناپدید می شود.

Gridster.js پلاگین جی کوئری برای ساخت کشیدن و رها کردن شبکه. همچنین استفاده از آن را می توان به صورت پویا حذف و اضافه کردن عناصر از شبکه.

zoomooz.js - این یک پلاگین جی کوئری آسان برای استفاده برای افزایش هر عنصر صفحه وب است. شما به راحتی می توانید یک اثر زوم را به سادگی اضافه کردن کلاس ZoomTarget به هر عنصر HTML اضافه کنید. افزایش می تواند با کلیک کردن بر روی صفحه تنظیم مجدد شود. پلاگین در آن آزمایش شد اینترنت اکسپلورر. 9، Safari 3 +، فایرفاکس 3.6 +، اپرا و کروم.

Wookmark یک افزونه برای ایجاد یک قالب چندگانه پویا است.

jQuery Hiddenposition پلاگین است که به شما اجازه می دهد هر مورد اضافه کنید، حتی اگر آن پنهان است.

stellar.js - jQuery-plugin، که اثر اختلاف منظر برای اقلام را فراهم می کند.

پلاگین جی کوئری، که اثر رطوبت واقعی صفحات را در طول انتقال بین بخش ها اضافه می کند. شتاب سخت افزاری استفاده می شود. بر روی قرص ها و گوشی های هوشمند کار می کند.

پلاگین برای تایپوگرافی تطبیقی. این اجازه می دهد تا شما را به استفاده از انتخاب انتخاب اندازه فونت کامل.

به شما اجازه می دهد تا حرکات متحرک را در سایت، از جمله تمام تحولات احتمالی ایجاد کنید.

پلاگین برای ناوبری

Horizontalnav یک پلاگین جی کوئری است که منوی افقی را گسترش می دهد به طوری که آن را به کل عرض ظرف مطابقت دارد. اگر تا به حال سعی کرده اید اثر تنش صحیح منوی ناوبری را ایجاد کنید کانتینر CSS پروژه، پس از آن شما قطعا می دانید که چقدر سخت است که برای سازگاری متقابل مرورگر انجام شود. این پلاگین آن را به آسانی انجام می دهد.

stickymojo پلاگین آسان، سریع و انعطاف پذیر پلاگین "Lipuchy" در jQuery است. این کار با فایرفاکس، کروم، سافاری و IE8 + کار می کند (به خوبی پشتیبانی از نسخه قدیمی IE).

dDSLick یک افزونه است که به شما اجازه می دهد تا منوهای کشویی را با تصاویر و توضیحات ایجاد کنید.

پلاگین برای یک سازمان ساده از پانل های کشویی. این افزونه از کار با کوکی ها پشتیبانی می کند تا وضعیت پانل ها را ذخیره کند. در میان گزینه ها دارای توابع مرجع برای پیکربندی روند باز کردن و بسته شدن بخش ها هستند.

پلاگین برای ایجاد بلوک های تاشو که ممکن است حاوی هر گونه اطلاعات در یک فضای محدود باشد.

پلاگین های تشکیل دهنده

پلاگین به شما امکان می دهد سطح پیچیدگی رمز عبور را تعیین کنید.

جی کوئری پلاگین برای تجسم فایل دانلود فایل. این پشتیبانی از کشیدن و رها کردن را پشتیبانی می کند و پیش نمایش های فوری را برای عکس ها ایجاد می کند.

پلاگین که شماره کارت اعتباری را تعیین و بررسی می کند. این اجازه می دهد تا شما را به تعیین نوع کارت اعتباری.

پلاگین برای فیلتر کردن داده ها. شما می توانید داده ها را در برچسب و برای چند برچسب و دسته بندی فیلتر کنید.

پلاگین که ورودی را بررسی می کند پست الکترونیک در صحت لیست پیش آماده شده (در اینجا شما می توانید محبوب ترین را شامل شود خدمات پست الکترونیکی mail.ru، yandrex.ru، جیمیل، و غیره).

پلاگین برای ایجاد لغزنده و چرخ فلک

پلاگین که به شما اجازه می دهد تا با استفاده از ماوس، صفحه لمسی و صفحه کلید، انتقال را کنترل کنید. برای انتقال هایی که به طور پیش فرض تنظیم می شوند، می توانید اضافه کنید، که همچنین در فایل منبع نیز اضافه کنید.

iOSSLIDER.

iOSSLIDER یک افزونه برای یک نوار لغزنده متقابل مرورگر است.

RSLIDER - تمام صفحه لغزنده تطبیقی. در بارهh به طور خودکار با عرض صفحه شما سازگار است.

Fresco یک پلاگین Adaptive IdeBox-Plugin است. این می تواند مورد استفاده قرار گیرد برای ایجاد برنامه های پوشش خیره کننده ای که به طور کامل بر روی هر اندازه صفحه نمایش در تمام مرورگرها، در تمام دستگاه ها کار می کنند.

Bookblock: پلاگین تلنگر محتوا

Bookblock یک پلاگین جی کوئری است که می تواند برای ایجاد اجزای موجود در قالب جزوات استفاده شود که به شما امکان ایجاد ناوبری مانند "چرخش صفحات" را می دهد. در اینجا شما می توانید از هر محتوا استفاده کنید، تصاویر یا متن آن باشد. این پلاگین ساختار را تنها در صورت لزوم تبدیل می کند (به عبارت دیگر، تنها زمانی که صفحه تبدیل شده است) و از همپوشانی و سایه ها برای تحقق واقع گرایی استفاده می کند.

آداپتور یک نوار لغزنده محتوا آسان است که یک رابط کاربری ساده را برای توسعه دهندگان فراهم می کند تا یک انیمیشن متحرک 2D یا 3D زیبا از اسلایدها را ایجاد کند. در حال حاضر، پشتیبانی از خواص 3D در مرورگرهای WebKit و فایرفاکس پشتیبانی می شود. تمام انتقال 2D در IE6 + و سایر مرورگرهای مدرن مورد آزمایش قرار گرفتند.

چرخ فلک مداوم با چندین ویژگی مفید.آسان است برای پیکربندی و پشتیبانی از مرورگرهای حتی قدیمی.

Rhinoslider. - بسیار انعطاف پذیر جی کوئری نمایش اسلاید پلاگین نه تنها اثرات مختلفی ارائه می شود، بلکه ممکن است سبک های خود را اضافه کنید، جلوه ها و توابع خود را به نوار لغزنده اضافه کنید.

توالی یک پلاگین جی کوئری برای پیمایش محتوا با راه اصلی است و شما را با کنترل کامل فراهم می کند. شما می توانید از هر نوع محتوا استفاده کنید. این بی نهایت حرکت خواهد کرد. نشانه گذاری معنایی در اینجا استفاده می شود، و همچنین قالب ها و دستگاه های تطبیقی \u200b\u200bبر اساس تکنولوژی لمسی.

glisse.js یک گالری عکس جی کوئری ساده، سازگار و به راحتی قابل تنظیم است.

پلاگین ها برای نمودارها و نمودارها

Morris.js یک کتابخانه سبک وزن است که از جی کوئری و Raphaël برای تسهیل برنامه زمانبندی طراحی استفاده می کند.

jQuery org chart یک افزونه است که به شما امکان می دهد ساختارهای درختی را با عناصر توپینگ ایجاد کنید. داده ها به یک لیست اختلال تعمیم داده شده وارد می شوند که باعث می شود پلاگین فوق العاده آسان برای استفاده باشد.

پلاگین برای تایپوگرافی

bacon.js یک پلاگین جی کوئری است که به شما اجازه می دهد متن را در اطراف منحنی Bezier یا Line قرار دهید.

Textualizer - پلاگین جی کوئری برای ایجاد جلوه های زیبا بر روی متن. کار پشتیبانی شده در: Chrome، Safari 4+، فایرفاکس 3.5+، یعنی 6،7،8،0، اپرا 10.6+، Safari موبایل (در iOS 4)

SlabText یک پلاگین جی کوئری بسیار مفید است که هدر ها را قبل از تغییر اندازه هر ردیف روشن می کند تا منطقه موجود را به صورت افقی پر کند.

trunk8 یک افزونه trigtele متن در jQuery است. به شما اجازه می دهد تا یک بلوک بزرگ از متن را به یک بخش کوچکتر برای بازرسی اولیه برش دهید.

پلاگین ها برای ایجاد اثرات مختلف برای تصاویر

این یک پلاگین جی کوئری است که از فیلترهای CSS3 برای ایجاد یک اثر شیب استفاده می کند.

پلاگین برای پیاده سازی اثر تصاویر تطبیقی.

پلاگین جی کوئری که باعث می شود کارت های تصویر ایجاد شود. با استفاده از این ابزار، هر تصویر نقشه را می توان برجسته یا انتخاب کرد، و همچنین کارت را می توان کنترل کرد. روش های مختلف. این کار بر روی تمام مرورگرهای اصلی، از جمله اینترنت اکسپلورر 6، از فلاش استفاده نمی کند، و هیچ چیزی جز jQuery ندارد. برخی از اثرات پیشرفته نیاز به پشتیبانی HTML5، اما هنوز هم در مرورگرهای قدیمی کار خواهد کرد.

تطبیقی، یا اگر شما می خواهید، طراحی وب پاسخگو در حال حاضر نه تنها یک روند طراح دیگر، این در حال حاضر یک استاندارد خاص برای توسعه سایت ها، ارائه جهانی بودن وب سایت ها، ادراک بصری هماهنگ در صفحه نمایش دستگاه های مختلف کاربر است. اخیرا، هنگام توسعه قالب تطبیقیمن مجبور شدم با مشکلات مختلفی در ادغام لغزنده های خاص و گالری های تصویری، بدون شکستن سبک طراحی کلی مقابله کنم. در حال حاضر همه چیز بسیار ساده تر است، تعداد زیادی از راه حل های آماده شده در شبکه وجود دارد و آنچه که به خصوص خوشحال است، اکثر آنها در دسترسی آزاد هستند، با منبع باز.

با توجه به تنوع ابزارهای پیشنهادی، من یک بررسی کوچک از پیشرفت های قابل توجهی از لغزنده های جی کوئری تطبیقی \u200b\u200bاز تصاویری را که در آخرین بار ظاهر شدم و بدون هیچ گونه محدودیتی توزیع کردم، جمع آوری کردم. کاملا رایگان

لغزنده وای

لغزنده جی کوئری تطبیقی \u200b\u200bتصاویر با مجموعه ای با شکوه جلوههای بصری (چرخش، خروج، تاری، مارپیچ، پرده، و غیره ...) و بسیاری از الگوهای آماده ساخته شده است. با کمک جادوگر درج ساخته شده در وزن، شما می توانید به راحتی و به راحتی اسلاید های خیره کننده را در عرض چند دقیقه ایجاد کنید. وب سایت توسعه دهنده دارای تمام مستندات لازم در تنظیم و استفاده از پلاگین در روسیه، نمونه های عالی زندگی از عملیات پلاگین است. همچنین برای دانلود جداگانه در دسترس است پلاگین وردپرس و ماژول جوملا. من مطمئن هستم که بسیاری از این لغزان فوق العاده، هر دو مبتدی و یک وبسایت راهنمایی را دوست دارند.

hislider

HTML5، لغزنده جی کوئری و گالری عکس، پلاگین کاملا رایگان برای استفاده شخصی در سایت های در حال اجرا سیستم های محبوب - وردپرس، جوملا، دروپال. با استفاده از این ابزار ساده، اما نه کاربردی، شما به راحتی می توانید بر روی صفحات سایت های ما، نمایش اسلاید های شگفت انگیز و روشن، سخنرانی های دیدنی و اطلاعیه های پیام های جدید ایجاد کنید. چند الگوهای آماده و پوسته برای یک نوار لغزنده، اثرات انتقال خیره کننده (تغییر)، خروجی محتوای چند رسانه ای مختلف :، ویدئو با یوتیوب و Vimeo، تنظیمات سفارشی انعطاف پذیر، و غیره ...

لغزنده Nivo.

Nivo Slider یک نوع قدیمی است، به خوبی شناخته شده به هر کس که در موضوع، یکی از زیبا ترین و آسان برای استفاده از لغزنده تصاویر است. پلاگین Slider جی کوئری Nivo رایگان برای دانلود و استفاده بیشتر، توزیع شده تحت مجوز MIT است. همچنین یک پلاگین جداگانه برای وردپرس وجود دارد، اما متاسفانه قبلا پرداخت کرده و رها شده است تا 29 دلار برای هر مجوز داشته باشد. بهتر است کمی با فایل های WP Theme انجام دهید و نسخه جی کوئری رایگان پلاگین Nivo Slider را به وبلاگ خود وصل کنید، مزایای اطلاعات نحوه انجام آن در شبکه به اندازه کافی.
همانطور که برای عملکرد، همه چیز در نظم کامل است. کتابخانه جی کوئری V1.7 + برای کار، جلوه های انتقال زیبا، تنظیمات ساده و بسیار انعطاف پذیر، طرح بندی سازگار، پیرایش تصویر اتوماتیک و خیلی بیشتر استفاده می شود.

ایده لغزنده از توسعه دهندگان الهام گرفته شده است، به خوبی به سبک کل محصولات اپل شناخته شده است، که در آن چند مورد کوچک (تصاویر) در حال تغییر است تا بر روی دسته انتخاب شده با یک اثر ساده از انیمیشن کلیک کنید. Codrops در اختیار شما قرار می گیرد یک درس دقیق برای ایجاد این لغزنده، هماهنگی کامل نشانه گذاری HTML، مجموعه ای از قوانین CSS و پلاگین جی کوئری اجرایی، و همچنین یک مثال زنده فوق العاده از استفاده از لغزنده.

لغزنده شکاف

لغزنده تصویر تمام صفحه بر روی جی کوئری و CSS3 + کتاب های تفصیلی در ادغام پلاگین در صفحه سایت. ایده این است که اسلاید فعلی باز را با یک محتوای خاص در هنگام تغییر به محتوای بعدی یا قبلی بریزید. از جانب با استفاده از jQuery و انیمیشن های CSS شما می توانید انتقال های منحصر به فرد بین اسلایدها ایجاد کنید. طرح سازگار از لغزنده تضمین می کند که آن را به صفحه نمایش به همان اندازه در صفحه نمایش نگاه کنید. انواع متفاوت دستگاه های سفارشی

لغزنده محتوای الاستیک.

لغزنده محتوا که به طور خودکار در عرض و ارتفاع بسته به اندازه کانتینر اصلی که در آن قرار دارد تنظیم می شود. طراحی بسیار ساده و لغزنده انعطاف پذیر در تنظیمات جی کوئری، با ناوبری در پایین، هنگام تغییر اندازه صفحه نمایش تا کاهش، ناوبری به عنوان آیکون نمایش داده می شود. مستندات بسیار دقیق (درس ایجاد شده) و نمونه های زندگی استفاده می شود.

کشویی پشته 3D.

نسخه آزمایشی یک نوار لغزنده که تصاویر را با انتقال از یک هواپیما 3D نشان می دهد. تصاویر به دو پشته افقی تقسیم می شوند، با استفاده از فلش ناوبری نشان داده شده و انتقال هر تصویر بعدی به حالت مشاهده می شود. به طور کلی، هیچ چیز خاصی نیست، اما ایده و تکنیک اجرایی بسیار جالب است.

لغزنده جی کوئری از تصاویر بسیار ساده، 100٪ تطبیقی \u200b\u200bو تمام صفحه. کار لغزنده بر اساس انتقال CSS (انتقال اموال) در یک بسته نرم افزاری با جادو جی کوئری است. مقدار حداکثر عرض 100٪ به طور پیش فرض نصب شده است، به این ترتیب اندازه تصاویر بسته به اندازه صفحه نمایش تغییر خواهد کرد. هیچ چیز عوارض خاص انیمیشن و لذت در طراحی، همه چیز ساده است، و به کار بدون وقفه تیز.

اسلایدهای حداقل

نام خود را برای خود صحبت می کند شاید یکی از سبک وزن ترین و مینیمالیستی جی کوئری از تصاویر که من دیدم (پلاگین در 1KB). پاسخ ها lides.js -Kornet پلاگین جی کوئری، که یک نمایش اسلاید را با استفاده از عناصر داخل ظرف ایجاد می کند. با طیف گسترده ای از مرورگرها، از جمله تمام نسخه های IE - ترمز پیشرفت معروف، از IE6 و بالاتر کار می کند. این مقاله از انتقال CSS3 در یک بسته نرم افزاری با جاوا اسکریپت برای قابلیت اطمینان استفاده می کند. نشانه گذاری ساده با استفاده از یک لیست غیر ارادی، تنظیم انتقال و فواصل زمانی، اتوماتیک و کنترل دستی Swits Slides، و همچنین پشتیبانی از چندین نمایش اسلاید. این چنین "کودک" فریبنده است.

دوربین.

دوربین - جی کوئری رایگان پلاگین برای سازماندهی یک نمایش اسلاید در صفحات سایت ها، یک نوار لغزنده نور با بسیاری از اثرات انتقال، با طرح 100٪ انطباقی، و بسیار تنظیمات ساده. زیبا بر روی صفحه نمایش هر دستگاه کاربر (مانیتور کامپیوتر، قرص، گوشی های هوشمند و گوشی های هوشمند و تلفن های همراه) توانایی نشان دادن ویدئو داخلی. تغییر اسلاید اتوماتیک و کنترل دستی با استفاده از دکمه ها و بلوک تصاویر. عملا گالری کامل تصاویر در طراحی جمع و جور.

bxslider jQuery.

یکی دیگر، یک نوار لغزنده تطبیقی \u200b\u200bنسبتا ساده در جی کوئری. در اسلایدها، شما می توانید هر گونه محتوا، ویدئو، تصاویر، متن و عناصر دیگر را قرار دهید. پشتیبانی گسترده از صفحه های حسی از انتقال CSS-انیمیشن استفاده کنید. تعداد زیادی از تغییرات مختلف در ارائه نمایش اسلاید و گالری تصاویر جمع و جور. کنترل خودکار و دستی. اسلایدهای سوئیچینگ با استفاده از دکمه ها با انتخاب ریز عکسها. اندازه کوچک فایل منبع بسیار ساده است در تنظیمات و پیاده سازی.

FlexSlider 2.

FlexSlider 2 - نسخه ی به روز شده لغزنده از همان نام، با نرخ پاسخ بهبود یافته، یک وزارت اسکریپت و به حداقل رساندن بازپرداخت / بازپرداخت. پلاگین شامل یک نوار لغزنده اساسی است، کنترل کنترل اسلایدها را با استفاده از ریز عکسها، فلش های ساخته شده در سمت چپ راست و پایین صفحه ناوبری در قالب دکمه ها کنترل می کند. توانایی خروجی در اسلایدهای ویدئویی (Vimeo)، تنظیمات انعطاف پذیر پارامترها (انتقال، طراحی، فاصله زمانی)، طرح کاملا انطباقی.

گالریا

به خوبی شناخته شده و بسیار محبوب است پلاگین انطباقی جی کوئری برای ایجاد گالری های با کیفیت بالا و لغزنده تصاویر. رابط کشویی، به لطف کنترل پنل آن، بصری شبیه به پخش ویدئو معمولی است، ترکیب پلاگین شامل چندین دکوراسیون مختلف است. ویدئو و تصاویر جاسازی شده با خدمات محبوب: فلیکر، Vimeo، یوتیوب و دیگران. مستندات دقیق با راه اندازی و استفاده.

زغال اخته

ساده بدون لغزنده رایگان لغزنده جی کوئری از تصاویر، به طور خاص برای طراحی وب سازگار نوشته شده است. Blueberry یک پلاگین منبع باز جی کوئری تجربی است. طراحی مینیمالیستی، بدون اثرات، تنها تصاویر صاف پاپ آپ جایگزین یکدیگر پس از یک دوره معینی از زمان. همه چیز بسیار ساده است، قرار داده شده، من متصل و جلو ...

جی کوئری Popeye 2.1.

لغزنده تصویر جی کوئری بسیار فشرده با عناصر سبد. با توجه به اندازه های انعطاف پذیر آن، به سادگی در هر ظرف به صورت یک پست به صورت یک مینیاتوری، زمانی که مکان نما ماوس را شناور یا روی آن کلیک کنید، با یک تصویر بزرگ و عناصر کنترل فعال می شود، بسیار ساده است. مناسب است که چنین کشویی را در پانل های جانبی قرار دهید، برای ارائه محصولات یا اطلاعیه های خبری. راه حل عالی برای سایت ها با مقدار زیادی از اطلاعات.

توالی

لغزنده انطباقی رایگان با انتقال تمدید CSS3. سبک مینیمالیستی، 3 تم دکوراسیون، هر اسلاید فریم در جهت افقی که در مرکز تصویر ظاهر می شود، به سمت چپ می رود، امضای به سمت راست، مینیاتوری ها در گوشه پایین سمت راست تکرار می شوند. شکستن صفحات ارائه محصول برای مشاهده در هر فریم. کنترل همچنین شامل دکمه های جلو و عقب است. پشتیبانی از همه مرورگرهای مدرن.

کش رفتن

یک نوار لغزنده کاملا تبلیغی از تصاویر و قابلیت ها و تنظیمات وجود دارد، از تنظیمات تغییر در سرعت تغییر اسلاید، اتصال حالت دستی (دکمه های کنترل فعال می شوند)، نمایش اسلاید مداوم وجود دارد. این نوار لغزنده حق دارد و من را تنها با این واقعیت جذب کرد، من هیچ چیز خاصی را در این توسعه پیدا نکردم، ممکن است به دنبال بد باشم))

لغزنده تصویر پاسخگو.

زیبا چنین کشویی سازگار از تصاویر از ولادیمیر Kudinovov. ابزار خوب، بسیار توسعه یافته، ارائه شده با نمونه های بصری و دستورالعمل های دقیق برای ایجاد، نصب و استفاده. طراحی سازگار، دکمه های ناز و تیراندازان سبز، همه چیز بسیار زیبا و آرام است، بدون فشار.

fractionslider

پلاگین لغزنده رایگان جی کوئری با اثر اختلاف منظر برای تصاویر و اسلاید متن. انیمیشن اسلاید دارای چندین مقدار نمایش با کنترل کامل در هر زمان و پارامتر انیمیشن است. توانایی انیمیشن در یک بار چندین عنصر در اسلاید. شما می توانید تنظیم کنید روش های مختلف انیمیشن ها، ناپدید شدن اسلایدها یا انتقال از یک جهت خاص. صفحه نمایش اتوماتیک و کنترل دستی با استفاده از فلش های ناوبری پاپ آپ زمانی که شما شناور. 10 نوع اثرات انیمیشن از ظاهر اسلایدها و خیلی بیشتر ...

این بررسی بسیار گسترده بود، اما به دلیل تعداد زیادی از محصولات مورد بررسی کافی نیست. تمام جزئیات و شرح مفصلی. عملکرد یک پلاگین، شما می توانید به طور مستقیم در صفحات توسعه دهندگان یاد بگیرید. باقی مانده است که امیدوار باشیم که کسی جستجو برای ابزار لازم را کاهش دهد، برای ایجاد لغزنده های تصویر رنگی در صفحات سایت های خود.

آیا تا به حال فکر کرده اید که خوب است که بتوانم با قالب های Russified کار کنم؟ فقط یک دقیقه فکر کن هیچ هزینه ای برای کار با قالب های زبان انگلیسی وجود ندارد. ما عجله داریم تا شما را با این واقعیت که Templatemonster در حال حاضر در بازاریاب Templatemonster یافت می شود، لطفا به شما کمک کند. متن برای هر یک از آنها به صورت دستی نوشته شده بود. و البته، تمام راه حل های به پایان رسید فوق العاده آسان برای استفاده است.

با احترام، اندرو

مرورگرها به طور خودکار راهنمایی های پاپ آپ ایجاد می کنند زمانی که مدیران وب به ویژگی تجویز می شوند عنوان هر متن (به عنوان یک قانون، ویژگی عنوان اعمال شده به برچسب ها و . به لینک ها و تصاویر). هنگامی که کاربران نشانگر ماوس را به برچسب هایی که در آن ویژگی وجود دارد عنوانمرورگر یک نوک پاپ آپ را نمایش می دهد. این نکات پاپ آپ ( ابزار راهنمای) ما ویرایش خواهیم کرد.

این مقاله در نظر گرفته خواهد شد:

- نحوه استفاده از پلاگین برای جایگزینی راهنمایی های پاپ آپ استاندارد

- نحوه پیکربندی Tooltips QTIP

- نحوه نمایش محتوای AJAX در نوک پاپ آپ

نکات ساده سفارشی متن پاپ آپ

من امیدوارم که شما لازم نیست توضیح دهید که چنین ویژگی هایی به عنوان عنوان، ALT اغلب بسیار ضروری است. پس از همه، آنها به کاربران کمک می کنند تا بهتر از اطلاعات زیادی حرکت کنند و علاوه بر این، برای بهینه سازی موتور جستجو بسیار مفید است. تنها مشکل با دستورات - آنها را نمی توان با استفاده از سبک CSS تغییر داد. برای حل این مشکل، از این فرصت استفاده می کنیم.

1. فریم فایل اصلی HTML را ایجاد کنید که حاوی ویژگی عنوان است.

فهرست پیوندها:

• اصلی
• درباره شرکت
• مخاطب
• نمونه کارها

2. اکنون لازم است پلاگین QTIP را از مخزن دانلود کنید.

3. فایل های دانلود شده را وصل کنید:

// کتابخانه استاندارد جی کوئری // در این پرونده ما اسکریپت های جی کوئری را تجویز خواهیم کرد

4. برای کار کردن اشاره به پاپ آپ به اندازه کافی برای ثبت نام در scripts.js:

$ (سند) .ready (function () ($ ("a"). qtip ()؛))؛

این طراحی به این معنی است که برای تمام مراجع موجود در ویژگی عنوان با استفاده از روش QTIP () اعمال می شود.

راه اندازی jQuery qtip.

1. سفارشی کردن نکات پاپ آپ می تواند متفاوت باشد. برای شروع، موقعیتی را که دستورات نمایش داده می شود، تغییر دهید.

$ ("a"). QTIP ((موقعیت: (من: "مرکز پایین"، // موقعیت مکان نما در: "مرکز بالا"، // pop-up راهنمایی موقعیت: $ (پنجره) // نکته نخواهد بود لیک لبه لبه)))؛

2. پس از راه اندازی موقعیت، می توانید یک نمودار رنگی از سریع بگیرید. به طور پیش فرض، فایل jquery.qtip.min.css شامل سبک های زیر است:

QTIP-Default (سبک پیش فرض زرد)

qtip-bootstrap

به برخی از این سبک ها، شما می توانید یک سایه را اضافه کنید: QTIP-Shadow. علاوه بر این، هیچ کس با ایجاد سبک خود تداخل ندارد، کاملا با ژنرال ترکیب شده است، اگر چه استاندارد بیش از سوء استفاده است.

$ ("A"). QTIP ((موقعیت: (من: "مرکز پایین"، در: "مرکز بالا"، ViewPort: $ (پنجره))، سبک: (کلاس ها: "QTIP-GREEN QTIP-Shadow") ؛

ایجاد یک منوی ناوبری با دستورات پاپ آپ

1. برای شروع، یک قاب HTML ایجاد کنید:

• خانه
• در باره
• مخاطب.
• کار ما.

#navigation (سابقه و هدف: RGB (132،136،206)؛ / * مرورگرهای قدیمی * / پس زمینه: -Moz-linear-gradient (بالا، RGBA (132،136،206،1) 0٪، RGBA (72،79،181،1) 50٪، RGBA (132،136،206 ، 1) 100٪)؛ / * ff3.6 + * / background: -Webkit-gradient (خطی، سمت چپ، پایین سمت چپ، توقف رنگ (0٪، RGBA (132،136،206،1))، توقف رنگ (50 ٪، RGBA (72،79،181،1))، توقف رنگ (100٪، RGBA (132،136،206،1))؛ / * کروم، Safari4 + * / سابقه و هدف: -Webkit-linear-gradient (بالا، RGBA (132،136،206 ، 1) 0٪، RGBA (72،79،181،1) 50٪، RGBA (132،136،206،1) 100٪)؛ / * Chrome10 +، Safari5.1 + * / پس زمینه: -O-linear-gradient (بالا، RGBA (132،136،206، 1) 0٪، RGBA (72،79،181،1) 50٪، RGBA (132،136،206،1) 100٪)؛ / * opera11.10 + * / سابقه و هدف: -ms-linear-gradient (بالا، 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 \u003d "# 8488CE" ، endcolorstr \u003d "# 8488CE"، gradienttype \u003d 0)؛ / * ie6-9 * / پس زمینه: Gradient خطی (بالا، RGBA (132،136،206،1) 0٪، RGBA (72،79،181،1) 50٪، RGBA ( 132،136،206،1) 100٪)؛ / * W3C * / لیست سبک نوع: هیچکدام؛ حاشیه: 100px 20px 20px 20px؛ Padding: 0؛ سرریز: پنهان؛ -Webkit-border-radius: 5px؛ -Moz-Border-Radius: 5px؛ شعاع مرزی: 5 پیکسل؛ ) #navigation li (حاشیه: 0؛ padding: 0؛ صفحه نمایش: بلوک؛ شناور: چپ؛ مرز راست: 1px جامد # 4449A8؛) #navigation a (رنگ: #fff؛ سمت راست مرز: 1px جامد # 8488CE؛ صفحه نمایش: بلوک؛ Padding: 10px؛) #Navigation A: شناور (زمینه: # 859900؛ مرزی-راست رنگ: # A3BB00؛)

به عنوان یک نتیجه، تصویر زیر باید به دست آید:

3. در فایل scripts.js اضافه کنید:

$ ("# ناوبری A"). QTIP ((موقعیت: (من: "مرکز بالا"، در: "مرکز پایین"، Viewport: $ (پنجره))، نمایش: (اثر: تابع (Offset) ($ (این ) .slididedown (300)؛))، پنهان کردن: (اثر: تابع (Offset) ($ (این) .slideup (100)؛))، سبک: (کلاس ها: "QTIP سبز QTIP-Shadow")) ؛

در حال حاضر، هنگامی که مکان نما ماوس را روی منوی ناوبری حرکت می دهید، اشاره به پاپ آپ نمایش داده خواهد شد (ویژگی عنوان).

نمایش محتوای دیگر در نوک پاپ آپ

علاوه بر نمایش تگ های استاندارد، محتوای دیگر را می توان در یک اشاره پاپ آپ نمایش داده شود، به عنوان مثال از یک فایل، از یک کانتینر پنهان یا پایگاه داده، و بدون راه اندازی مجدد صفحه با استفاده از تکنولوژی AJAX نمایش داده می شود.

این لینک از فایل با AJAX استفاده می کند

مقدار ویژگی href \u003d "tooltip.txt" به این معنی است که لینک به فایل TXT معمولی اشاره دارد.

$ ("INFOBOX"). هر (تابع () ($) .QTIP ((محتوا: (متن: "بارگذاری ..."، // در حالی که محتوا بارگذاری می شود، این رکورد AJAX نمایش داده می شود: (URL: $ (این) .attrttr ("href") // از کجا باید محتوا را بگیرد)، عنوان: (// اضافه کردن یک فیلد با عنوان در متن Tooltip: $ (این) .attr ("عنوان")، دکمه: true // اضافه می کند یک دکمه برای بستن نکات))، موقعیت: (من: "مرکز بالا"، در: "مرکز پایین"، اثر: FALSE، // حذف Effect Viewport: $ (پنجره))، نمایش: (رویداد: "کلیک کنید "، // Tip نمایش زمانی که شما بر روی لینک کلیک کنید، می توانید با 'شناور' جایگزین، و سپس سریع ظاهر می شود زمانی که شما شناور solo: true // به شما اجازه می دهد تا تنها یک ابزار راهنمایی بر روی صفحه نمایش را نمایش دهید)، مخفی کردن:" Unfocus " "، // نوک کلیک هنگام کلیک بر روی یک عنصر صفحه دیگر سبک: (کلاس ها:" QTIP-Shadow QTIP سبز "))؛))؛)؛ اتصال (" کلیک "، عملکرد (e) (E.PreventDefault ())) ؛ // هنگامی که روی لینک کلیک میکنید، مرورگر URL را دانلود نمی کند

این پذیرش AJAX تنها زمانی کار می کند که سرور در حال اجرا است. به طوری که او در کامپیوتر محلی به دست آورد، به عنوان مثال، باید نصب شود.

تا کنون، من فراموش نکرده ام که جوانب مثبت و منفی رادیاتور بخش آلومینیومی و کدام رادیاتور معمولا مصرف کنندگان را انتخاب می کنند.

(رها کردن: 409)