افکت Flip عکس با جی کوئری
194 بازدید
در این آموزش , قصد داریم به شما نحوه حذف رنگ تصویر با jQuery با بردن اشاره گر ماوس (hover) بر روی تصویر را نشان بدیم. در آموزش قبلی , نحوه ساخت افکت انیمیشنی fade in / fade out را توسط جی کوئری را دیدیم.
ما انیمیشن تصویر پشت زمینه را توسط سلکتور کلاس در CSS مدیریت می کنیم. توسط جی کوئری ما کلاس مورد نظر را با رویداد mouseover و mouseout به تصویر اضافه/حذف می کنیم.
تگ های img زیر برای افزودن افکت حذف رنگ تصویر با jQuery قرار داده شده اند.
|
1 2 3 |
<img src="fading-photo.png" onMouseOver="show_grey(this)" onMouseOut="show_original(this)" /> <img src="fading-photo1.png" onMouseOver="show_grey(this)" onMouseOut="show_original(this)" /> <img src="fading-photo2.png" onMouseOver="show_grey(this)" onMouseOut="show_original(this)" /> |
این دو تابع jQuery برای افزودن/حذف استایل های CSS به منظور ایجاد افکت های سیاه و سفید بر روی تصویر استفاده می شود.
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> function show_grey(obj) { $(obj).addClass("grey-scale"); } function show_original(obj) { $(obj).removeClass("grey-scale"); } </script> |
|
1 2 3 |
<style> .grey-scale{-webkit-filter: grayscale(100%); filter: grayscale(100%);} </style> |
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید.
دیدگاه کاربران