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

    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>
    Ответ написан
    Комментировать