از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
روش ایجاد یک چرخ فلک قابل کشیدن با استفاده از وانیلی جاوا اسکریپت: چرخ فلک یا نوار لغزنده وب سایت یک راه موثر برای نمایش چندین تصویر یا محتوا در یک فضای واحد است. بازدیدکنندگان را به تمرکز تشویق می کند روی محتوای مهم وب سایت در حالی که جذابیت بصری کلی را با صرفه جویی در فضای صفحه بهبود می بخشد. در این مقاله یاد می گیریم که چگونه یک چرخ فلک قابل کشیدن…
سرفصلهای مطلب
معرفی
چرخ فلک یا نوار لغزنده یک وب سایت روشی موثر برای نمایش چندین تصویر یا محتوا در یک فضای واحد است. بازدیدکنندگان را به تمرکز تشویق می کند روی محتوای مهم وب سایت در حالی که جذابیت بصری کلی را با صرفه جویی در فضای صفحه بهبود می بخشد.
در این مقاله روش ایجاد یک چرخ فلک قابل کشیدن از ابتدا با استفاده از جاوا اسکریپت وانیلی را خواهیم آموخت. این بسیار مفصل و توضیحی خواهد بود تا همه بتوانند آن را درک کنند.
توجه داشته باشید: کد منبع موجود است روی GitHub.
شروع شدن
برای ساختن چرخ فلک قابل کشیدن از ابتدا در جاوا اسکریپت وانیلی، باید از مجموعه ای از رویدادهای منحصر به فرد ماوس استفاده کنیم، مانند:
mousedown: هنگامی که یک دکمه ماوس فشار داده می شود در حالی که نشانگر داخل یک عنصر است،mousedownرویداد تحریک می شود.mouseenter: هنگامی که یک ماوس برای اولین بار به یک عنصر منتقل می شود،mouseenterرویداد تحریک می شود.mouseleave: هنگامی که نشانگر ماوس از یک عنصر خارج می شود،mouseleaveرویداد تحریک می شود (این برعکس استmouseenter).mouseupmouseupرویداد زمانی فعال می شود که اشاره گر در داخل عنصر و یک دکمه باشد روی یک ماوس آزاد می شود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
