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