آموزش جی کوئری در پانزده روز : روز هفتم

چهارشنبه, ۲۱ام بهمن , ۱۳۸۸ | ۲۲ دیدگاه

سلام، امیدوارم تا کنون که نیمی از جلسات آموزشی رو پشت سر گذاشتیم از مطالب استفاده کرده باشید و به دردتون خورده باشه. خب آموزش امروز رو دوست دارم چون با عکس و انیمشن سرو کله خواهیم زد.

امروز چه کار خواهیم کرد ؟

  1. شفافیت کامل عکس توسط جی کوئری هنگام حرکت موس روی عکس
  2. رنگی کردن عکس توسط جی کوئری هنگام حرکت موس روی عکس

شفافیت کامل عکس توسط جی کوئری هنگام حرکت موس روی عکس :
خب شفافیت کامل عکس از حالت نیمه جان ! کار آسونیه و یاد گرفتنش صرفاً برای قسمت بعدی این آموزش است. خب ابتدا می گردیم دوتا عکس زیبا پیدا می کنیم. برای این کار هزار تا سایت هست ولی سایت مورد علاقۀ من ۱x هست که خودم رو موظف کردم هر روز یه گشتی بین عکساش بزنم. بعد از انتخاب عکس ها بک گراند رو مشکی می کنم. این کار کاملاً سلیقه ایه و اگر سفید یا هر رنگ دیگه ای باشه مشکلی برای آموزش امروز ما پیش نمیاد. امروز هم تمام اسکریپت ها و استایل ها رو در فایل ایندکس خواهم نوشت.

<style>

body
{
	background: black;
	font-size: 12px;
	color: #FFF;
}
#opacity {
	margin-top: 300px;
}
</style>

بعد از مشکی کردن رنگ زمینه و سفید کردن فونت بین تگ body یک تگ Div با Id درست می کنیم. تا عکسی که قرار است fade out یا ظاهر شود رو قرار بدیم.

<div id="opacity">
<p> شفافیت کامل عکس هنگام حرکت موس روی عکس </p>
<img src="b.jpg"/>
</div>

خب ابتدا باید عکس محو باشد که با حرکت موس به حالت اول برگردد پس سراغ کد جی کوئری می رویم :

$(function() {
		$('#opacity img').animate({"opacity": .2 });
});

این کد به این معنیست که روی تگ Img که درون div با Id=opacity عملیاتی انجام بده. ( انیمیشن ) و شفافیت رو بکن ۰٫۲ به همین سادگی. این برای ابتدای کار.
بعد از اون باید کدی بنویسیم که با حرکت موس روی عکس شفافیت به حالت عادی که ۱ است برگردد پس کد بالا را تکمیل می کنیم :

