یک افکت ساده و زیبای جی کوئری برای تصاویر

سلام

من خیلی وقته پست جدید ندادم و مطالبم بعد از سری آموزشهای طراحی وردپرس دیگه بسیار کم شدند و ۲ دلیل بیشتر نداره!

اول اینکه هرچی میخوام بنویسم یا ترجمه کنم یک نفر از دوستان وبلاگنویس بهتر و کاملتر از من به اون موضوع میپردازن و دوم اینکه بسیار کم وقت دارم برای نوشتن توی وبلاگ! به هر حال امروز یه مطلب آموزشی جی کوئری مینویسم که خیلی دوستش دارم و توی آخرین طرحی که برای یکی از دوستان انجام گرفت ازش استفاده کردم(تقریبن!) برای استفاده از جی کوئری لازم نیست که بگم باید از سایت jQuery.com آخرین ورژن این کتابخانه ی فوق العاده رو دانلود کنید و باز هم لازم نیست که بگم باید این فایل js رو در صفحه وبتون باید وارد کنید(که همه ی اینها در دموی انتهای مطلب انجام شده و به راحتی میتونید تقلب کنید!)

ما میخواهیم یک کار ساده اما زیبا کنیم و اون اینه که یک عکس رو تبدیل کنیم به یک عکس دیگه (با حرکت اشاره گر موس به روی تصویر) برای این کار میتونیم از css و خاصیت background و با استفاده از یک hover ساده انجام بدیم اما ما میخواهیم که این تبدیل به صورت آرام و به قول اجنبی ها fade و animated باشه! خوب همونطور که گفتم اول جی کوئری رو وارد میکنیم:

 

<script type=’text/javascript’ src=’http://yoursite.com/jquery.js’></script>

 

توی این کد فرض شده که فایل جی کوئری در پوشه ی اصلی سایت آپلود شده مثل تمام زمان هایی که میخواهیم از جی کوئری استفاده کنیم باید یک یا چند تابع هم داشته باشیم:

<script>

$(document).ready(function(){

    $("img.a").hover( function() {

         $(this).stop().animate({"opacity": "0"}, "slow");

         }, function() {

         $(this).stop().animate({"opacity": "1"}, "slow");

    });

});

</script>

و استایل (سی اس اس) هم:

 

<style>

   div.fadehover { position: relative; }

   img.a { position: absolute; left: 0; top: 0; z-index: 10; } 

   img.b { position: absolute; left: 0; top: 0; }

</style>

 

و این هم کد اصلی صفحه ( کد html )

 

<div class=”fadehover”>

      <img src=”cbavota-bw.jpg” alt=”” class=”a” />

      <img src=”cbavota.jpg” alt=”” class=”b” />

</div>

 

توضیحات واضحات!

یک سری توضیحات کوچیک اما کلیدی میدم بقیش رو خودتون بفهمین دیگه!

در کد اول (تابع جی کوئری) به خط سوم دقت کنید:

 

$(“img.a”).hover()

 

ما اینجا تگ img رو که class اون a هست هدف قرار دادیم  و opacity هم شفافیت هست که عددی بین ۰ و ۱ میتونه باشه slow هم در زبان انگلیسی به معنای آرام میباشد!! یعنی آروم fade میشه!

استایل هم نیاز به توضیح نداره(حتمن توی سری آموزش طراحی وردپرس یاد گرفتین یه چیزایی)

در کد آخر( html) هم ما دوتا عکس _که آدرسشون رو باید دقت کنین درست وارد کنید_ قرار دادیم که در صفحه اصلیمون قرار بگیرن

برای دریافت دمو روی لینک زیر کلیک کنید

jQuery fade effect demo (2704 دانلود ها)

منبع،تقریبن!:bavotasan.com

‏25 دیدگاه برای ”یک افکت ساده و زیبای جی کوئری برای تصاویر

      1. مثلن
        تقریبن
        واقعن
        نمره املات تو دبستان چند بود؟
        اینا چیه نوشتی ؟
        درستش ایناست پسرم یاد بگیر :
        مثلا
        تقریبا
        واقعا
        یکی هزار بار از روشون بنویس تا یاد بگیر. بازم بود البته دیگه نگفتم :دی

  1. حالا این هیچی، اما در مورد «فشن» باید بگم برات که این فشن حاصل کار بهره‌کشایی هست که یکی از صفاتشون این کلمست: «خشن»!

  2. سلام من دوست دارم یاد بگیرم دارم از اول شروع می کنم
    شاید تا وقتی که کامل، به قولی قشنگ، در حد ِ بنز! یاد بگیرم نیاز به کمک پیدا کنم:D
    خیلی خوبه آموزش ها
    ۲۰

  3. راستی نمی دونم چرا ورد پرس ورژن نیو که این جا گذاشتین دان لود نمی شود!؟
    اگه از سایت انگلیش ِ ورد پرس دانلودش کنم فرقی نمی کنه؟
    آخه اون خیلی سریع دانلود شد، متعجب شدم که متفاوت بوده باشه

  4. سیاوش دنبال animal farm هستی؟! «قلعه حیوانات خودمون دیگه؟! «جورج اورول»؟
    یا اینکه کتاب دیگه‌ای هست؟

    1. بله این همون قلعه حیوانات خودتونه! و من انگلیسیش رو گرفتم اما صفحه ی اول رو که خوندم پشیمون شدم! الان فارسیش رو باید بخرم، یا شایدم الان ای بوکشو دانلود کنم :دی آره الان دانلودش میکنم!!

      1. فوق العادست!
        البته بعد ممکن بخاطر جریان‌های بعد از انتخابات یک مقدار در تحلیلش به خطا بری اما بازهم ایراد نداره.
        بعدش حتما «۱۹۸۴» جورج اورول رو هم بخون.

  5. برای خرید کتاب برو اینجا
    http://www.adinebook.com/gp/search/707-2029062-5361550?search-alias=books&field-keywords=%D9%82%D9%84%D8%B9%D9%87+%D8%AD%D9%8A%D9%88%D8%A7%D9%86%D8%A7%D8%AA&Go.x=0&Go.y=0&Go=Go
    فقط یادت باشه ترجمه امیرشاهی رو بگیری

    برای خرید کارتونش برو اینجا
    http://shop.iranget.com/?p=105

    برای دانلودش هم برو اینجا
    http://www.4shared.com/file/27613366/928b622f/_737_.html

    1. خیلی ممنون، واقعن بعضی وقتها که نا امید میشم از این وبلاگ و به بیهوده بودنش فکر میکنم یاد شما و دوستان دیگه میافتم و دوباره جون میگیرم! یه دنیا ممنون، خیلی ارزش داره برام اینکه برام وقت گذاشتین و زحمت کشیدین، ممنون علی جان، موفق باشی

      1. اگه تو اینارو بگی من و امثال من که مدیونتیم تو یاد گرفتن وردپرس باید چی بگیم؟
        برادر من همین پرگاری که الان درست کردم از صدقه سر تو هستشا.
        اگه نبودی که معلوم نبود الان برا همین وبلاگم چقدر پیاده شده بودم.
        شایدم هنوز مجبور بودم عین خرچنگ ایستاتیک کار کنم!!!!
        خیلی آقایی.
        اینم وظیفمونه داداش.

پاسخ دادن به علي ناطقي لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد.