Показать сообщение отдельно
  #17 (permalink)  
Старый 19.07.2021, 11:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,155

img move and zoom
Сергей Ракипов,
примерно так, скрипт требует уточнения на предмет появления полосы под картинкой при изменении размеров(может кто подскажет).

<!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);
            padding: 0;
            margin: 0;
        }

        .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, max_width, max_height, min_width, min_height;


                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);
                let img = el.querySelector("img");
                let ratio = max_ratio = 10;
                const zoom = _ => {
                    img.width = min_width + (max_width - min_width) * ratio / max_ratio;
                    img.height = img.width * (max_height / max_width);
                }
                const _load = _ => {
                    max_width = img.naturalWidth;
                    max_height = img.naturalHeight;
                    min_width = el.clientWidth;
                    min_height = el.clientHeight;

                    el.scrollTo(
                        (max_width - min_width) / 2,
                        (max_height - min_height) / 2
                    );
                }
                img.complete ? _load() : el.querySelector("img").addEventListener("load", _load);
                let nav = el.nextElementSibling;

                nav.addEventListener("pointerdown", ({
                    target
                }) => {
                    if (target = target.closest(".plus, .minus")) ratio += target.classList.contains("plus") ? 1 : -1;
                    ratio = Math.max(0, Math.min(ratio, max_ratio))
                    zoom()

                });

            })

        });
    </script>
</body>

</html>
Ответить с цитированием