Страница 2 из 6 < 1 2 34 > Последняя »
Показывать 40 сообщений этой темы на одной странице

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)

Сергей Ракипов 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 нет у вас такого изображения, попробуйте сделать, может и полоса исчезнет.
либо нужно менять размеры окна просмотра.


Часовой пояс GMT +3, время: 01:18.
Страница 2 из 6 < 1 2 34 > Последняя »
Показывать 40 сообщений этой темы на одной странице