keyboard_return  چسبون مقالات آموزشی آموزش حذف رنگ تصاویر با جی کوئری
  1. آموزش حذف رنگ تصاویر با جی کوئری

چطور افکت Grayscale روی عکس ها اعمال کنیم

با سلام خدمت شما دوستان عزیز. در این مطلب  قصد داریم نحوه حذف رنگ تصاویر با جی کوئری را آموزش دهیم. در این آموزش می خواهیم زمانیکه که کاربر ماوس را روی یک تصویر نگه داشت (HOVER) تصویر به صورت سیاه و سفید نمایش داده شود.

برای درک بهتر این آموزش نیاز به دانستن مفاهیم مقدماتی HTML و CSS دارید. در صورت نیاز می توانید آموزش قدم به قدم html از مبتدی تا پیشرفته و آموزش گام به گام جی کوئری را مطالعه فرمایید. هنگامی که رویداد HOVER فراخوانی می شود با استفاده از متدهای CSS می خواهیم رنگ تصاویر را به صورت grayscale نمایش داده شود. در واقع در این آموزش خواهید دید چطور به کمک جی کوئری هنگام hover شدن یک عنصر متدهای css را به عنصر نسبت می دهیم.

jQuery-GrayScale-Image-Effect

ابتدا یک تگ img جهت نمایش تصویر مورد نظر اضافه می کنیم:

<img class="image" src="test.jpg">

شما می توانید هر تعداد تصویر به دلخواه خود اضافه کنید. سپس کد های جی کوئری مورد نظر جهت تشخیص اینکه آیا ماوس روی تصویر مورد نظر قرار گرفته یا خیر اضافه می کنیم. با استفاده از متد mouseenter در جی کوئری می توانیم تشخیص دهیم که آیا ماوس روی عنصر مورد نظر قرار دارد و در صورتیکه نشانگر ماوس روی عنصر قرار گیرد دستورات داخل این تابع اجرا خواهند شد. متد mouseleave نیز زمانیکه نشانگر ماوس از روی عنصر خارج شود فراخوانی شده و دستورات داخل آن اجرا خواهد شد.

<script type="text/javascript">
	$(document).ready(function(){
		$(".img").mouseover(function(){
			$(this).css('filter', 'grayscale(100%)');
		});
		$(".img").mouseleave(function(){
			$(this).css('filter', 'grayscale(0%)');
		});
		
	});
</script>

نمونه کد این آموزش در زیر آورده شده که می توانید آن را بصورت آنلاین اجرا و مشاهده نمایید.

<!DOCTYPE html>
<html>
<head>
	<title>چسبون| آموزشگاه آنلاین برنامه نویسی</title>
	<meta charset="utf-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<img class="img" src="/photos/shares/1396/07/jQuery-GrayScale-Effect.gif" alt="image Alt">

<script type="text/javascript">
	$(document).ready(function(){
		$(".img").mouseover(function(){
			$(this).css('filter', 'grayscale(100%)');
		});
		$(".img").mouseleave(function(){
			$(this).css('filter', 'grayscale(0%)');
		});
		
	});
</script>
</body>
</html>

امیدوارم این آموزش مورد توجه شما واقع شده باشد. لطفا نظرات و پیشنهادات خود را با ما در میان بگذارید.

 

آموزش حذف رنگ تصاویر با جی کوئری - 4.2 از 5 بر اساس 150 رای

امتیاز کاربران

آموزش حذف رنگ تصاویر با جی کوئری
دیدگاه‌ها

دیدگاهی وجود ندارد

2024 © Copyright کليه حقوق مادی و معنوی براي چسبون محفوظ است و هرگونه کپی برداری پیگرد قانونی دارد.