illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

افکت زوم تصاویر با استفاده از jQuery

5 7228 ۲۶ اسفند ۹۲

به نام خدا

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

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

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

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

روش کلی : ابتدا تگ های img رو داخل divی با کلاس "wrap-img-zoom" قرار میدیم.وقتی روی اون div هاور شد، بزرگنمایی عکس داخلش رو 2 قرار میدیم و مکان موس رو روی اون div به دست میاریم. به اون div استایل : رو میدیم تا عکسی که از اطراف دیو زده بیرون نشون داد نشه.هر وقت که موس روی دیو حرکت کرد ، مکان تصویر رو با توجه به مکان موس تغییر میدیم.

نکته : چون از خاصیت scale سی اس اس استفاده کردیم، پلاگین jquery.transit رو هم به صفحه مون متصل میکنیم تا کارمون آسون تر بشه

HTML:

CSS:

 

jQuery:

توضیح: از خط 1 تا 34 ، ما یک پلاگین برای جی کوئری نوشتیم که در خط 3 اسم اون رو (zoomImg) تعریف کردیم.بعد هم دو متغیر تعریف کردیم که متغیر اولی زمان اجرای انیمیشن ها و دومی مقدار بزرگنمایی عکس رو در خودش نگه میداره.

خط 6 یکی از مهم ترین قسمت هر پلاگین جی کوئری هست که ما گفتیم به تعداد المنت هایی که انتخاب شده است ، کد های داخل متد ()each رو برگردون.

بعد هم در خطوط 7،8،9 سه متغیر تعریف کردیم که مقادیر عرض و ارتفاع المنت انتخاب شده رو میگیره.

در خط 11 تا 13 ما المنت انتخاب شده رو (همون تصویری که میخواهیم روش زوم بشه) داخل یک دیو با کلاس wrap-img-zoom میندازیم و اندازه ی اون دیو رو برابر اندازه ی تصویر قرار میدیم.

اگر اسکریپت ما اجرا بشه، تا اینجا کد های HTML مون بدین صورت خواهد بود :

در خط 15 تا 17 سه تا متغیر تعریف میکنیم که متغیر اولی والد المنت انتخاب شده ( یعنی div.wrap-img-zoom) رو میگیره و متغیر offset رو هم تعریف کردیم تا در پایین تر ازش استفاده کنیم.متغیر $img هم تصویر داخل دیو(div.wrap-img-zoom img) رو میگیره.

حالا میریم سراغ رویداد ها.برای اینکه کارمون ساده بشه و کدمون هم ظاهر بهتری داشته باشه از متد ()on با پارامتر های mouseOver ( یا همون هاور) ، mouseMove( حرکت موس) و mouseLeave (ترک کردن موس) استفاده میکنیم.

در خط 19 گفتیم که وقتی موس روی دیو رفت،بزرگنمایی تصویر داخلش 2 برابر بشه( ما در اینجا با استفاده از پلاگین jquery.transit خاصیت بزرگنمایی رو تغییر دادیم.دقت داشته باشید که وقتی پلاگین jquery.transit استفاده میکنید، میتونید از پارامتر های متد transition ، داخل متد های css و animate نیز استفاده کنید.)

مهم ترین قسمت این کد ، خط 24 تا 26 هست .در خط 24 و 25 ما دو متغیر sTop (مخفف offsetTop)  و sLeft  رو تعریف کردیم که نصف قرینه ی مقدار فاصله ی موس از بالا و پایین دیو  رو میگیرن.

چطوری؟؟! خب باید بگم که e.pageY فاصله موس از بالای صفحه و offset.top ( که همون wrap.offset().top$ هست)، فاصله ی بالای دیو از صفحه رو میگیره  که تفاضل این دو ، مقدار فاصله ی موس از بالای دیو رو به دست میاره.

حالا چرا تقسیم بر دو کردیم؟؟! ما با این کار تصویر رو به یک محور مختصات تبدیل کردیم که تصویر رو (فرضا) به چهار قسمت تقسیم کردیم. یعنی پوزیشن نقطه ی وسط تصویر برابر : میباشد.

چرا قرینه؟؟ اگه مقدار قرینه رو بدست نمیاوردیم چی میشد؟جواب: با بالا رفتن موس ، تصویر بالا میرفت و با چپ و راست رفتن موس ، تصویر نیز به چپ و راست میرفت که این مد نظر ما نیست.

و سوال آخر : چرا ضرب در 1.2 ؟ اگه این کارو نکنیم چی میشه به نظرتون؟؟ جواب : وقتی کاربر موس شو میاره گوشه ی تصویر که در حالت زوم اون گوشه رو ببینه، یهو موس از رو دایو میره کنار و کاربر نمیتونه در حالت زوم کنار تصویر رو ببینه. برای این مقدار به دست آمده را  ضرب در 1.2 میکنیم که یه مقدار تصویر بیشتر به هر طرف بره که راحت بشه گوشه هاشو در حالت زوم دید.

در خط 26 این مقادیر به دست آورده رو با متد animate به عکس میدیم.

وقتی در خط 30 هم گفتیم که وقتی موس ، دیو رو ترک میکنه ، بزرگنمایی تصویر برابر 1 و پوزیشنش هم برابر top:0px و left :0px بشه.یعنی تصویر برگرده به حالت اولش.

در خط 38 هم از این پلاگینی که نوشتیم روی تگ img با دیتای استفاده میکنیم.

خسته نباشید؛ کار تموم شد.حالا دوباره یه نگاه به دمو بندازید و اگه خواستین سورس کد رو هم دانلود کنید.


 

امید وارم این آموزش هم برای شما مفید بوده باشه.

در پناه حق باشید؛ یا علی

 

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 5 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    حامد مودی(۲۸ اسفند ۱۳۹۲)

    واقعاً جالبه

  • ‏‏

    عالی بود.
    در internet explorer وقتی به گوشه چپ تصویر میایم تصویر از کادر خارج میشه

  • ‏‏

    فرق نمی کنه اگه پنجره را کوچک کنید این حالت پیش میاد چه در کروم چه در وب بروس های دیگه

    • ‏‏
      علی امینی(۱۱ فروردین ۱۳۹۳)

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram