در این آموزش , قصد داریم به شما نحوه حذف رنگ تصویر با jQuery با بردن اشاره گر ماوس (hover) بر روی تصویر را نشان بدیم. در آموزش قبلی , نحوه ساخت افکت انیمیشنی fade in / fade out را توسط جی کوئری را دیدیم.
ما انیمیشن تصویر پشت زمینه را توسط سلکتور کلاس در CSS مدیریت می کنیم. توسط جی کوئری ما کلاس مورد نظر را با رویداد mouseover و mouseout به تصویر اضافه/حذف می کنیم.
کد HTML نمایش تصاویر
تگ های 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 برای حذف رنگ تصاویر
این دو تابع 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> |
و استایل های CSS :
|
1 2 3 |
<style> .grey-scale{-webkit-filter: grayscale(100%); filter: grayscale(100%);} </style> |
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید.
