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

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

افکتی که امروز یاد خواهیم گرفت بسیار کاربردی و مورد استفاده است. در بسیاری از سایت ها دیدید که هنگام حرکت موس عکسی کنار می رود و نوشته یا عکس زیر آن نمایان می شود. البته من در آموزش امروز ازطرح های قدیمیه خودم استفاده کردم تا روز ولنتاین یا به عبارت درست والنتین رو با جی کوئری ترکیب کنم ! و به این نحو روز عشاق رو به همۀ عاشقان 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 می نوسم اکثراً. و در نهایت سرعت رفتن عکس رو ۱ ثانیه یا ۱۰۰۰ میلی ثانیه و سرعت برگشت عکس رو ۰٫۸ ثانیه تنظیم کردم.
* اگر آموزش روز هفتم رو متوجه شده باشید قسمت دوم که برگشت عکس هست احتیاج به توضیح ندارد فقط باید دقت کنید که برای left از منفی ۳۰۰ استفاده نکنید و عکس باید به جای اول خودش یعنی ۰ بازگردد.

پیشنهاد سر آشپز :
فکر می کنم تعداد زیادی از کسانیکه به ITT سر می زنند از فایرفاکس عزیز استفاده می کنند در این صورت معرفی افزونه یا پلاگین Firebug خالی از لطف نیست. برای کسانیکه احتمالاً تا کنون کار با این افزونه رو تجربه نکردن میگم که با استفاده از یکی از ویژگی های این افزونه به صورت آنی می تونید مقادیر css و تگ ها رو عوض کنید و نتیجه رو همون لحظه ببینید. این کار خیلی به یادگیری من کمک کرد. اصلاً نگران پیچیدگی این افزونه هم نباشید چون کار با اون بسیار راحته. این افزونه رو از اینجا روی فایرفاکس نصب کنید و همین الان تغییرات رو روی نمایش آموزش امروز شروع کنید.

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

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

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

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

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

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

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

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

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

Be Sociable, Share!


۱۵ دیدگاه


  1. mort3za
    ۲۹ بهمن ۱۳۸۸

    همچنان دنبال می‌کنیــــــــــــــــم
    مسیح جان تشکر

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




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

    خیلی خوبه که قالب میسازی چون inove عین ۶۶۰۰ نوکیا شده ! تو هم دانشت حتماً در حد ساختن قالب wp هست. چون ۲ تا قالب از صفر ساختم یه مقدار تجربه دارم ، اگر سوالی داشتی تو سایتم ازم بپرس کمکت می کنم




  3. امیر
    ۱ اسفند ۱۳۸۸

    با این fire Bug خیلی موافقم ……
    به دوستانی که در زمینه طراحی و برنامه نویسی وب کار می کنند پیشنهاد میکنم حتما از این افزونه استفاده کنند.

    ممنون سر آشپز ، امید وارم غذا هات مثل آموزشت نباشه …..
    شوخی کردم ، بابت آموزش های خوبت ممنون و مو فق باشی 😉




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

    من هم همچنان دنبال می نمایم. ممنون.




  5. امید
    ۴ اسفند ۱۳۸۸

    سلام
    سوالی دارم
    در سایت : http://www.injaonja.com در ستون سمت چپ آن وقتی روی عکس دوم کلیک می کنیم متن آن بسرعت قابل مشاهده می شود.
    در صفحه اصلی نیز از این نوع نمایش ها استفاده شده است.
    برای ایجاد موارد مشابه این دو حالت چه باید کرد؟
    متشکرم




  6. مسیح
    ۶ اسفند ۱۳۸۸

    # امیر : ارادت تام دارم !
    # امین : خیلی کار خوبی می کنید. من که پایم .
    # امید : آموزش روز ششم رو خوندید ؟ بخونید بازم اگر مشکلی بود اونجا بپرسید جواب میدم




  7. سینا
    ۱۳ اسفند ۱۳۸۸

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

    ادرس : http://mystack.zxq.net




  8. سینا
    ۱۳ اسفند ۱۳۸۸

    برای منوهاش از آموزش های جی کویری استفاده کردم ….




  9. milad
    ۲۲ فروردین ۱۳۸۹

    سلام اول ازهمه به خاطر این فایل آموزشی خوب ازشما تشکرمیکنم وبهتون خسته نباشید میگم.
    می خواستم خواهش کنم اگر امکان داره راجع به افکتهای Cssهم توضیح بدید.




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

    :: سینا :‌ فکر می کنم یه مقدار دیر دارم نظرت رو می خونم و واقعاً شرمندم. خیلی دوست دارم منو ها و پوستت رو ببینم. اگر اینجا رو خوندی حتماً بهم pm بده . id : masih32

    :: میلاد : اگر منظورت افکت هاییه که میشه با جی کوئری به css و ظاهر المان ها داد فکر می کنم جلست قبل توضیح دادیم. اگر سئوالی داری بپرس کمکت می کنم




  11. محمد
    ۳ بهمن ۱۳۸۹

    سلام.با تشکر فراوان به خاطر زحماتتون ییخشید ۶ روز بعدی ادامش کجاست؟




  12. سوران
    ۲۰ فروردین ۱۳۹۰

    سلام دوست گرامی
    خسته نباشید و خدا قوت. من خیلی به سایت شما سر میزنم و از مطالب خوبتون هم استفاده میکنم. برای این بخش هم پیشنهاد میکنم که کل مطالب مربوط به جی کویری رو یکجا به صورت pdf منتشر کنید که قابل استفاده تر باشد.
    دو تا انتقاد هم بکنم:
    ۱-مدتی است که مطالب جدید کمتر شده
    ۲-این بخش جی کویری قرار بود ۱۵ جلسه باشه ولی بیشتر از ۸ جلسه نیست

    بازم از سایت خوبتان کمال تشکر را دارم




  13. مینا
    ۱۲ اردیبهشت ۱۳۹۰

    دوستان عزیز
    برای دیدن ادامه آموزش میتونین به سایت زیر برین
    البته همین آموزش است ولی به زبان اصلی(انگلیسی)
    موفق باشین
    http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/




  14. رضا
    ۲۸ مرداد ۱۳۹۰

    توی گوگل کروم همین پیشنهاد سرآشپز با f12 امکان پذیر هست و خیلی هم جالبتره، حتما امتحانش کنید.




  15. noora
    ۲۸ آبان ۱۳۹۰

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



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