$(function() {
		$('#opacity img').animate({"opacity": .2 });
$('#opacity img').hover(function() {
$(this).stop().animate({ "opacity": 1 });
					}
		});

به این معنی که هنگامیکه موس روی img آمد شفافیت را به ۱ برسان. خب این کافی نیست چون در این حالت اگر موس رو از روی عکس برداریم به حالت نیم جان که ۰٫۲ است برنمی گردد و همینطور شفاف می ماند. پس کد را تکمیل می کنیم :

$(function() {
		$('#opacity img').animate({"opacity": .2 });
$('#opacity img').hover(function() {
$(this).stop().animate({ "opacity": 1 });

, function() {
						(this).stop().animate({ "opacity": .2 );}
});

یعنی دوباره کد را به حالت اول بر می گردونیم و شفافیت به ۰٫۲ میرسد. به همین سادگی.

رنگی کردن عکس توسط جی کوئری هنگام حرکت موس روی عکس :
خب بین تگ body یک تگ Div با Id درست می کنیم. تا عکسی که قرار است از سیاه و سفید به حالت رنگی در بیاد رو بین اون قرار بدیم.

<body>
<div id="fadehover">

      	</div>
</body>

برای این تکنیک ما احتیاج داریم که عکس رو هم به صورت رنگی هم به صورت سیاه و سفید داشته باشیم. من تا کنون هیچ کدی ندیدم که بتونه به صورت اتوماتیک عکس رو به حالت سیاه و سفید در بیاره. پس شیوۀ کار به این صورت است که من دو عکس رو دقیقاً روی هم طوری قرار می دم که عکس سیاه سفید روی عکس زنگی باشه و با تکنیک جی کوئری کاری می کنم که با حرکت موس روی عکس ها ، عکس سیاه سفید محو بشه. به این صورت شما نا خوداگاه عکس رنگی که زیر عکس سیاه و سفید هست رو میبینید.

<div id="fadehover">
<p> رنگی کردن عکس هنگام حرکت موس روی عکس </p>
<img src="a-bw.jpg" class="a-bw" />
<img src="a.jpg" class="a" />
      	</div>

خب ابتدا عکس a هم به صورت سیاه و سفید هم رنگی به صفحه اضافه می کنیم. دقت کنید برای هر عکس از کلاس با نام های مختلف استفاده کردم. برای عکس رنگی کلاسی به نام a و برای عکس سیاه و سفید کلاسی به نام a-bw . حالا وقت اینه که دو عکس رو دقیقاً روی هم بندازیم به این صورت :

img.a  {
	position: absolute;
	left: 5px;
	top: 40px;
 }

  img.a-bw  {
	position: absolute;
	z-index: 10;
	left: 5px;
	top: 40px;
 }

من برای هر دو عکس پوزیشنی ثابت در فاصلۀ ۵ پیکسل از کنار چپ و ۴۰ پیکسل از بالای صفحه انتخاب کردم و برای اینکه عکس سیاه و سفید رو باشد اون رو در بعد z مختصات ۱۰ مرحله جلو آوردم. ببنید برای این کار می تونید عکس رنگی رو ۱۰ مرحله عقب بفرستید و هیچ فرقی نمی کنه به این صورت :

img.a  {
	position: absolute;
	left: 5px;
	top: 40px;
	z-index: -10;

 }

  img.a-bw  {
	position: absolute;
	left: 5px;
	top: 40px;
 }

خب اگر الان صفحه رو ریفرش کنید فقط عکس سیاه و سفید رو میبینید. برای اینکه با حرکت موس عکس سیاه و سفید کاملاً محو بشه از کد جی کوئری استفاده می کنیم :

//Black and White To Colorful
$("img.a-bw").hover(
function() {
$(this).animate({ "opacity": "0" }, "slow");},
function() {
$(this).animate({ "opacity": "1" }, "slow");}
);

این کد دقیقاً مثل کد مرحلۀ پیش است با این تفاوت که به جای ۰٫۲ شفافیت رو به ۰ می رسونیم که کاملاً محو شود.

خب این طولانی ترین آموزش بود. قصد داشتم این دو تکنیک رو در دو جلسه آموزش بدم ولی مطمئنم که شما با کمی سرو کله زدن با توجه به این که کد هارو در اختیارتون قرار می دم متوجه تکنیک ها خواهید شد. خواهش می کنم اگر سئوال یا مشکلی دارید که به این آموزش مربوط هست بپرسید تا با کمال میل جواب بدم.

پستهای مرتبط :

آموزش جی کوئری در پانزده روز : روز ششم

آموزش جی کوئری در پانزده روز : روز پنجم

آموزش جی کوئری در پانزده روز : روز چهارم

آموزش جی کوئری در پانزده روز : روز سوم

آموزش جی کوئری در پانزده روز : روز دوم

آموزش جی کوئری در پانزده روز : روز اول

مقدمه ای بر آموزش jQuery در ۱۵ روز

Be Sociable, Share!


۲۲ دیدگاه


  1. امید
    ۲۳ بهمن ۱۳۸۸

    سلام
    بسیار عالی بود.
    مطالب سایت واقعا آموزنده و کاربردی است.
    موفق باشید




  2. عاطفه
    ۲۳ بهمن ۱۳۸۸

    خیلی ممنون
    یکی از بهترین قسمت ها بود،
    فقط یه مشکل دارم تصویر اول با حرکت موس رنگی نمیشه!




  3. مسیح
    ۲۳ بهمن ۱۳۸۸

    # مرسی امید جان
    # عاطفه : جدی کار نمی کنه ؟ یعنی همین نمایش هم که میبینید کار نمیکنه ؟ من هر نمایش رو با فایرفاکس ، اینترنت اکسپلورر ، سافارس و کروم چک می کنم. همشون کار کرد. شاید به خاطر سرعت پایین اینترنت باشه.




  4. عاطفه
    ۲۴ بهمن ۱۳۸۸

    نه دمویی که گذاشتین برام کار نمی کنه، یعنی با حرکت موس عکس fade میشه نه رنگی!




  5. کامران
    ۲۴ بهمن ۱۳۸۸

    عاطفه جان کار میکنه که برای من؟؟ مشکل از بروزرته احتمالا




  6. بهداد
    ۲۵ بهمن ۱۳۸۸

    کارتون عالی است و جای تشکر بسیار داره….




  7. masoud
    ۲۷ بهمن ۱۳۸۸

    با عرض پوزش
    یکی از مشکلاتم که در آموزش روز پنجم و اونم نشونی فایل جاوا اسکریپ رو فهمیدم اشتباهم کجا بود ولی هنوز نمیدونم چرا حذف از آخر برای من کار نمیکنه

    در ضمن آموزش امروزت هم خیلی داد
    بعدیش رو بذار که بدجور توی کفم




  8. مسیح
    ۲۷ بهمن ۱۳۸۸

    # عاطفه : Alt + F5 رو امتحان کن یه بار
    # کامران : مخلصم رئیس !
    # بهداد : خیلی ممنون . خوبه که استفاده می کنید
    # مسعود : خدا رو شکر که فهمیدی اشتباهت کجاست. هممون یه روز اون اشتباه رو داشتیم فکر کنم … آره از امروز آموزشها بیشتر حال میده …



  9. […] آموزش جی کوئری در پانزده روز : روز هفتم […]



  10. […] آموزش جی کوئری در پانزده روز : روز هفتم […]




  11. امین
    ۳ اسفند ۱۳۸۸

    ممنون.




  12. بهداد
    ۲۳ فروردین ۱۳۸۹

    سلام مسیح عزیز

    ۱ سوال: من می خوام “رنگی کردن عکس هنگام حرکت موس روی عکس” رو روی یه عکسی که تقریبا در وسط صفحه دارم انجام بدم اما با توجه به position: absolute و … عکس در گوشه صفحه قرار میگیره.
    حال چه کنم که این عکس دقیقا در div مربوط به خود که تقریبا در وسط صفحه است قرار بگیره ؟؟




  13. مسيح
    ۱۱ اردیبهشت ۱۳۸۹

    :: پارسه آی تی و سنتری :‌ خوشحالم که با حفظ کپی رایت به اینجا لینک میدید …
    .
    :: امین : خواهش می کنم
    .
    :: بهداد : با عرض شرمندگی که دیر شد. بهداد کافیه یه div درست کنی مثلاً با کلاس wrapper. بعد برای wrapper اینها رو تعریف کن :‌

    .wrap {
    position:relative;
    width:300px;
    margin:0 auto;
    }

    .
    کد رو برات تغییر دادم و آپلود کردم . می تونی از لینک زیر دانلود کنی :
    http://drop.io/0jol19u/asset/1-rar




  14. memol
    ۹ تیر ۱۳۸۹

    سلام با تشکر از آموزش عالی تون
    فقط یه سوال
    چه جوری میشه با همین روش یه منو ساخت؟؟؟ قبلنا تو سایت خود شما دیدم همچین چیزی :دی وقتی موس میره رو منو اون قسمت منو مثلا آبی میشه اطرافش ( کلا تغییر رنگ نمی ده وقط اطرافش رنگش عوض میشه)




  15. memol
    ۱۴ تیر ۱۳۸۹

    دوباره سلام
    یه سوال دیگه هم دارم.
    من تو یه صفحه ای مجبورم به جز فایل jquery….js دو تا فایل js دیگه هم داشته باشم.
    اون دوتا js هم دقیقا برای تگ های img ای هست که می خوام opacity شون رو کم کنم( برای نشون دادن Lightbox هستن). حالا یه مشکل بزرگ پیش می یاد . اینا نمی تونن با هم باشن! یعنی وقتی function تنظیم opacity رو نوشتم نه این اجرا شد نه اونا :دی
    امیدوارم تونسته باشم منظورمو برسونم.




  16. ErTeB
    ۲۲ شهریور ۱۳۸۹

    سلام و عرض خسته نباشید خدمت دوستان محترم .. این آموزش جی کوئری در سک صفحه اون هم HTML هست .. اما من از شما می خوام بپرسم که آیا میشه جی همین تکنیک تصویر سیاه سفید را رنگی کردن در صفحات PHP و یا حتی پورتال هایی مثل Wp ..استفاده کرد .. ؟!؟! چگونه ؟!

    و اما اگر میشود برای تک به تک عکس ها باید همچین روندی رو اجرا کرد ؟!

    متشکر میشم اگر پاسخ دهید ..




  17. حسن موحد
    ۵ آبان ۱۳۸۹

    بسیار زیبا بوود . متشکر از آموزشتون




  18. رضا
    ۱۹ دی ۱۳۸۹

    با عرض سلام و خدا قوت
    آقا عالی بود




  19. شاهین
    ۲۲ مرداد ۱۳۹۰

    سلام و با تشکر از مطالب خوبتون
    اقا این اموزش تا روز جند پیش رفته
    من نمیتونم روز دهم رو بیارم




  20. تهمینه
    ۱۹ مهر ۱۳۹۰

    عالی بود – عالیه عالی
    کلی تواینترنت دنبال یه همچین چیز جالبی میگشتم که راحت بتونه کمکم کنه
    ممنون ازتون




  21. تازه کار
    ۲۱ بهمن ۱۳۹۰

    استاد گرامی خیلی عالیه
    تا اینجاش که برام خوب و مفید بوده براتون آرزوی سلامت و موفقیت دارم




  22. mohammad
    ۴ فروردین ۱۳۹۱

    سلام مسیح جان .
    بابت آموزش های جی کوئری ازت ممنونم . خیلی وقت بود که دنبال همچین آموزشی بودم .
    من در کدهای بالا ، مشکلی دارم که اگر برام بازش کنی ، ممنون میشم :
    این کد برام اصلا کار نمیکنه و دلیلش هم برام گنگه چون در همه حالت ها تست زدم :

    $(function() {
    $(‘#opacity img’).animate({“opacity”: .2 });
    $(‘#opacity img’).hover(function() {
    $(this).stop().animate({ “opacity”: 1 });

    , function() {
    (this).stop().animate({ “opacity”: .2 );}
    });

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

    ممنون میشم اگر راهنماییم کنی .



دیدگاه خود را بنویسید