پاسخ به:آموزش jquery از ابتدا
جمعه 4 اسفند 1391 9:09 PM
افکتی که امروز یاد خواهیم گرفت بسیار کاربردی و مورد استفاده است. در بسیاری از سایت ها دیدید که هنگام حرکت موس عکسی کنار می رود و نوشته یا عکس زیر آن نمایان می شود. البته من در آموزش امروز ازطرح های قدیمیه خودم استفاده کردم تا روز ولنتاین یا به عبارت درست والنتین رو با جی کوئری ترکیب کنم ! و به این نحو روز عشاق رو به همۀ عاشقان ITT تبریک بگم. کاری که قرار است انجام بدیم به این صورت است که دو عکس رو دقیقاً روی هم قرار می دهیم و با استفاده از جی کوئری کاری می کنیم که عکسی که رو قرار دادیم به طرف راست حرکت کند. البته معمولاً در سایتها عکس به سمت پایین حرکت می کند که به آن هم به صورت زیر انجام می شود. برای این کار ابتدا عکس ها رو مطابق کد زیر بین تگی با class به نام wrap قرار می دهیم.
<body>
<div class="wrap">
<img src="01.jpg" alt="image" />
<img src="02.png" class="front" alt="image" />
</div>
</body>
خب میبینید که فقط برای عکسی که رو قرار دارد class تعریف کردم چون با عکس زیری اصلاً کاری نداریم. حالا باید سراغ css و ویرایش ظاهری عکس ها بریم که در این آموزش خیلی مهم هست.
<style type="text/css">
body {
background-color:#000;
}
.wrap {
width: 340px;
height: 610px;
position: relative;
overflow: hidden;
float: right;
}
img {
position: absolute;
top: 0;
left: 0;
}
</style>
ابتدا رنگ صفحه رو مشکی کردیم. برای wrap اندازۀ طول و عرض عکسمون رو مشخص می کنیم و position رو به حالت relative قرار می دیم تا بتونیم عکس رو با استفاده از float در گوشۀ راست صفحه قرار بدیم. مهمترین بخش overflow هست. این خاصیت برای اتفاقات و ظواهریست که بیرون از کادری که تعریف کردیم اتفاق می افتد. مثلاً الان که من مقدار hidden رو تعریف کردم یعنی اگر عکس از طول ۳۴۰px و ارتفاع ۶۱۰px خارج شد آن را نشان نده ! برای img هم position رو به صورت absolute قرار دادم تا عکس ها دقیقاً روی هم بیافتند.
دقت کنید اگر مقادیر position و overflow رو پاک کنید خواهید دید که عکس ها به چه حالتی در خواهند آمد. پیشنهاد می کنم حتماً با پاک کردن و اضافه کردن مقادیر مختلف و دیدن نتیجه درک خودتون رو از المان های سازندۀ صفحات وب بیشتر کنید برای سهولت این کار حتماً پیشنهاد سر آشپز ، آخر همین آموزش رو مطالعه کنید.
الان ما دو عکس داریم که روی هم قرار گرفته اند و باید سراغ کد جی کوئری بریم تا با حرکت موس عکس رویی رو به مقدار ۳۴۰px به طرف راست حرکت بدیم. من ابتدا کد رو می نویسم سپس به تفکیک توضیح میدم :
<script type="text/javascript">
$(function() {
$('.wrap').hover(function() {
$(this).children('.front').stop().animate({ "left" : '340px'}, 1000);
}, function() {
$(this).children('.front').stop().animate({ "left" : '0'}, 800);
});
});
</script>
توضیح کد :
* hover : وقتی صحبت از حرکت موس روی عکس میشه از خاصیت hover استفاده می کنیم و چون حرکت عکس روی wrap مد نظرمون هست کد را به صورت بالا شروع می کنیم.
* this : در آموزش های گذشته توضیح دادیم و حتماً می دانید که اینجا برای صدا زدن .wrap از آن استفاده کردیم.
* children : در جی کوئری این کد به معنای پیدا کردن هست. حتی شما می تونید به جای children از find هم استفاده کنید یعنی شما می خواهیم تگی که class با نام front دارد پیدا کنید و بقیۀ کد ها رو برای اون انجام بدید. ( کد children و find تفاوت کوچیکی داره که در آموزش های بعدی توضیح خواهم داد. )
* stop : کافیه شما stop رو پاک کنید و ببینید چه بلایی سر افکت میاد ! با این حال توضیحش خالی از لطف نیست. با بکار بردن stop می گوییم عکسی که در حال حرکت است در هر جایی که هست باستد و دستورات بعدی انجام شود. اگر از Stop استفاده نکنیم و موس رو با سرعت چندین بار روی عکس ببریم خواهیم دید که عکس مدام رفت و آمد می کند و تمام حرکات را تا انتها انجام میدهد. ( در آموزش جلسۀ هفتم از stop استفاده نکردیم، می توانید برای مثال نمایش روز هفتم را ببینید )
* animate : چون قرار است عکس حرکت کند از animate استفاده می کنیم که قبلاً آشنا شدید. فقط دقت کنید که ما قصد داریم عکس رو به راست بفرستیم پس می گوییم از left به اندازۀ ۳۴۰ پیکسل به راست برو ! این اشتباه رایجیه که خودم زیاد تکرار می کنم و به اشتباه right می نوسم اکثراً. و در نهایت سرعت رفتن عکس رو ۱ ثانیه یا ۱۰۰۰ میلی ثانیه و سرعت برگشت عکس رو ۰٫۸ ثانیه تنظیم کردم.