Форум

CodeMonk3y · #1 (**permalink**) 08.08.2017, 22:20

Приведу полный код ниже. Изображение должно двигаться так, чтобы пользователь при работе на странице всегда видел изображение, задний фон страницы за изображением виден быть не должен. То есть, границы координат изображения от 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>

рони · #2 (**permalink**) 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 · #3 (**permalink**) 08.08.2017, 23:03

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

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 · #4 (**permalink**) 08.08.2017, 23:15

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

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

j0hnik · #5 (**permalink**) 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 · #6 (**permalink**) 08.08.2017, 23:20

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

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

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

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

CodeMonk3y · #7 (**permalink**) 08.08.2017, 23:25

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

<!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 · #8 (**permalink**) 08.08.2017, 23:25

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

CodeMonk3y · #9 (**permalink**) 08.08.2017, 23:28

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

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

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

рони · #10 (**permalink**) 08.08.2017, 23:44

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

Форум

Справочник

Discord чат

Курсы javascript