Изображение в 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>
|
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 пикселей все равно не двигается до краев, как должно быть |
var currentMouseX = event.pageX*5; //текущие координаты мыши
var currentMouseY = event.pageY*5; а если добавить *5 или сколько нужно. |
<!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>
|
Цитата:
|
Цитата:
|
так сделайте *3 в чем проблема
|
Цитата:
|
CodeMonk3y,
понять бы что вы хотите сделать? |
| Часовой пояс GMT +3, время: 09:49. |