5

Всем добрый день, надо реализовать перемещение мышкой фона блока (изображение) курсор - move. Каким способом можно сделать?

5
  • 1
    Можно через JS и CSS.
    – user207618
    19 июн 2018 в 21:01
  • @Other да ты гений) 19 июн 2018 в 21:02
  • Стараюсь :::::)
    – user207618
    19 июн 2018 в 21:03
  • А вообще - я имел ввиду что было бы неплохо увидеть Ваше решение или Вы хотите чтобы Вам сделали с нуля?
    – user207618
    19 июн 2018 в 21:03
  • Я хочу чтоб мне намекнули в какую сторону думать, даже ссылка на похожую статью помогла бы) 19 июн 2018 в 21:05

1 ответ 1

10

Нужно реализовать начало перемещения, само перемещение и окончание.

Для этого можно использовать события mousedown, mousemove и mouseup.

Во время перемещения менять css фона соответственно перемещению курсора.


Пример:

const d = document.querySelector('.bg');

let state = 'off';
let initialMousePos, initialPos = {x: 0, y: 0};

d.addEventListener('mousedown', e => {
  state = 'on';
  initialMousePos = {x: e.clientX, y: e.clientY};
});
document.addEventListener('mouseup', e => {
  if (state !== 'on') return;
  state = 'off';
  initialPos.x = initialPos.x + e.clientX - initialMousePos.x;
  initialPos.y = initialPos.y + e.clientY - initialMousePos.y;
});

d.addEventListener('mousemove', e => {
  if (state !== 'on') return;
  d.style.backgroundPositionX = (initialPos.x + e.clientX - initialMousePos.x) + 'px';
  d.style.backgroundPositionY = (initialPos.y + e.clientY - initialMousePos.y) + 'px';
});
.bg {
  width: 100px;
  height: 100px;
  background-image: url(http://placekitten.com/200/300);
}
<div class=bg></div>

Также стоит либо перенести обработку события mousemove в документ, либо отключать анимацию на mouseleave.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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