img

با کلیک کردن، به قسمت‌های مختلف یک تصویر بروید…

/
/
/

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

گام ۱- قالب سند را ایجاد کنید
اولین گام برای این کار، ایجاد کردن یک سند مبنای HTML است. این مرحله شامل اعلان HTML، کامل کردن بدنه‌ی HTML و سرصفحه آن می‌باشد. قسمت سرصفحه (head) برای قرار دادن منابع خارجی مانند JavaScript و CSS استفاده می‌شود، در حالی که قسمت بدنه (body) از این صفحه برای قرار دادن محتوای قابل مشاهده صفحه شما استفاده خواهد شد.

گام ۲- محتوای صفحه را بنویسید
محتوای صفحه متشکل از مکان‌یابی (navigation) و نقشه قابل مشاهده (visible map) است-این قسمت هم دارای نقاطی مکانی است که می-توان به آنها رفت. هر یک از این نقاط مکان‌یابی دارای یک ID مختص خود برای استایل‌های مراحل بعدی هستند. همه این اطلاعات در یک محفظه‌ی مقاله‌ای شکل قرار داده شده‌اند تا در صورت نیاز بتوانید بر روی نقشه حرکت کنید و تغییر مکان دهید، به همین ترتیب هم می‌توانید قسمت‌هایی که از نقشه سرریز کرده‌اند و در کادر شما نیستند، را مشاهده نمایید.

<article>
<nav>
<span data-action=»previous»>previous</span>
<span data-action=»next»>Next</span>
</nav>
<main>
<span id=»pointA»></span>
<span id=»pointB»></span>
<span id=»pointC»></span>
<span id=»pointD»></span>
</main>
</article>

 

گام ۳- شکل‌دهی به وسیله CSS را شروع کنید
یک فایل جدید با نام ‘styles.css’ ایجاد کنید. ما این قسمت را با این فرض شروع می‌کنیم که شما قسمت‌های بدنه، سرصفحه و مقاله‌ی مربوط به HTML را به صورت کامل تنظیم کرده‌اید و همه این محتویات با ارتفاع و عرض مناسبی در صفحه نمایش شما قرار داده شده‌اند. به علاوه، تگ مربوط به مقاله (article) این خاصیت را دارد که ویژگی سرریز کردن آن را بر روی مخفی (hidden) قرار دهیم، که این کار ما را قادر می‌کند بدون نیاز به ایجاد تداخل با محتویات بیرونی این محفظه، از محتوای این محفظه تنها با جابه‌جا کردن ماوس خود استفاده کنیم.

گام ۴- نقشه را تعریف کنید
نقشه‌ی قابل مشاهده با استفاده از محفظه‌ای با تگ <main> در داخل article ایجاد می‌شود. اندازه این نقشه چهار برابر اندازه‌ی محفظه‌ی <article> است و دارای پس‌زمینه‌ی تصویری است که به صورت تمام صفحه تنظیم شده است. اگر شما اثر جابه‌جا شدن به وسیله‌ی scroll کردن را فعال نمایید، می‌توانید به مکان‌های نسبی موردنظر خود در این نقشه حرکت کنید.

article main{
display: block;
position: relative;
background: url(https://static.panoramio.
com.storage.googleapis.com/
photos/1920×1280/109682967.jpg);
background-size: cover;
width: 400%;
height: 400%;
top: 0;
left: 0;
transition: all 1s;
}

گام ۵- مکان‌های نقشه را تنظیم کنید
در سطح اول این کار، مولفه‌هایی که درون محفظه‌ی <article> <main> قرار می‌گیرند، تبدیل به اشکالی می‌شوند که می‌توان بر روی آنها حرکت کرد. ما می‌توانیم انتخاب کنیم که این اشکال قابل مشاهده یا مخفی باشند- البته اگر این اشکال وجود داشته باشند. ما آنها را قابل‌مشاهده و به صورت بلوک‌های قرمز تنظیم می‌کنیم. تک تک مکان‌ها را می‌توان بعدها و با استفاده از ID آنها در هر جای صفحه به صورت دلخواه قرار داد.
گام ۶- مکان‌یابی موقعیت‌ها
مکان‌یابی (navigation) که در داخل محفظه کدهای article قرار دارد، در بالای سمت چپ صفحه با موقعیت ثابت قرار داده شده است. این موقعیت دارای یک مولفه به نام z-index است که بر روی ۹۰۰۰ قرار داده شده است تا این اطمینان حاصل شود که محتوای آن در بالای همه محتویات دیگر قرار گیرد، درحالی که مولفه‌های کوچک‌تر به گونه‌ای ساخته شده‌اند که به عنوان یک بلوک داخلی با پیش‌زمینه‌ی نقره‌ای رنگ، نمایش داده شوند.

