Всем добрый день, надо реализовать перемещение мышкой фона блока (изображение) курсор - move. Каким способом можно сделать?
-
1Можно через JS и CSS.– user20761819 июн 2018 в 21:01
-
@Other да ты гений)– solarisedigle19 июн 2018 в 21:02
-
Стараюсь :::::)– user20761819 июн 2018 в 21:03
-
А вообще - я имел ввиду что было бы неплохо увидеть Ваше решение или Вы хотите чтобы Вам сделали с нуля?– user20761819 июн 2018 в 21:03
-
Я хочу чтоб мне намекнули в какую сторону думать, даже ссылка на похожую статью помогла бы)– solarisedigle19 июн 2018 в 21:05
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);
}
<div class=bg></div>
Также стоит либо перенести обработку события mousemove в документ, либо отключать анимацию на mouseleave.