ترفندهای پیشرفته jQuery (قسمت 57)

- visibility ۰ mode_comment

در این قسمت با ادامه ترفندهای پیشرفته jQuery در خدمت شما هستیم. jquery trickshot

موضوع پنجم : استفاده از پلاگینها

ترفند 96 : تکان دادن المنتها با jRumble

jRumble یک پلاگین سبک و کم حجم هست که نمیشه اون رو پلاگین خیلی مهم و اساسی دونست ولی کار کردن با اون جالب و جذابه.

در ابتدا باید این ابزار رو include کنید:

در ابتدا اون div که میخایم حرکت بدیم رو قرار بدیم:

حالا برای اینکه از این ابزار استفاده کنید بروش زیر عمل میکنیم:

برای اینکه شروع بکار کنه باید بصورت زیر عمل کنید:

برای متوقف کردن هم بصورت زیر عمل میکنیم:

ویژگی های مختلفی وجود داره که میتونین اونا رو قرار بدین:

  • x : محدوده تکان خوردن در جهت افقی رو مشخص میکنیم. مقدار پیش فرض 2 پیکسل هست
  • y : محدوده تکان خوردن در جهت عمودی رو مشخص میکنیم. مقدار پیش فرض 2 پیکسل هست
  • rotation : محدوده چرخش که بر حسب درجه. مقدار پیش فرض 1 درجه هست
  • speed : میتونین با استفاده از این خصوصیت سرعت تکان خوردن رو مشخص کنید. هر چه این عدد کمتر باشه ، سریعتر تکون میخوره. مقدار پیش فرض این خصوصیت 15 هست.
  • opacity : با true کردن این ویژگی میتونین کاری کنید که opacity المنت تغییر بکنه.
  • opacityMin : با استفاده از این خصوصیت میتونین کمترین میزان opacity رو مشخص کنید

مثلا کد بالا باعث میشه که در جهت افقی و عمودی 10 پیکسل تکون بخوره و بصورت شعاعی هم 4 درجه میچرخه.

مثلا فرض کنید میخایم با هاور کردن بر روی المنت تکون خوردن شروع بشه و با خارج شدن از حالت هاور متوقف بشه.

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

اینم یک مثال دیگه:

خروجی:jrumble

امیدوارم از این مطلب خوشتون اومده باشه.

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

یا علی

Source

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

نیاز به لاگین

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