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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!
4 5607 ۲۰ آبان ۹۳ محمد اسفندیاری

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

این کد در مرورگرهای جدید پشتیبانی میشه و در Internet Explorer 9+ هم پشتیبانی میشه.

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

برای شروع میتونین به صفحه مورد نظر در سایت Github برید و فایل مورد نظر رو دانلود کنید. در این مطلب ما فقط به فایل zoom.js نیاز داریم ، که من برای راحتی شما اونو در انتهای همین مطلب قرار دادم که میتونین اونو دانلود کنید و از اون استفاده کنید.

نحوه استفاده :

برای شروع یک فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

تا اینجا فقط کدهای HTML و CSS رو قرار دادیم و به وسیله ی اونا سه تا DIV ساختیم و جاهاشون رو مشخص کردیم. در انتها هم فایل zoom.js رو به سندمون اضافه کردیم و در انتها هم یک تگ باز و بسته ی Script قرار دادیم که بتونیم کدهای مورد نظر خودمونو درون اونا بنویسیم.

ابتدا باید با استفاده از Javascript عناصر مورد نظر در DOM رو به یک متغیر نسبت بدین ، تا بتونیم به اونا دسترسی داشته باشیم. کدهای زیر رو در نظر بگیرین :

در اینجا ما سه تا متغیر بنامهای One و Two و Three تعریف کردیم و به عناصر مربوطه دسترسی پیدا کردیم. حالا دیگه بستگی به ما داره که چه زمانی میخوایم Zoom کنیم. فرض کنیم میخوایم کاری کنیم که ، زمانی که کاربر بر روی عنصر مورد نظر کلیک کرد ، zoom اتفاق بیوفته. برای این کار باید با استفاده از Javascript و رویداد click این کارو انجام بدین. کد زیر رو در نظر بگیرین :

خب در بالا رویداد Onclick رو مشخص کردیم و حالا باید کدهای مورد نظر خودمونو درون اون قرار بدیم.

برای زوم کردن بر روی عنصر خاصی باید از عبارت zoom.to() استفاده کنید. کد زیر رو در نظر بگیرین :

خب با توجه به توضیجات بالا ، فرض کنید من میخوام کاری کنم که ، زمانی که بر روی one کلیک کردم ، بر روی عنصر one زوم کنه. کدش بصورت زیر خواهد بود :

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

همچنین میتونین بر روی نقطه ی خاصی از صفحه هم زوم کنید. کد زیر رو در نظر بگیرین :

اگر از این کد استفاده کنیم ، بزرگنمایی بر روی نقطه ی 100 و 200 انجام میشه و عرض و ارتفاع ، بترتیب برابر با 300 و 300 هستند.

برای مطالعه بشتر میتونین به این لینک برید.

خب دوستان امیدوارم بدردتون بخوره.

موفق باشید. یا علی

نوع کد رايگان

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

  • ‏‏
    مهران صنایعی(۵ بهمن ۱۳۹۳)

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

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram