تبلیغات
طراحی و بهینه سازیمشاهده

هاست

ساخت تابلو اعلانات با کمک جی کوئری

آموزش ها , جی کوئری , متفرقه , مقالات,آموزش,ترفند , وردپرس

چند وقت پیش پلاگینی رو در سایت قرار داده بودم که به کمک اون میتونستید یک تابلو اعلانات زیبا رو در بالای سایتتون به نمایش در بیارید.
و امروز هم آموزش ساختش رو با کمک css و جی کوئری براتون آماده کردم، پس همراه ما باشید…اولین قدم کار اینه که به header.php قالبتون برید و قطعه کد زیر رو، درست پایین تگ <body> قرار بدید.این کد چارچوب اصلی تابلو اعلانات ماست، به عبارت دیگه پی کار برنامست و با وجودش طرح کلی، متن و تصویر دکمه های باز و بسته رو شکل میده.

ساخت تابلو اعلانات با کمک جی کوئری

بعد از پی ریزی، نوبت به قالب بندی و زیبا سازی می رسه، پس به style.css قالبتون مراجعه کنید و کد پایین رو در آخر کدهای موجود قرار بدید.

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

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

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

پس به دوباره به header قالبمون بر می گردیم و با گذاشتن کد زیر در اونجا، کتابخونه جی کوئری رو در قالبمون قرارمی دیم. (این کد رو میتونید در بالای </head> قرار بدید)

– نکته : اگه در قالب فعلیتون کتابخونه جی کوئری وجود داره دیگه نیازی به قرار دادن این کد ندارید.

حالا میتونیم کار با جی کوئری رو آغاز کنیم:

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

سپس کد زیر رو در زیر رو در جای مشخص شده قرار بدید.
این کد با فراخوانی تابع slideDown  و پاس دادن کلاسnote-bar بهش، با یک سرعت قابل تنظیم، محتویات این کلاس رو به صورت انیمیشن پایین رونده در بالای سایت به نمایش در میاره.

در ادامه هم کد زیر رو بهش اضافه میکنیم تا وقتی بر روی آیکون ضربدر کلیک کردیم، باکس فعلی بسته شه و محتویات کلاس open-button به نمایش در بیاد.

در آخر هم با اضافه کردن کد زیر کار رو به اتمام میرسونیم (عملکرد این کد هم شبیه کد بالاست)

کد زیر هم نتیجه ی کامل شده ی کدهای بالاست:

امیدوارم که توضیحات مفید بوده باشه…
تا درودی دیگر، بدرود…

لطفا به این مطلب امتیاز بدید


دانلود


هاست مناسب برای تمامی اسکریپت های 20script MyHBD.net >

هاست
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 2 آموزش ها , جی کوئری , متفرقه , مقالات,آموزش,ترفند , وردپرس

لینک کوتاه مطلب : https://www.20script.ir/?p=7907

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
5,935اسکریپت تب جی کوئری با افکت Easing تاریخ : 2014/07/20
5,016پلاگین جی کوئری دکمه اشتراک گذاری مطالب در موبایل تاریخ : 2016/04/30
8,222اسلایدر پس زمینه به صورت جی کوئری تاریخ : 2016/08/3
6,242اسکریپت جی کوئری بنر های اسلایدی با طرح کاشی تاریخ : 2016/06/1
4,292پلاگین جی کوئری Slickhover تاریخ : 2016/02/21
5,385دکمه مستطیل شبکه های اجتماعی، PSD + HTML / CSS / جی کوئری تاریخ : 2013/11/27
5,316افکت زیبا بر روی تصاویر به صورت جی کوئری تاریخ : 2014/01/17
6,800اسکریپت ایجاد صفحات Flip Book با اسکریپت WOWBook تاریخ : 2013/10/29
8,014پوسته تک صفحه‌ ای ژنیک به صورت CSS و HTML تاریخ : 2014/06/17
5,330رابط کاربری iMessage در 9 IOS با جی کوئری تاریخ : 2016/04/21
8,166افزونه ساخت تب های حرفه ای در وردپرس CodeTabs تاریخ : 2017/12/17
1,816تبدیل تصاویر به صورت یک نقشه با MobilyMap تاریخ : 2019/11/8
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب