<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>index</title>
<style>
body {
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
;
}
.blok {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.podpis {
display: block;
}
.fertezj {
width: 500px;
height: 300px;
cursor: crosshair;
overflow: hidden;
-webkit-box-shadow: 0px 0px 16px 6px rgba(34, 60, 80, 0.6) inset;
-moz-box-shadow: 0px 0px 16px 6px rgba(34, 60, 80, 0.6) inset;
box-shadow: 0px 0px 16px 6px rgba(34, 60, 80, 0.6) inset;
touch-action :none;
border: 4px solid rgba(34, 60, 80, 0.9);
}
.fertezjХ img {
width: 2000px;
height: 2000px;
}
.blok_knopka {
width: 148px;
height: 64px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
margin: 10px 10px 10px 10px;
}
.plus {
width: 32px;
height: 32px;
cursor: pointer;
border: 2px solid #C9C9C9;
display: flex;
justify-content: center;
align-items: center;
margin: 0px 20px 0px 0px;
border-radius: 50%;
background-image: url(https://rakipov.ru/files/plus.svg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;
}
.minus {
width: 32px;
height: 32px;
cursor: pointer;
border: 2px solid #C9C9C9;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-image: url(https://rakipov.ru/files/minus.svg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<div class="blok">
<p class="podpis">
Размер блока 500*300<br>
Размер фоновое изображение 2000*2000
</p>
<div class="fertezj"><img src="https://rakipov.ru/files/fon3.png" alt=""></div>
<div class="blok_knopka">
<div class="plus"></div>
<div class="minus"></div>
</div>
</div>
<script>
document.addEventListener( "DOMContentLoaded", function () {
document.querySelectorAll( '.fertezj' ).forEach( el => {
let _startX, _startY, _scrollLeft, _scrollTop;
const pointerHandler = ( event ) => {
const {
screenX,
screenY
} = event;
if ( event.type === "pointerdown" ) {
document.addEventListener( "pointermove", pointerHandler );
document.addEventListener( "pointerup", pointerHandler );
_startX = screenX;
_startY = screenY;
_scrollLeft = el.scrollLeft;
_scrollTop = el.scrollTop;
}
if ( event.type === "pointerup" ) {
document.removeEventListener( "pointermove", pointerHandler );
document.removeEventListener( "pointerup", pointerHandler );
}
if ( event.type === "pointermove" ) {
const dx = ( screenX - _startX );
const dy = ( screenY - _startY );
el.scrollTo(
_scrollLeft - dx,
_scrollTop - dy
);
}
event.preventDefault();
}
el.addEventListener( "pointerdown", pointerHandler );
el.querySelector( "img" ).addEventListener( "load", _ => el.scrollTo(
700,
750
) )
} )
} );
</script>
</body>
</html>