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

آخرین ارسال های تالار مشاهده انجمن

عنوانپاسخبازدیدتوسط
iconforumقالب قبلی سایت وردپرس یار191AynaZ
iconforum200 فاکتور سئو سایت گوگل: فهرست کامل + توضیحات322121AynaZ
iconforumچرا كارت‌هاي هوشمند هزينه بر است ؟01AynaZ
iconforumراهنمای در مورد چند اسکریپت325AynaZ
iconforumلایسنس ویژوال کامپوسر760AynaZ
iconforumافزونه کوتاه کننده لینک13210AynaZ
iconforumراهنمایی در نصب قالب332AynaZ
iconforumدر پلاگین فرم تماس458AynaZ
iconforumآلارت برای دیتابیس321AynaZ
iconforumنمایش اعتبار در افزونه pro vip19AynaZ
iconforumکد افریم17laruz
درگاه پرداخت
درگاه پرداخت

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

آموزش ها , جی کوئری , متفرقه , مقالات,آموزش,ترفند , وردپرس
ساخت تابلو اعلانات با کمک جی کوئریReviewed by جواد on Aug 12Rating: 4.5ساخت تابلو اعلانات با کمک جی کوئریچند وقت پیش پلاگینی رو در سایت قرار داده بودم که به کمک اون میتونستید یک تابلو اعلانات زیبا رو در بالای سایتتون به نمایش در بیارید. و امروز هم آموزش ساختش رو با کمک css و جی کوئری براتون آماده کردم، پس همراه ما باشید

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

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

حتما بخوانید  پلاگین زیبا و متحرک Loader سایت به صورت جی کوئری

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

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

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

حتما بخوانید  اسلایدر بسیار پیشرفته جی کوئری در ۱۴ طرح

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

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

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

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

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

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

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

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

حتما بخوانید  اسکریپت منوی تصویری بسیار زیبا و کاربردی

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


به کانال تلگرام بیست اسکریپت بپیوندید !

دانلود

خرید هاست حرفه ای سازگار با انواع اسکریپت همراه با نصب رایگان

مطلب مفیدی بود ؟
نویسنده : admin تاریخ : 1393/05/21 2 آموزش ها , جی کوئری , متفرقه , مقالات,آموزش,ترفند , وردپرس

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

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
3,792پلاگین جی کوئری شمارنده اعداد FlipCounter تاریخ : 1394/04/21
877اسکریپت نمایش فن پیج فیسبوک در وبسایت Famax نسخه 5.3 تاریخ : 1395/01/11
1,811افزونه حرفه ای مکعب نمونه کارها تاریخ : 1392/09/24
2,478اسلایدر سه بعدی بسیار زیبای جی کوئری تاریخ : 1392/08/11
1,505اسکریپت 9 سبک خاص آیکون های متحرک شبکه های اجتماعی تاریخ : 1395/04/22
1,524اسکریپت بنر های اسلایدی حرفه ای CJ Shuffle تاریخ : 1395/05/14
2,780فرم جستجو به صورت CSS , جی کوئری + PSD تاریخ : 1392/10/6
1,706اسکریپت لیست کارها به صورت ایجکس تاریخ : 1392/07/29
1,993اسکریپت jQuery نمایش وضعیت آب و هوا Ideabox تاریخ : 1394/05/31
1,495افکت زمان و تاریخ مشابه iOS 7 به صورت جی کوئری تاریخ : 1392/10/22
1,956روبان بسیار زیبای متحرک به صورت جی کوئری تاریخ : 1393/01/8
3,369افکت گذاری بسیار زیبا بر روی تصاویر با جی کوئری تاریخ : 1392/12/17
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب