طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

اسلاید متن روی عکس با jQuery


اسلاید متن روی عکس با jQuery

در این آموزش, قصد داریم به شما نحوه نمایش متن روی عکس را با رویداد mouseover نمایش بدیم . در آموزش های قبلی jQuery نحوه ساخت اسلایدر عکس با جی کوئری را دیدید.

در این مثال, ما از jQuery و CSS برای نمایش اسلاید متن روی عکس استفاده کردیم. ما از تابع slideToggle() جی کوئری برای ساخت افکت toggle با بردن ماوس روی چارچوب تصویر بهره بریم.

اسلاید متن روی عکس با jQuery

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

کد HTML اسلاید متن روی عکس

این کد به شما چارجوب تصویر با اسلاید متن را نشان میدهد. تگ DIV اسلاید متن بطور معمول مخفی است و با اجرای افکت toggle جی کوئری به هنگام بردن ماوس روی قسمت از تصویر , نمایش داده خواهد شد.

کد CSS اسلاید متن روی عکس

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

حتما بخوانید  ساخت اسلایدر منو در jQuery

اسلاید متن روی عکس با jQuery

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

امیدوارم از آموزش اسلاید متن روی عکس با jQuery نهایت استفاده را برده باشید .

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.

اگر مفید بود, لطفا به اشترک بگذارید تا دوستان دیگر نیز بهره ببرند

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

دیدگاه کاربران

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

آموزش طراحی وب سایت

نظر کاربران عزیز

آموزش های آنلاین در چه زمینه ای تهیه کنیم ؟

  • آموزش جاوااسکریپت و جی کوئری (45%, 10)
  • آموزش ساخت ربات تلگرام (45%, 10)
  • آموزش بوت استرپ 4 (9%, 2)

تعداد رای ها : 22

Loading ... Loading ...

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما


logo-samandehi نماد اعتماد الکترونیک

دانلود کتاب

عضویت در خبرنامه