zoom : بزرگنمایی عناصر در صفحه

- visibility ۴ mode_comment

در این مطلب میخوام کدی رو براتون توضیح بدم که با استفاده از اون میتونین بر روی نقطه ی خاصی از صفحه یا عنصر مشخصی 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 هستند.

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

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

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

comment دیدگاه کاربران
Mr.Shahabi

عالی بود

محمد اسفندیاری

موفق باشید

مهران صنایعی

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

محمد اسفندیاری

موفق باشید دوست عزیز

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.