<!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>
|