از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
روش ایجاد یک چرخ فلک قابل کشیدن با استفاده از وانیلی جاوا اسکریپت: چرخ فلک یا نوار لغزنده وب سایت یک راه موثر برای نمایش چندین تصویر یا محتوا در یک فضای واحد است. بازدیدکنندگان را به تمرکز تشویق می کند روی محتوای مهم وب سایت در حالی که جذابیت بصری کلی را با صرفه جویی در فضای صفحه بهبود می بخشد. در این مقاله یاد می گیریم که چگونه یک چرخ فلک قابل کشیدن…
سرفصلهای مطلب
معرفی
چرخ فلک یا نوار لغزنده یک وب سایت روشی موثر برای نمایش چندین تصویر یا محتوا در یک فضای واحد است. بازدیدکنندگان را به تمرکز تشویق می کند روی محتوای مهم وب سایت در حالی که جذابیت بصری کلی را با صرفه جویی در فضای صفحه بهبود می بخشد.
در این مقاله روش ایجاد یک چرخ فلک قابل کشیدن از ابتدا با استفاده از جاوا اسکریپت وانیلی را خواهیم آموخت. این بسیار مفصل و توضیحی خواهد بود تا همه بتوانند آن را درک کنند.
توجه داشته باشید: کد منبع موجود است روی GitHub.
شروع شدن
برای ساختن چرخ فلک قابل کشیدن از ابتدا در جاوا اسکریپت وانیلی، باید از مجموعه ای از رویدادهای منحصر به فرد ماوس استفاده کنیم، مانند:
mousedown
: هنگامی که یک دکمه ماوس فشار داده می شود در حالی که نشانگر داخل یک عنصر است،mousedown
رویداد تحریک می شود.mouseenter
: هنگامی که یک ماوس برای اولین بار به یک عنصر منتقل می شود،mouseenter
رویداد تحریک می شود.mouseleave
: هنگامی که نشانگر ماوس از یک عنصر خارج می شود،mouseleave
رویداد تحریک می شود (این برعکس استmouseenter
).mouseup
mouseup
رویداد زمانی فعال می شود که اشاره گر در داخل عنصر و یک دکمه باشد روی یک ماوس آزاد می شودmousemove
: هنگامی که یک ماوس در حالی که مکان نما در داخل آن قرار دارد حرکت می کند،mousemove
رویداد تحریک می شود.
بیایید با ایجاد فایل HTML خود شروع کنیم. اساساً، ما به تعداد دلخواه کارت با هر محتوایی که میخواهیم داریم. برای جلوگیری از چسباندن کد HTML بیش از 80 خط، محتوا را از کارت ها حذف می کنم و ترجیح می دهم از جعبه ها استفاده کنم:
<div class="slider-container">
<div class="inner-slider">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
بیایید چند سبک پایه را نیز به آن اضافه کنیم slider-container
، inner-slider
و card
:
.card {
height: 300px;
width: 400px;
border-radius: 5px;
}
.card:nth-child(odd) {
background-color: blue;
}
.card:nth-child(even) {
background-color: rgb(0, 183, 255);
}
.slider-container {
width: 80%;
height: 350px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
.inner-slider {
width: 150%;
display: flex;
gap: 10px;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
}
توجه داشته باشید: overflow: hidden;
به اضافه شد slider-container
، بنابراین کارت های دیگر را که خارج از مشخص شده هستند پنهان می کند width
. ما هم استفاده کردیم position: absolute;
در کنار top
و left
در inner-slider
، بنابراین ما می توانیم از آن استفاده کنیم left
موقعیت بعدی با جاوا اسکریپت.
در این مرحله، شما page باید شبیه این باشد:
ساخت چرخ فلک قابل کشیدن
اولین مرحله انتخاب عنصر لغزنده، خود لغزنده و لغزنده خواهد بود container. سپس سه متغیر را تنظیم خواهیم کرد که بعداً از آنها استفاده خواهیم کرد.
let sliderContainer = document.querySelector('.slider-container');
let innerSlider = document.querySelector('.inner-slider');
let pressed = false;
let startX;
let x;
همانطور که قبلا گفته شد، ما از تعداد زیادی ماوس استفاده خواهیم کرد eventListeners
برای انجام عملیات های مختلف ما بیشتر آنها را به عنصر لغزنده والد متصل خواهیم کرد.
اولین رویدادی که ما آن را تماشا خواهیم کرد، رویداد mousedown است که شبیه به یک کلیک است اما دقیقاً مشابه آن نیست. اینجاست که ما مشخص میکنیم وقتی کاربر روی نوار لغزنده کلیک میکند چه اتفاقی میافتد container.
توجه داشته باشید: این با click
رویداد در آن click
رویداد پس از انجام یک کلیک کامل فعال می شود. یعنی دکمه ماوس فشار داده شده و رها می شود در حالی که نشانگر در همان عنصر باقی می ماند. در حالی که mousedown
در لحظه فشار دادن دکمه برای اولین بار اجرا می شود.
sliderContainer.addEventListener('mousedown', () => {
...
})
برای نشان دادن اینکه pressed
متغیری که قبلا به صورت مقداردهی اولیه کردیم false
، فشار داده شده است، ابتدا تخصیص می دهیم true
به آن ما همچنین تنظیم می کنیم startx
مقدار به مقدار افست در x
جهت منهای innerSlider
مقدار افست به left
، که در حال حاضر است 0
. با تلاش برای خروج از مقدار میتوانیم ببینیم این به چه معناست startx
.
ما همچنین به سبک cursor
برای تعامل بهتر این قرار است تنظیم شود grabbing
(برای بررسی اینکه این چه کاری انجام می دهد، سعی کنید در داخل آن کلیک کنید slidercontainer
).
sliderContainer.addEventListener("mousedown", (e) => {
pressed = true;
startX = e.offsetX - innerSlider.offsetLeft;
sliderContainer.style.cursor = "grabbing";
});
رویداد بعدی که ما به دنبال آن هستیم این است mouseenter
; ما این کار را انجام می دهیم تا تعامل اولیه را با یک ظاهر طراحی کنیم cursor
برای نشان دادن اینکه نوار لغزنده یا یک کارت لغزنده خاص گرفته شده است.
sliderContainer.addEventListener("mouseenter", () => {
sliderContainer.style.cursor = "grab";
});
پس از آن، ما برای گوش دادن به mouseup
رویداد و تنظیم کنید cursor
سبک به grab
، به طوری که وقتی کاربر از گرفتن یا کلیک کردن خودداری می کند، cursor
تغییر خواهد کرد به grab
به جای grabbing
. ما نیز آن را برمی گردانیم pressed
ارزش به false
.
sliderContainer.addEventListener("mouseup", () => {
sliderContainer.style.cursor = "grab";
pressed = false;
});
ما تا این مرحله توانستهایم تعاملی را اضافه کنیم، اما هنوز عملکرد اصلی، یک چرخ فلک قابل کشیدن، را اجرا نکردهایم.
مدیریت منطق اصلی
بیایید اکنون به منطق اصلی رسیدگی کنیم. ما هنوز هم را هدف قرار خواهیم داد sliderContainer
، اما این بار ما به یک گوش می دهیم mousemove
رویداد. در تابع تماس مجدد، بررسی می کنیم که آیا pressed
است false
تا بتوانیم تابع را برگردانیم و هیچ کاری انجام نمی دهد.
sliderContainer.addEventListener("mousemove", (e) => {
if (!pressed) return;
...
});
اما اگر pressed
است true
، می توانیم به برخی منطق های دیگر برویم. اولین قدم جلوگیری از رفتارهای پیش فرض و به دنبال آن تنظیم خواهد بود x
به offsetX
(مختصات x نشانگر ماوس نسبت به container عنصر لغزنده).
sliderContainer.addEventListener("mousemove", (e) => {
if (!pressed) return;
e.preventDefault();
x = e.offsetX;
});
شما متوجه خواهید شد که زمانی که ما به استایل دادیم innerSlider
کلاس CSS را اضافه کردیم position: absolute
و الف left
ارزش 0
. حالا ما قصد داریم آن را تغییر دهیم left
ارزش به x-startX
هنگامی که کاربر چرخ فلک را می کشد به صورت پویا. (ما موقعیت فعلی خود را از افست div والد کم می کنیم).
sliderContainer.addEventListener("mousemove", (e) => {
if (!pressed) return;
e.preventDefault();
x = e.offsetX;
innerSlider.style.left = `${x - startX}px`;
});
در این مرحله، متوجه خواهید شد که همه چیز خوب کار می کند زیرا نوار لغزنده ما اکنون به درستی کشیده می شود، اما محدودیتی برای توقف اسکرول وجود ندارد.
بیایید اکنون با تعریف یک تابع جدید از آن مراقبت کنیم. اولین چیز این است که موقعیت کانتینرهای لغزنده داخلی و خارجی را بدست آوریم، سپس میتوانیم دو عبارت شرطی برای هر دو طرف ایجاد کنیم.
const checkBoundary = () => {
let outer = sliderContainer.getBoundingClientRect();
let inner = innerSlider.getBoundingClientRect();
if (parseInt(innerSlider.style.left) > 0) {
innerSlider.style.left = "0px";
}
if (inner.right < outer.right) {
innerSlider.style.left = `-${inner.width - outer.width}px`;
}
};
پس از انجام این کار، اکنون می توانیم این تابع را در داخل فراخوانی کنیم mousemove
شنونده رویداد به عنوان آخرین مورد:
sliderContainer.addEventListener("mousemove", (e) => {
...
checkBoundary();
});
ما با استفاده از این روش توانستیم با موفقیت یک نوار لغزنده قابل کشیدن با جاوا اسکریپت از ابتدا ایجاد کنیم.
نتیجه
در این مقاله یاد گرفتیم که چگونه با استفاده از جاوا اسکریپت وانیلی یک چرخ فلک قابل کشیدن از ابتدا ایجاد کنیم، همچنین تفاوت بین تمام رویدادهای ماوس استفاده شده را یاد گرفتیم.
منتشر شده در 1403-01-10 01:56:04