در این آموزش , قصد داریم به شما نحوه حذف رنگ تصویر با 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> |
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید.
سلام ودرود
لطفا برای حذف پس زمینه عکس راهنمایی میفرمایید که چطوری میشه همچین امکانی رو در سایت داشته باشیم . به این صورن ک عکس رو اپلود کنیم و خروجی بهمون عکس بدون پس زمینه بده . با تشکر
سلام.
این مورد نیاز به ماژول ImageMagick سمت سرور هست تا با php بتونید این کارو انجام بدید