در این مقاله قصد داریم تا با استفاده از ابزار های JavaScript Mouse Event آیکون های تصویری بسازیم که وقتی اشاره گر موس به روی آن ها می رود, تصویرشان تغییر کند. برای مثال آیکون هایی برای نمایش یک کتاب الکترونیکی که در حالت معمولی تصویر لوگوی وبسایت را نمایش می دهد اما وقتی موس روی آن ها می رود, تصویر جلد کتاب نمایش داده می شود. این راهی ایده آل برای نمایش خلاصه ای از چیزی است که مخاطب با ورود به آدرس مورد نظر خواهد دید. برای انجام چنین کاری از دو ابزار CSS Grid Layout  و JavaScript mousemove event استفاده خواهیم کرد. با ما همراه باشید.

تصاویر واکنش پذیر با JavaScript Mouse Event

تغییرات HTML

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

     <ul class=”cards”>  <li class=”card”>

<img src=”IMG_SRC” alt=””>

<!– 4 more images here –>

</li>

<li class=”card”>

<img src=”IMG_SRC” alt=””>

<!– 3 more images here –>

</li>

<li class=”card”>

<img src=”IMG_SRC” alt=””>

<!– 2 more images here –>

</li>

<li class=”card”>

<img src=”IMG_SRC” alt=””>

<!– 1 more image here –>

</li>

</ul>

۰۱

۰۲

۰۳

۰۴

۰۵

۰۶

۰۷

۰۸

۰۹

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

تغییرات CSS

برای تغییرات بخش CSS , با توجه به قواعد CSS styles توجه به دو نکته ضروری است:

-لیست تصاویر هر آیکون به عنوان یک قالب بسته و محصور (grid container) تعریف می شود. می توانید به جای CSS grid از flexbox یا هر روش چینش دلخواهتان استفاده کنید.

–تصاویری که قصد داریم در هر یک از آیکون ها قرار گیرد را در حالت پیش فرض مخفی یا غیر قابل مشاهده می کنیم.

کد لازم برای اضافه شدن به فایل CSS را در تصویر زیر مشاهده می کنید:

.cards {

  display: grid;

  grid-gap: 20px;

  grid-template-columns: repeat(4, 1fr);

}

.card {

  position: relative;

  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);

}

.card:hover {

  cursor: pointer;

}

.card img:not(:first-of-type) {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  opacity: 0;

}

.card img.is-visible {

  opacity: 1;

}

۰۱

۰۲

۰۳

۰۴

۰۵

۰۶

۰۷

۰۸

۰۹

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

تغییرات JavaScript

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

window.addEventListener(“load”, init);

window.addEventListener(“resize”, init);

۱

۲

 

در داخل تابع init چند اتفاق می افتد. اول از همه در میان آیکون هایمان یک حلقه یا لوپ ایجاد می کنیم.

 

function init() {

  const cards = document.querySelectorAll(“.card”);

  cards.forEach(el => {

    // actions here

  });

 }

۱

۲

۳

۴

۵

۶

سپس برای هر یک از آیکون ها تعداد تصاویر را بدون در نظر گرفتن تصویر پیش فرض حساب       می کنیم .(اولین تصویر در حالت پیش فرض قابل رویت است و به طور مطلق جایگذاری نشده است.)

const numOfChildImages = el.querySelectorAll(“img:not(:first-of-type)”).length;

 

اگر تعداد تصاویر هر آیکون حداقل یکی بود, مطابق زیر عمل می کنیم.

-پهنای آیکون را حساب می کنیم.(پهنای تصویر پیش فرض) و سپس با تقسیم کردن آن به تعداد تصاویر زیر شاخه, آیکون را به قسمت های مساوی تقسیم می کنیم.

if (numOfChildImages > 0) {

  const { width } = el.getBoundingClientRect();

  const parts = width / numOfChildImages;

}

۱

۲

۳

۴

 

برای درک بهتر تصور کنید اولین آیکون ۲۳۵px پهنا دارد. این آیکون حاوی چهار تصویر است(فراموش نکنید که تصویر پیش فرض را نادیده می گیریم). در نتیجه از تقسیم ۲۳۵ بر ۴ مقدار ۵۸٫۷۵ پیکسل بدست می آید. اما از این عدد چه استفاده ای می کنیم؟ در جواب باید گفت که این عدد محدوده ها و فاصله ها را مشخص می کند, پس به محض اشاره شدن به آیکون توسط موس, موقعیت طولی موس(mouse x) را بدست آورده, محدوده آن را بررسی می کنیم و در نهایت تصویر مربوطه را نشان می دهیم.

به مثال ساده زیر توجه کنید.

Mouse X Position Image to Show
۰<X≤۵۸٫۷۵px ۱st
۵۸٫۷۵px<X≤۱۱۷٫۵px ۲nd
۱۱۷٫۵px<X≤۱۷۶٫۲۵px ۳rd
۱۷۶٫۲۵px<X≤۲۳۵px ۴th

توجه داشته باشید که منظور از ستون تصویر به نمایش در آمده یکی از تصاویری است که از میان عکس های زیر شاخه هر آیکون باید به نمایش درآید(مجددا تصویر پیش فرض را در نظر نمی گیریم)

 

تصاویر واکنش پذیر با JavaScript Mouse Event

 

 

حال که ملزومات کار را می دانیم, بیایید همه را در قالب یک کد درآوریم. مجددا درون هر حلقه از mousemove event استفاده می کنیم.

// hover cards

el.addEventListener(“mousemove”, e => {

  // do stuff here

});

۱

۲

۳

۴

 

حال موارد زیر را انجام می دهیم:

۱-مختصات طولی (mouse x) اشاره گر موس را نسبت به آیکون اشاره شده و نه کل صفحه بدست می آوریم.

۲-کلاس(isVisible) را از تمام تصاویر زیرشاخه آیکون برمی داریم.

۳-با توجه به موقعیت اشاره گر موس تصویر مناسب را نمایش می دهیم.

قسمتی از کد که موارد توضیح داده شده را اجرا می کند بدین شرح است:

۰۱

۰۲

۰۳

۰۴

۰۵

۰۶

۰۷

۰۸

۰۹

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

el.addEventListener(“mousemove”, e => {

//۱

const xPos = e.pageX – el.offsetLeft;

//۲

removeIsVisibleClass();

//۳

switch (numOfChildImages) {

case 1:

if (xPos > 0 && xPos <= parts) {

addClass(el, “img:nth-child(2)”);

}

break;

case 2:

if (xPos > 0 && xPos <= parts) {

addClass(el, “img:nth-child(2)”);

} else if (xPos > parts && xPos <= parts * 2) {

addClass(el, “img:nth-child(3)”);

}

break;

// more cases below

}

});

همان طور که می بینید تابع(removeIsVisibleClass) وظیفه حذف کردن کلاس (isVisible) تصویر مربوطه را بر عهده دارد. تابع کلی تر (addClass) وظیفه اضافه کردن کلاس (isVisible) به تصویر مورد نظر را بر عهده دارد. بدنه این توابع را در تصویر زیر مشاهده می کنید.

function removeIsVisibleClass() {

  if (document.querySelector(“img.is-visible”)) {

    document.querySelector(“img.is-visible”).classList.remove(“is-visible”);

  }

}

function addClass(parent, child, className = “is-visible”) {

  parent.querySelector(child).classList.add(className);

}

۱

۲

۳

۴

۵

۶

۷

۸

۹

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

// inside cards loop

el.addEventListener(“mouseleave”, () => {

  removeIsVisibleClass();

});

۱

۲

۳

۴

پشتیبانی مرورگر

آیکون های واکنش پذیر به خوبی برروی اکثر مرورگر ها اجرا می شوند با این حال توجه به نکاتی ضروری است:

-برای ایجاد چنین قابلیتی از CSSGrid و حلقه foreach  استفاده کردیم که توسط تمامی مرورگر ها استفاده نمی شوند, اما اگر بخواهید پشتیبانی تمام مرورگر ها را داشته باشید راه حل های جایگزینی نیز برای این کار وجود دارد.

-این ویژگی بر روی تمامی صفحه نمایش ها و وسیله ها به طور یکسان به کار می رود و برای صفحه نمایش های کوچک و لمسی بهینه سازی نشده است. برای پروژه ساده ای مانند مثالی که در این مطلب ارائه شد مشکل خاصی به حساب نمی آید اما برای پروژه های بزرگ تر, می توانید آن را به صفحه نمایش های بزرگ و یا غیر لمسی محدود کرد.

جمع بندی

در این مطلب سعی کردیم تا با استفاده ازJavaScript mouse event  یک ویژگی منحصر به فرد به آیکون های تصویری بدهیم. امیدواریم این مطلب برای شمابه اندازه کافی هیجان انگیز بوده باشد تا دست به کار شویدو خودتان چیزی خارق العاده خلق کنید.

0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

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