0

Создать HTML-страницу с футбольным полем, которое занимает всю ширину и высоту экрана, и мячом размером 100px на 100px. Сделать так, чтобы при щелчке мышкой по полю, мяч плавно перемещался на место щелчка.

Учтите: необходимо, чтобы центр мяча останавливался именно там, где был совершен щелчок мышкой. Также предусмотрите, чтобы мяч не выходил за границы поля.

document.body.onclick = function(e) {
  mydiv.style.left = (e.pageX - mydiv.offsetWidth / 2) + "px";
  mydiv.style.top = (e.pageY - mydiv.offsetHeight / 2) + "px";
}
<div id=mypole style="background: no-repeat" "background-size: 100px">
  <img src="http://evergreen.org.ua/wp-content/uploads/2014/03/kak-gazon-delayut-polosatum.jpg" />
</div>
<div id=mydiv style="position: absolute">
  <img src="http://yoway.ru/wp-content/uploads/2015/02/street_black.jpg" />
</div>

3
  • Любопытно понять, почему у тебя мяч не в поле?
    – Air
    24 мар 2019 в 6:54
  • Просите я только начал учить потому приму любые советы по этому поводу что бы понять в чем проблема моего кода
    – Darkkiss
    24 мар 2019 в 6:59
  • Для начала: там неверный синтаксис HTML-разметки. Нужно исправить запись тэга с id = mypole. style="background: no-repeat; background-size: 100px" С точки зрения чистоты кода, конечно, CSS-стили стоит вынести в одельный файл.
    – mymedia
    24 мар 2019 в 7:04

1 ответ 1

2

За плавность элемента отвечает правило css transition.

Еще в примере автора не хватает кавычек в ID

Есть

id=mypole

А должно быть

id="mypole"

const lea = document.querySelector("#lea");
const ball = document.querySelector("#ball");


ball.style.left = 0 + "px";
ball.style.top = 0 + "px";

lea.onclick = function(e) {
  ball.style.left = e.pageX - ball.offsetWidth / 2 + "px";
  ball.style.top = e.pageY - ball.offsetHeight / 2 + "px";

  if (lea.offsetHeight - 25 < e.pageY) {
    ball.style.top = lea.offsetHeight - 25 + "px";
  }

  if (lea.offsetWidth - 25 < e.pageX) {
    ball.style.left = lea.offsetWidth - 25 + "px";
  }

  if (e.pageY < ball.offsetHeight / 2) {
    ball.style.top = 0 + "px";
  }
  if (e.pageX < ball.offsetWidth / 2) {
    ball.style.left = 0 + "px";
  }
};
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100vw;
  height: 100vh;
}

#lea {
  position: relative;
  width: 100%;
  height: 100%;
  background: green;
}

#ball {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: red;
  transition: all 1s;
}
<div id="lea">
  <div id="ball"></div>
</div>

14
  • > В примере автора не хватает кавычек. Кавычки при записи значений аттрибутов не обязательны. Вам бы ещё добавить для поля свойство overflow:hidden, чтобы не было прокрутки.
    – mymedia
    24 мар 2019 в 7:10
  • а каким образом ограничить выход кружка за рамки картинки?
    – Darkkiss
    24 мар 2019 в 7:11
  • @mymedia, путь учиться писать по стандарту...
    – Air
    24 мар 2019 в 7:12
  • @Darkkiss, минутку... Забыл про это
    – Air
    24 мар 2019 в 7:13
  • border-radius: 50%; - Устанавливает радиус скругления уголков рамки. но рамку оно не округлило, как именно это работает?
    – Darkkiss
    24 мар 2019 в 7:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.