Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Функция как в картах Гугл и Яндекс (https://javascript.ru/forum/misc/82826-funkciya-kak-v-kartakh-gugl-i-yandeks.html)

Сергей Ракипов 13.07.2021 11:48

Функция как в картах Гугл и Яндекс
 
Я не знаю как правильно называется это функция, но смысл ее заключается в том что когда зажимаешь клик на карте то карту можно перемешать в любое направление.

И вот нужно сделать так что бы фоновая картинка тоже меняла свою позицию в зависимости от того куда я ее перемещаю с помощью зажатого клика.
Возможно есть какие то готовые библиотеки или решение не такое сложное как я думаю, прошу помощи.

Возможно лучше сделать что бы картинка была не фоне а просто картинкой, я не знаю.

<!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: 1000px;
            height: 600px;
            background-image: url(https://rakipov.ru/files/fon3.png);
            background-repeat: no-repeat;
            background-position: center;
            cursor: crosshair;
            -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;
            border: 4px solid rgba(34, 60, 80, 0.9);
        }
    </style>
</head>

<body>
    <div class="blok">
        <p class="podpis">
            Размер блока 1000*600<br> 
            Размер фоновое изображение 2000*2000
        </p>
        <div class="fertezj"></div>
    </div>
</body>
</html>

рони 13.07.2021 14:41

Сергей Ракипов,
https://javascript.ru/forum/dom-wind...tml#post504886

Сергей Ракипов 14.07.2021 07:11

рони,
Спасибо это интересная функция я сохранил.

Но мне нужно не то.
Я не знаю как можно объяснить.
Вот карты https://yandex.ru/maps/54/yekaterinb...56.851369&z=12
И если один раз кликнуть и зажать то можно перетаскивать эту карту.

рони 14.07.2021 10:37

Цитата:

Сообщение от Сергей Ракипов
можно перетаскивать эту карту.

код выше позволяет это сделать ... сами, либо ждите.

Сергей Ракипов 14.07.2021 11:15

Цитата:

Сообщение от рони (Сообщение 538646)
код выше позволяет это сделать ... сами, либо ждите.

Спасибо у меня не получатся сообразить как из этого кода сделать то что мне нужно

рони 14.07.2021 15:16

просмотр перетаскиванием
 
Сергей Ракипов,

<!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;
            border: 4px solid rgba(34, 60, 80, 0.9);
            touch-action :none;
        }
        .fertezjХ img{
            width: 2000px;
            height: 2000px;
        }

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

Сергей Ракипов 16.07.2021 06:48

рони,
Как всегда признателен, большое спасибо за помощь.

Скажите а что это часть кода значит

el.addEventListener( "pointerdown", pointerHandler );
                el.querySelector( "img" ).addEventListener( "load", _ => el.scrollTo(
                    700,
                    750
                ) )
            } )

Сергей Ракипов 16.07.2021 07:09

И еще сейчас проверил на мобильной телефоне. В моей голове зажатый клик и зажатый палец на экране это одно и тоже.

Но на телефоне не работает, но то есть как не работает, вроде картинку двигает но делает это плохо. Вот загрузил себе на сайт.

https://rakipov.ru/testik/map/

рони 16.07.2021 08:32

Цитата:

Сообщение от Сергей Ракипов
что это часть кода значит

пытка вывести картинку по её центру)))

voraa 16.07.2021 08:43

Цитата:

Сообщение от Сергей Ракипов
Но на телефоне не работает, но то есть как не работает, вроде картинку двигает но делает это плохо.

Для того, что бы срабатывало на сенсорных экранах, добавить в CSS после строки 29

touch-action :none;

Сергей Ракипов 16.07.2021 09:10

Цитата:

Сообщение от рони (Сообщение 538707)
пытка вывести картинку по её центру)))

То есть это координаты? а почему просто не написать center

Сергей Ракипов 16.07.2021 09:17

Цитата:

Сообщение от voraa (Сообщение 538708)
Для того, что бы срабатывало на сенсорных экранах, добавить в CSS после строки 29

touch-action :none;

Спасибо, сработало :)

рони 16.07.2021 11:20

Цитата:

Сообщение от Сергей Ракипов
а почему просто не написать center

я не знаю такого метода.

Сергей Ракипов 16.07.2021 11:37

Цитата:

Сообщение от рони (Сообщение 538716)
я не знаю такого метода.

Понял

Сергей Ракипов 18.07.2021 11:21

Если это возможно, можно еще прикрепить код который бы масштабировал карту двумя кнопками и мышью
И кончено же в пределах самого блока который в котором находится карта и не делал изображение больше чем его реальные размеры.

Сергей Ракипов 19.07.2021 07:37

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

рони 19.07.2021 10:26

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>

Сергей Ракипов 19.07.2021 11:21

рони,
Не нужно ни каких полос.
Нужно что бы картинка была в 100% масштабе, когда ее максимально приблизят. И когда ее будут отдалять то она поместилась полностью в блоке без возможности прокрутки

Вот почему так, я сделал пропорциональным размер блока и фото
А когда я уменьшаю фото, внизу образуется какой то просвет.

<!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: 300px;
            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">
            Размер блока 300*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>

рони 19.07.2021 12:38

Цитата:

Сообщение от Сергей Ракипов
Не нужно ни каких полос.

вы пост выше читали?

рони 19.07.2021 12:40

Сергей Ракипов,
изображение 2000*2000 нет у вас такого изображения, попробуйте сделать, может и полоса исчезнет.
либо нужно менять размеры окна просмотра.

Сергей Ракипов 19.07.2021 12:57

рони,
не внимательность :(
Спасибо рони,

рони 19.07.2021 12:59

Цитата:

Сообщение от рони
менять размеры окна просмотра.

<!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: 300px;
            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;
        }
        .fertezj img{
            padding: 0;
            margin: 0;
            display:  block;
        }

        .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;
        }

        .minus.dis, .plus.dis {
            opacity: .2;
        }

    </style>
</head>

<body>
    <div class="blok">
        <p class="podpis">
            Размер блока 300*274<br>
            Размер фоновое изображение 2000*1833
        </p>
        <div class="fertezj"><img src="https://rakipov.ru/files/fon3.png" alt=""></div>
        <div class="blok_knopka">
            <div class="plus dis"></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 = _ => {  
                    let _w = img.width, _h = img.height;
                    img.width = min_width + (max_width - min_width) * ratio / max_ratio;
                    img.height = img.width * (max_height / max_width);
                    _w -= img.width; _h -= img.height;
                    _w = el.scrollLeft - _w/2; _h = el.scrollTop - _h/2;
                    el.scrollTo( _w, _h );
                }
                const _load = _ => {
                    max_width = img.naturalWidth;
                    max_height = img.naturalHeight;
                    min_width = el.clientWidth;
                    el.style.height = Math.trunc(min_width * (max_height / max_width)) + "px";
                    min_height = el.clientHeight;

                    el.scrollTo(
                        (max_width - min_width) / 2,
                        (max_height - min_height) / 2
                    );
                }
                img.complete ? _load() : 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));
                    nav.querySelector(".plus").classList.toggle("dis", ratio === max_ratio);
                    nav.querySelector(".minus").classList.toggle("dis", !ratio);
                    zoom();
                    }
                });
            })
        });
    </script>
</body>

</html>

рони 19.07.2021 13:01

Сергей Ракипов,
полоса снизу примерно 4 миллиметра остаётся, как убрать не знаю. сделал картинку блоковой строка 42 пост #22

Сергей Ракипов 19.07.2021 13:23

Цитата:

Сообщение от рони (Сообщение 538786)
Сергей Ракипов,
полоса снизу примерно 4 миллиметра остаётся, как убрать не знаю.

Я тоже ее увидел, буду искать может какую то зарплатку сделаю

рони 19.07.2021 13:25

Сергей Ракипов,
обновите эту страницу

Сергей Ракипов 19.07.2021 13:34

Цитата:

Сообщение от рони (Сообщение 538788)
Сергей Ракипов,
обновите эту страницу

А что это за незаконная магия?

рони 19.07.2021 13:46

Цитата:

Сообщение от Сергей Ракипов
А что это за незаконная магия?

???

Сергей Ракипов 19.07.2021 14:04

Цитата:

Сообщение от рони (Сообщение 538790)
???

почему пропала линия

рони 19.07.2021 14:35

Цитата:

Сообщение от Сергей Ракипов
почему пропала линия

это к специалистам по css )))

Сергей Ракипов 19.07.2021 14:36

рони,
Как всегда спасибо тебе добрый человек :)

рони 19.07.2021 14:45

Сергей Ракипов,
добавил класс для кнопок, пост тот-же #22

Сергей Ракипов 21.07.2021 09:50

Цитата:

Сообщение от рони (Сообщение 538795)
Сергей Ракипов,
добавил класс для кнопок, пост тот-же #22

Спасибо

Сергей Ракипов 21.07.2021 09:52

Посмотрел, как идеально все сделано!!!

Сергей Ракипов 21.07.2021 12:27

рони,
А получается что скрипт работает так. Масшат идет от верхнего левого угла.
А как сделать что бы он масштабировался в большую или меньшую сторону от тогда месте который сейчас находится в блоке. Понимаю что это сложно сделать. То хотя бы от центра шел масштаб.

Сергей Ракипов 21.07.2021 12:39

Цитата:

Сообщение от Сергей Ракипов (Сообщение 538832)
рони,
А получается что скрипт работает так. Масшат идет от верхнего левого угла.
А как сделать что бы он масштабировался в большую или меньшую сторону от тогда месте который сейчас находится в блоке. Понимаю что это сложно сделать. То хотя бы от центра шел масштаб.

Все вроде разобрался как это сделать, как я понял это вот здесь, но это будет зум от того места который я установлю.
el.addEventListener("pointerdown", pointerHandler);
        let img = el.querySelector("img");
        let ratio = max_ratio = 10;
        const zoom = _ => {
            el.scrollTo(0, 0);
            img.width = min_width + (max_width - min_width) * ratio / max_ratio;
            img.height = img.width * (max_height / max_width);
        }


А можно сделать что бы зум шел от того мета который при просмотре в блоке

Сергей Ракипов 21.07.2021 12:41

И как я понял за центровку изображение отвечает вот эта часть

max_width = img.naturalWidth;
            max_height = img.naturalHeight;
            min_width = el.clientWidth;
            el.style.height = Math.trunc(min_width * (max_height / max_width)) + "px";
            min_height = el.clientHeight;

            el.scrollTo(
                (max_width - min_width) / 2,
                (max_height - min_height) / 2
            );


Просто она не совсем по центру

Сергей Ракипов 21.07.2021 13:01

что то я не много поплыл, а что отвечает за высоту блока

Понял это вот тут

el.style.height = Math.trunc(min_width * (max_height / max_width)) + "px";
            min_height = el.clientHeight;


Сделал так, получилось по центру картинка

max_width = img.naturalWidth;
            max_height = img.naturalHeight;
            min_width = el.clientWidth;
            min_height = el.clientHeight;


А можно сделать так что бы сохранять пропорции в зависимости от разрешения.

рони 21.07.2021 13:10

Цитата:

Сообщение от Сергей Ракипов
сохранять пропорции

??? какие пропорции, картинка всегда имеет одну и туже пропорцию.

Сергей Ракипов 21.07.2021 13:14

Я имею виду не картинку а блок вот это сделать пропорциональный который зависит от разрешение.

.fertezj {
    width: 100%;
    height: auto;
    cursor: crosshair;
    overflow: hidden;
    touch-action: none;
    border: 1px solid rgba(34, 60, 80, 0.9);
    padding: 0;
    margin: 0;
}

рони 21.07.2021 13:42

Цитата:

Сообщение от Сергей Ракипов
Я имею виду не картинку а блок вот это сделать пропорциональный который зависит от разрешение.

не понимаю.


Часовой пояс GMT +3, время: 12:22.