جهت ورود به تالار گفتمان سایت کلیک کنید


پلاگین جی کوئری نمایش متن با 3 افکت جذاب ( با پشتیبانی حروف فارسی )

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

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

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

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

پلاگین جی کوئری نمایش متن با 3 افکت جذاب ( با پشتیبانی حروف فارسی )

و اما آموزش :

برای انجام این کار ابتدا فایل جی کوئری را از سایت Jquery.com دانلود کرده و سپس به سایت خود لینک کرده و آن را فراخوانی کنید ( داخل تگ head ) .

به عنوان مثال :

<script src="فایل دانلود شده از سایت جی کوئری" type="text/javascript"></script>

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

که به صورت کلی , دو تگ زیر را خواهیم داشت :

<script src="آدرس فایل دانلود شده از سایت جی کوئری" type="text/javascript"></script>

<script src="آدرس فایل دانلود شده مربوط به پلاگین" type="text/javascript"></script>

با انجام کارهای بالا نوبت به فراخوانی و انجام مراحل در html رسیده .

برای این کار شما باید ابتدا یک لیست ul بسازید و به صورت دلخواه یکی از کلاس های slide , fade و یا typing را به آن بدهید و سپس آیتم هایی که میخواهید پشت سر هم به نمایش درآید , در داخل تگ li که فرزند های ul هستند قرار دهید.

به عنوان مثال :

<ul class="fade">
   	<li>وحید مجیدی</li>
    <li>دانلود پلاگین جی کوئری</li>
    <li>اسکریپت دات کام</li>
</ul>



<ul class="slide">
	   <li>وحید مجیدی</li>
    <li>دانلود پلاگین جی کوئری</li>
    <li>اسکریپت دات کام</li>
</ul>



<ul class="typing">
	   <li>وحید مجیدی</li>
    <li>دانلود پلاگین جی کوئری</li>
    <li>اسکریپت دات کام</li>
</ul>

نکته : سه کلاس بالا , هر کدام به معنی انجام یک افکت می باشند که fade ( حالت محو شونده گی ) , slide ( کشویی ) و  typing ( تایپیستی ) میباشند .

در مرحله آخر میبایست کد فراخوانی این توابع را در html خود قرار دهید . ( بهترین مکان قبل از بسته شدن تگ <body/> می باشد .

<script>
$(document).ready(function() {
    $('.fade').inewsticker({
		speed       : 3000,
		effect      : 'fade',
		dir         : 'rtl',
		font_size   : 13,
		color       : '#000',
		font_family : 'tahoma',
		delay_after : 1000		
	});
	$('.slide').inewsticker({
		speed       : 2500,
		effect      : 'slide',
		dir         : 'rtl',
		font_size   : 13,
		color       : '#000',
		font_family : 'tahoma',
		delay_after : 1000						
	});
	$('.typing').inewsticker({
		speed           : 100,
		effect          : 'typing',
		dir             : 'rtl',
		font_size       : 13,
		color           : '#000',
		font_family     : 'tahoma',
		delay_after : 1000,
 
	});
});	
</script>

توجه بسیار مهم 1 : طبیعتا لازم به فراخوانی هر 3 تابع جی کوئری و هر 3 تگ ul در html نمیباشد و اینجا به صورت کلی بیان شده است . شما میتوانید هر افکتی که دوست دارید برایش ul ایجاد کرده , کلاس مورد نظر را داده و سپس تابع مورد نظر آن را فراخوانی کنید .

نکته بسیار مهم  2 : شما میتوانید سرعت , اندازه فونت , رنگ نوشته و … را با توجه به آموزش زیر راحتی تغییر دهید .

		speed           : 100,   //   سرعت تغییر متن 
		effect          : 'typing',   //   نوع افکت که 3 نوع fade,slide,typing میباشد
		dir             : 'rtl',   //   نوی دایرکشن که rtl یا ltr میباشد
		font_size       : 13,   //   اندازه متن
		color           : '#000',   //   رنگ متن
		font_family     : 'tahoma',  //   نوع فونت
		delay_after : 1000,  //   فاصله بین تغییر آیتم ها

پیش نمایش آماده

دانلود فایل آماده مراحل بالا

پخش اختصاصی

گرداوری : وحید مجیدی

 

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

13 پاسخ به “پلاگین جی کوئری نمایش متن با 3 افکت جذاب ( با پشتیبانی حروف فارسی )”

  1. حبیبی گفت:

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

  2. الیاس گفت:

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

  3. elham گفت:

    mochakeram alii bood

  4. gooly گفت:

    با سلام
    من تمامی مراحل انجام دادم کار نمیکنه
    کل داده داخل لیست را میاره فقط
    ایا فایل مشکلی داره؟

    • وحید مجیدی صدر گفت:

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

      اگر مشکلتون حل نشد در فروم بیان کنید ( با عکس و یا فایل )

  5. fateme.engineer گفت:

    great

  6. ناهید گفت:

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

  7. a گفت:

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

    • وحید مجیدی گفت:

      خیر دوست عزیزم, بی نهایت بار تکرار میشه .

      دمو رو ببینید

  8. reza گفت:

    سلام ممنون از این پلاگین
    من قرار دادم تو پروژه ام درست کار کرد الا یه جاش اونم بررسی کنید
    وقتی می خوای به صورت لینک قرار بدی با افکت های fade , slide درست کار می کنه ولی با تایپینگ درست کار نمی کنه یعنی لینک نمی شه بررسی کنید و خبر بدید لطفا
    ممنون

پاسخ دادن به fateme.engineer لغو پاسخ

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