article nav{
position: fixed;
top: 0;
left: 0;
z-index: 9000;
}
article nav > *{
display: inline-block;
padding: .5em;
background: silver;
margin-left: .5em;
cursor: pointer;
}

گام ۷- مکان نقاط را مشخص کنید
هرکدام از مکان نقاط باید حتماً بر روی نقشه قرار داده شوند. به این دلیل که اندازه نقشه با توجه به اندازه نسبی صفحه نمایش شما تنظیم شده است، این نقاط با استفاده از مقادیر درصدی از بالا و سمت چپ تنظیم شده‌اند. این امر، این مزیت را به دنبال دارد که در هر اندازه‌ای از صفحه نمایش، یک پایایی و ثبات اندازه را در همه موقعیت‌ها خواهیم داشت.

#pointA{ left: 20%; top: 20%; }
#pointB{ left: 40%; top: 30%; }
#pointC{ left: 60%; top: 50%; }
#pointD{ left: 20%; top: 70%; }

گام ۸- اعمال مکانی را تعریف کنید
حال وقت آن رسیده است که شروع به نوشته کدهای جاوا اسکریپت (JS) در فایل code.js کنیم. ما برای نگه‌داری مکان‌های موقعیتی و شاخص مکان‌های قابل مشاهده در صفحه، ساختار داده‌‌ای مکانی را برای آن تعریف می‌کنیم. اشیای این اعمال در صفحه با استفاده از قابلیت جابه‌جایی به موقعیت‌های قبلی و بعدی، تعریف شده‌اند.

var locations = {«data»:[], «index»:-۱};
var actions = {};
actions.next = function(){
if(locations.index < locations.data.
length-1)locations.index++;
actions.go();
}
actions.previous = function(){
if(locations.index > 0)locations.index–;
actions.go();
}

گام ۹- دستور action.go() را ایجاد کنید
عملگرهای قبلی (previous) و بعدی (next) که در گام ۸ توضیح داده شدند به وسیله دستور action.go() اعمال می‌شوند، که برای استفاده از آنها در صفحه می‌توانیم انیمیشن‌هایی را برای آن‌ها تنظیم کنیم. این کار باعث ایجاد کردن دستور action.go() می‌شود و مکان‌های اشیای مختلف را از قسمت‌های بالا و سمت چپ صفحه تنظیم می‌کند. این دستور، موقعیت محفظه‌ی article را با جزئیات کامل در نظر می‌گیرد و همه این جزئیات را در دستور containerRect قرار می‌دهد تا به این محفظه اجازه دهد بدون اذیت شدن کاربر و با دقت بالایی، جابه‌جا شوند.

actions.go = function(){
var containerRect = $(«article»)[۰].
getBoundingClientRect();
$(«article main»).css({
«left»: (containerRect.left-locations.data[
locations.index ].left)+»px»,
«top»: (containerRect.top-locations.data[
locations.index ].top)+»px»
});
}

گام ۱۰- انتهاهای نامناسب را گره بزنید
با استفاده از مختصات‌های پیکسل‌های بالا و سمت چپ در دستور locations.data تعدیلی را بر روی نقاط مکانی آن انجام دهید. هرکدام از این مولفه‌ها را در محفظه‌ی <nav> بیابید و تابع action object را که در ویژگی data-action به عنوان عکس‌العملی برای عمل کلیک کردن تنظیم شده است، اعمال کنید. این کار باعث می‌شود. این کار شما را قادر می‌کند تا برای next، previous و دیگر توابع عملگری که از HTML به صفحه ما اضافه شده، عکس‌العمل‌ها و پاسخ‌هایی را مشخص کنیم.

window.addEventListener(«load»,function(){
$.each($(‹article main > *›),function(){
var rect = this.getBoundingClientRect();
locations.data.push({«left»:parseInt(rect.
left), «top»:parseInt(rect.top)});
});
$.each($(‹article nav > *›),function(){
$(this).on(«click»,actions[ $(this).
attr(«data-action») ] );
});
});

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

It is main inner container footer text