Kiten,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.main-border {
margin: auto;
overflow: hidden;
width: 500px;
height: 300px;
border: 3px solid #663333;
position: relative;
}
.main-border img{
height: auto;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="border1" class="main-border">
<img id="map" alt="" src="https://unsplash.it/500/300/?random&1">
</div>
<script>
//КОД ПРИБЛИЖЕНИЯ И ОТДАЛЕНИЯ, РАБОТАЕТ БОЛЕЕ-МЕНЕЕ НОРМАЛЬНО:
var block = document.getElementById('map');
var x = 100;
block.onwheel = function(event) {
if(event.deltaY < 0 && x < 500){
x += 5;
this.style.width = x + '%';
}
if(event.deltaY > 0 && x > 100){
x -= 5;
this.style.width = x + '%';
}
return false;
}
//КОД ПЕРЕМЕЩЕНИЯ, ТУТ ПОЛНАЯ ШЛЯПА...
var blockmove = document.getElementById('border1');
var left = 0, tp = 0, xx, yy;
blockmove.onmousedown = function(e) {
e.preventDefault();
xx = e.pageX;
yy = e.pageY;
function moveAt(e) {
block.style.left = (left + e.pageX - xx) + 'px';
block.style.top = (tp + e.pageY - yy) + 'px';
}
blockmove.onmousemove = function(e) {
moveAt(e);
}
blockmove.onmouseleave = blockmove.onmouseup = function(e) {
left = parseFloat(block.style.left);
tp = parseFloat(block.style.top);
blockmove.onmouseleave = null;
blockmove.onmousemove = null;
blockmove.onmouseup = null;
}
}
</script>
</body>
</html>