Показать сообщение отдельно
  #16 (permalink)  
Старый 19.07.2021, 08:37
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 465

<!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>
Ответить с цитированием