To'pni maydon bo'ylab harakatlantiring

darsga qaytish

Bir marta bosish uchun to’pni maydon bo’ylab harakatlantiring. Shunga o’xshash:

Talablar:

To’p markazi chertganda ko’rsatgich ostida bo’lishi kerak (agar iloji bo’lsa, maydon chetini kesib o’tmasdan).
CSS-animatsiyalariga xush kelibsiz.
To’p maydon chegaralarini kesib o’tmasligi kerak.
Sahifani aylantirganda, hech narsa buzilmasligi kerak.

Eslatmalar:

Kod, shuningdek, har xil to’p va maydon o’lchamlari bilan ishlashi kerak, hech qanday sobit qiymatlarga bog’lanmasligi kerak.
Bosish koordinatalari uchun event.clientX/event.clientY xususiyatlaridan foydalaning.

Vazifa uchun sandbox-ni oching.

To’pni joylashtirishni boshqarish

Avval to’pni joylashtirishning usulini tanlashimiz kerak.

Biz buning uchun position:fixed ishlatib bo’lmaydi, chunki sahifani aylantirish to’pni maydondan siljitadi.

Shuning uchun biz position:absolute ishlatishimiz kerak va joylashtirishni haqiqatan ham mustahkam qilish uchun field ning o’zini joylashtirilgan qilishimiz kerak.

Keyin to’p maydoniga nisbatan joylashtiriladi:

          #field {
  width: 200px;
  height: 150px;
  position: relative;
}

#ball {
  position: absolute;
  left: 0; /* eng yaqin joylashtirilgan ajdodga nisbatan (field) */
  top: 0;
  transition: 1s all; /* left/top uchun CSS animatsiyasi to'pni uchishini ta'minlaydi */
}
        

Keyin biz to’g’ri ball.style.left/top tayinlashimiz kerak. Ular endi maydoniga nisbatan koordinatalarni o’z ichiga oladi.

Mana rasm:

Bizda event.clientX/clientY mavjud – bosishning oynaga nisbatan koordinatalari.

Bosishning maydoniga nisbatan left koordinatasini olish uchun maydon chap chegarasi va chegara kengligini ayirishimiz mumkin:

let left = event.clientX - fieldCoords.left - field.clientLeft;

Odatda, ball.style.left “elementni chap chetini” (to’pni) anglatadi. Shuning uchun agar biz o’sha left ni tayinlasak, to’pni markazi emas, balki cheti sichqoncha kursori ostida bo’ladi.

To’pni markazlashtirish uchun yarim kenglik chapga va yarim balandlik yuqoriga siljitishimiz kerak.

Shuning uchun yakuniy left quyidagicha bo’ladi:

          let left = event.clientX - fieldCoords.left - field.clientLeft - ball.offsetWidth/2;
        

Vertikal koordinata bir xil mantiq bilan hisoblanadi.

Diqqat qiling, biz ball.offsetWidth ga murojaat qilganimizda to’pni kengligi/balandligi ma’lum bo’lishi kerak. HTML yoki CSS da ko’rsatilishi kerak.

Yechimni sandbox-da oching.