@Misha5
профессиональный бомж

Как изменять фотографию при движении зажатой мыши (js)?

У меня есть фото байка:

5ab63d1bb301a334031699.jpeg

Хочу сделать его поворот на 180 при нажатии мыши и движении влево и обратно, чтобы байк при это менял ракурс:
5ab63d6736e10916596340.png5ab63d71ee79a658208299.png5ab63d7eb01ef035087787.png

Как это будет выглядеть в js, хотя бы примерно.
  • Вопрос задан
  • 281 просмотр
Пригласить эксперта
Ответы на вопрос 2
UnluckySerivelha
@UnluckySerivelha
Ответ написан
Комментировать
star52
@star52
Программист
  1. Необходимо менять исходное изображение. Пусть за счёт атрибута/свойства src.
  2. Т. к. используется мышь нужно обрабатывать два её события, для нашего тега img:
    1. mousedown - мышь зажата, запомнили координаты (по горизонтальной оси достаточно)
    2. mousemove - проверяем разницу на горизонтальной оси, по которой необходимо "сменить ракурс". Если она достигнута вызываем функцию смены изображения (пункт 3). Не забываем убрать обработчик mousemove с нашего тега img.
      Замечание: для получения координат можно работать и с контейнером (в котором расположен тег img)

  3. Создаём функцию которая (в моём примере) меняет изображение на новое - путем смены значения свойства src


Вот мой пример:
JS
function nextImage(image) {
	var imageNames = ["blackbird.jpg", "duck.jpg", "sheep.jpg"];
	image.current++;
	if (image.current === imageNames.length) image.current = 0;
	image.src = "images/" + imageNames[image.current];
}

window.onload = function() {
	var img = document.getElementById("main");
	img.current = 1;// создаём новое свойство (счётчик)
	img.onmousedown = function(event) {
		var startX = event.clientX;
		img.onmousemove = function(event) {
				console.log(startX);
				if (startX - event.clientX < -40) {
					nextImage(this);
					this.onmousemove = null;
				}
		};
		return false; //Позволяет избавиться от стадартного обработчика
	}
}

HTML
<!DOCTYPE HTML>
<html lang=en> 
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href=""/>
	<script src="type.js"></script>
</head>
<body>
	<img id="main" src="images/duck.jpg">
</body>
</html>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы