Javascript-форум - Изображение в hmtl-документе двигается не так, как было задумано

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Изображение в hmtl-документе двигается не так, как было задумано (https://javascript.ru/forum/events/70081-izobrazhenie-v-hmtl-dokumente-dvigaetsya-ne-tak-kak-bylo-zadumano.html)

CodeMonk3y

08.08.2017 22:20

Изображение в hmtl-документе двигается не так, как было задумано

Приведу полный код ниже. Изображение должно двигаться так, чтобы пользователь при работе на странице всегда видел изображение, задний фон страницы за изображением виден быть не должен. То есть, границы координат изображения от 0 до ширинаОкна - ширинаИзображения и от 0 до длинаОкна - длинаИзображения
Может, я не так понял, какими должны быть минимальные и максимальные координаты изображения? Помогите, пожалуйста, понять, почему не работает, как должно.

<html>
	<head>
		<meta charset="utf-8">
		<style>
			#map {
				position: fixed;
				left: 0; top: 0;
			}
		</style>
	</head>
	<body style="overflow: hidden">
		<img id ="map" src="big.jpg"></img>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<script>
			//скрипт перемещения и масштабирования изображения
			//1)перемещение
			var lastMouseX = 0, lastMouseY = 0; //координаты мыши при предыдущем вызове mousemove
			var imgX = $("#map").offset().left; //координаты левого верхнего края изображения
			var imgY = $("#map").offset().top;
			var minX = ($(window).width()-document.getElementById("map").offsetWidth); //минимальные координаты изображения
			var minY = ($(window).height()-document.getElementById("map").offsetHeight); //ширинаОкна - ширинаИзображения и длинаОкна - длинаИзображения
			$("#map").mousemove(function(event){
				var currentMouseX = event.pageX; //текущие координаты мыши
				var currentMouseY = event.pageY;
				var moveByX = currentMouseX-lastMouseX; //разница между текущими и предыдущими координатами мыши
				var moveByY = currentMouseY-lastMouseY; //т.е. перемещение мыши
				if((imgX+moveByX)<=0 && (imgX+moveByX)>=minX) {
					//если новый X изображения <= 0 и >= минимальному иксу, увеличить старый икс до нового
					imgX+=moveByX;
				}
				if((imgY+moveByY)<=0 && (imgY+moveByY)>=minY) {
					//если новый Y изображения <= 0 и >= минимальному Y, увеличить старый Y до нового
					imgY+=moveByY;
				}
				//задать изображению новые координаты
				$("#map").offset({left: imgX, top: imgY});
				lastMouseY = currentMouseY; //старые координаты мыши = новые
				lastMouseX = currentMouseX;
			});
		</script>
	</body>
</html>

рони	08.08.2017 22:46

CodeMonk3y,

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      #map {
        position: fixed;
        left: 0; top: 0;
      }
    </style>
  </head>
  <body style="overflow: hidden">
    <img id ="map" src="http://www.nationalgeographic.com/content/dam/travel/rights-exempt/Travel-2016/59-parks-52-weeks/sequoia/giant-tree-trail-sequoia-national-park.jpg"></img>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(window).on("load", function() {
//скрипт перемещения и масштабирования изображения
      //1)перемещение
      var lastMouseX = 0, lastMouseY = 0; //координаты мыши при предыдущем вызове mousemove
      $("#map").mousemove(function(event){
      var imgX = $("#map").offset().left; //координаты левого верхнего края изображения
      var imgY = $("#map").offset().top;
      var minX = ($(window).width()-document.getElementById("map").offsetWidth); //минимальные координаты изображения
      var minY = ($(window).height()-document.getElementById("map").offsetHeight); //ширинаОкна - ширинаИзображения и длинаОкна - длинаИзображения

        var currentMouseX = event.pageX; //текущие координаты мыши
        var currentMouseY = event.pageY;
        var moveByX = currentMouseX-lastMouseX; //разница между текущими и предыдущими координатами мыши
        var moveByY = currentMouseY-lastMouseY; //т.е. перемещение мыши
        if((imgX+moveByX)<=0 && (imgX+moveByX)>=minX) {
          //если новый X изображения <= 0 и >= минимальному иксу, увеличить старый икс до нового
          imgX+=moveByX;
        }
        if((imgY+moveByY)<=0 && (imgY+moveByY)>=minY) {
          //если новый Y изображения <= 0 и >= минимальному Y, увеличить старый Y до нового
          imgY+=moveByY;
        }
        //задать изображению новые координаты
        $("#map").offset({left: imgX, top: imgY});
        lastMouseY = currentMouseY; //старые координаты мыши = новые
        lastMouseX = currentMouseX;
      });
})

    </script>
  </body>
</html>

CodeMonk3y

08.08.2017 23:03

Цитата:

Сообщение от рони (Сообщение 461023)

CodeMonk3y,

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      #map {
        position: fixed;
        left: 0; top: 0;
      }
    </style>
  </head>
  <body style="overflow: hidden">
    <img id ="map" src="http://www.nationalgeographic.com/content/dam/travel/rights-exempt/Travel-2016/59-parks-52-weeks/sequoia/giant-tree-trail-sequoia-national-park.jpg"></img>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(window).on("load", function() {
//скрипт перемещения и масштабирования изображения
      //1)перемещение
      var lastMouseX = 0, lastMouseY = 0; //координаты мыши при предыдущем вызове mousemove
      $("#map").mousemove(function(event){
      var imgX = $("#map").offset().left; //координаты левого верхнего края изображения
      var imgY = $("#map").offset().top;
      var minX = ($(window).width()-document.getElementById("map").offsetWidth); //минимальные координаты изображения
      var minY = ($(window).height()-document.getElementById("map").offsetHeight); //ширинаОкна - ширинаИзображения и длинаОкна - длинаИзображения

        var currentMouseX = event.pageX; //текущие координаты мыши
        var currentMouseY = event.pageY;
        var moveByX = currentMouseX-lastMouseX; //разница между текущими и предыдущими координатами мыши
        var moveByY = currentMouseY-lastMouseY; //т.е. перемещение мыши
        if((imgX+moveByX)<=0 && (imgX+moveByX)>=minX) {
          //если новый X изображения <= 0 и >= минимальному иксу, увеличить старый икс до нового
          imgX+=moveByX;
        }
        if((imgY+moveByY)<=0 && (imgY+moveByY)>=minY) {
          //если новый Y изображения <= 0 и >= минимальному Y, увеличить старый Y до нового
          imgY+=moveByY;
        }
        //задать изображению новые координаты
        $("#map").offset({left: imgX, top: imgY});
        lastMouseY = currentMouseY; //старые координаты мыши = новые
        lastMouseX = currentMouseX;
      });
})

    </script>
  </body>
</html>

спасибо, но это не помогло
ну это все хорошо,но картинка 4000*6000 пикселей все равно не двигается до краев, как должно быть

j0hnik

08.08.2017 23:15

var currentMouseX = event.pageX*5; //текущие координаты мыши
var currentMouseY = event.pageY*5;

а если добавить *5 или сколько нужно.

j0hnik

08.08.2017 23:17

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      #map {
        position: fixed;
        left: 0; top: 0;
      }
    </style>
  </head>
  <body style="overflow: hidden">
    <img id ="map" src="http://www.nationalgeographic.com/content/dam/travel/rights-exempt/Travel-2016/59-parks-52-weeks/sequoia/giant-tree-trail-sequoia-national-park.jpg"></img>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(window).on("load", function() {
//скрипт перемещения и масштабирования изображения
      //1)перемещение
      var lastMouseX = 0, lastMouseY = 0; //координаты мыши при предыдущем вызове mousemove
      $("#map").mousemove(function(event){
      var imgX = $("#map").offset().left; //координаты левого верхнего края изображения
      var imgY = $("#map").offset().top;
      var minX = ($(window).width()-document.getElementById("map").offsetWidth); //минимальные координаты изображения
      var minY = ($(window).height()-document.getElementById("map").offsetHeight); //ширинаОкна - ширинаИзображения и длинаОкна - длинаИзображения

        var currentMouseX = event.pageX*5; //текущие координаты мыши
        var currentMouseY = event.pageY*5;
        var moveByX = currentMouseX-lastMouseX; //разница между текущими и предыдущими координатами мыши
        var moveByY = currentMouseY-lastMouseY; //т.е. перемещение мыши
        if((imgX+moveByX)<=0 && (imgX+moveByX)>=minX) {
          //если новый X изображения <= 0 и >= минимальному иксу, увеличить старый икс до нового
          imgX+=moveByX;
        }
        if((imgY+moveByY)<=0 && (imgY+moveByY)>=minY) {
          //если новый Y изображения <= 0 и >= минимальному Y, увеличить старый Y до нового
          imgY+=moveByY;
        }
        //задать изображению новые координаты
        $("#map").offset({left: imgX, top: imgY});
        lastMouseY = currentMouseY; //старые координаты мыши = новые
        lastMouseX = currentMouseX;
      });
})

    </script>
  </body>
</html>

CodeMonk3y

08.08.2017 23:20

Цитата:

Сообщение от j0hnik (Сообщение 461025)

var currentMouseX = event.pageX*5; //текущие координаты мыши
var currentMouseY = event.pageY*5;

а если добавить *5 или сколько нужно.

да, работает. но появляется проблема в скорости движения изображения - теперь оно двигается слишком быстро. в гугл картах скорость приятная, а в моем html-доке слишком высокая

CodeMonk3y

08.08.2017 23:25

Цитата:

Сообщение от j0hnik (Сообщение 461026)

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      #map {
        position: fixed;
        left: 0; top: 0;
      }
    </style>
  </head>
  <body style="overflow: hidden">
    <img id ="map" src="http://www.nationalgeographic.com/content/dam/travel/rights-exempt/Travel-2016/59-parks-52-weeks/sequoia/giant-tree-trail-sequoia-national-park.jpg"></img>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(window).on("load", function() {
//скрипт перемещения и масштабирования изображения
      //1)перемещение
      var lastMouseX = 0, lastMouseY = 0; //координаты мыши при предыдущем вызове mousemove
      $("#map").mousemove(function(event){
      var imgX = $("#map").offset().left; //координаты левого верхнего края изображения
      var imgY = $("#map").offset().top;
      var minX = ($(window).width()-document.getElementById("map").offsetWidth); //минимальные координаты изображения
      var minY = ($(window).height()-document.getElementById("map").offsetHeight); //ширинаОкна - ширинаИзображения и длинаОкна - длинаИзображения

        var currentMouseX = event.pageX*5; //текущие координаты мыши
        var currentMouseY = event.pageY*5;
        var moveByX = currentMouseX-lastMouseX; //разница между текущими и предыдущими координатами мыши
        var moveByY = currentMouseY-lastMouseY; //т.е. перемещение мыши
        if((imgX+moveByX)<=0 && (imgX+moveByX)>=minX) {
          //если новый X изображения <= 0 и >= минимальному иксу, увеличить старый икс до нового
          imgX+=moveByX;
        }
        if((imgY+moveByY)<=0 && (imgY+moveByY)>=minY) {
          //если новый Y изображения <= 0 и >= минимальному Y, увеличить старый Y до нового
          imgY+=moveByY;
        }
        //задать изображению новые координаты
        $("#map").offset({left: imgX, top: imgY});
        lastMouseY = currentMouseY; //старые координаты мыши = новые
        lastMouseX = currentMouseX;
      });
})

    </script>
  </body>
</html>

да, все работает. ну а вы бы как решали эту задачу? может, есть еще какие-то способы?

j0hnik

08.08.2017 23:25

так сделайте *3 в чем проблема

CodeMonk3y

08.08.2017 23:28

Цитата:

Сообщение от j0hnik (Сообщение 461030)

так сделайте *3 в чем проблема

не достаточно, нет возможности подвинуть изображение так, чтобы был виден его нижний и левый края, если ставить *3

рони	08.08.2017 23:44

CodeMonk3y,
понять бы что вы хотите сделать?

j0hnik

09.08.2017 00:05

может если мышь в края упирается двигать картинку потихой??

рони	09.08.2017 00:53

CodeMonk3y,
может быть вы хотели так ...

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      #map {
        position: fixed;
        left: 0; top: 0;

      }
    </style>
  </head>
  <body style="overflow: hidden">
    <img id ="map" src="http://www.nationalgeographic.com/content/dam/travel/rights-exempt/Travel-2016/59-parks-52-weeks/sequoia/giant-tree-trail-sequoia-national-park.jpg"></img>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(window).on("load", function() {
      var width = $("#map").width();
      var height = $("#map").height();
      $("body").mousemove(function(event){
      var left = (width - $(window).width()) * event.pageX/$(window).width()
      var top = (height - $(window).height())* event.pageY/$(window).height()
      $("#map").css({left: -left, top: -top});

      });
})

    </script>
  </body>
</html>

CodeMonk3y

12.08.2017 13:29

Цитата:

Сообщение от рони (Сообщение 461036)

CodeMonk3y,
может быть вы хотели так ...

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      #map {
        position: fixed;
        left: 0; top: 0;

      }
    </style>
  </head>
  <body style="overflow: hidden">
    <img id ="map" src="http://www.nationalgeographic.com/content/dam/travel/rights-exempt/Travel-2016/59-parks-52-weeks/sequoia/giant-tree-trail-sequoia-national-park.jpg"></img>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(window).on("load", function() {
      var width = $("#map").width();
      var height = $("#map").height();
      $("body").mousemove(function(event){
      var left = (width - $(window).width()) * event.pageX/$(window).width()
      var top = (height - $(window).height())* event.pageY/$(window).height()
      $("#map").css({left: -left, top: -top});

      });
})

    </script>
  </body>
</html>

Спасибо за помощь. Я отложил проблему на пару дней, но она еще актуальна. Нет, так не хотел бы. Хотел бы реализовать движение изображения, как двигается карта в яндекс-картах. Глупый вопрос, но может где-то можно найти исходники яндекс-карт? В исходниках мне нужен лишь ответ на один вопрос "какой алгоритм движения яндекс-карт"

рони	12.08.2017 13:40

Цитата:

Сообщение от CodeMonk3y

как двигается карта в яндекс-картах

и где это можно увидеть?

j0hnik

12.08.2017 14:24

Рони "захват по клику" в як да и гугл картах тоже.

рони	12.08.2017 16:15

https://javascript.ru/forum/job/2876...tml#post183237

Цитата:

Сообщение от Gvozd

продолжает равномерное движение в том же направлении куда двигали, на такое же расстояние(по модулю)
если нужно четко заданное расстояние, то просто нужно немного посчитать

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
    overflow: hidden;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
$(function() {
  $('#map').draggable({
    start: function(event, ui) {$(this).stop()},
    stop: function(ev, data) {
        var coef = 1.0
        var left = (data.position.left - data.originalPosition.left) * coef;
        var top = (data.position.top - data.originalPosition.top) * coef;
        $(this).animate({
          left: '+=' + left,
          top: '+=' + top
        }, 800, 'easeInSine');
      }
})
});
  </script>
</head>

<body>
<img id ="map" src="http://www.nationalgeographic.com/content/dam/travel/rights-exempt/Travel-2016/59-parks-52-weeks/sequoia/giant-tree-trail-sequoia-national-park.jpg"></img>


</body>
</html>

Часовой пояс GMT +3, время: 06:53.