Перемещение фона мышкой

#javascript #html #jquery #css

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

Ответы

Ответ 1

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

Для этого можно использовать события 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);
}





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