Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 16.07.2021, 09:10
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 405

Сообщение от рони Посмотреть сообщение
пытка вывести картинку по её центру)))
То есть это координаты? а почему просто не написать center
Ответить с цитированием
  #12 (permalink)  
Старый 16.07.2021, 09:17
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 405

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

touch-action :none;
Спасибо, сработало
Ответить с цитированием
  #13 (permalink)  
Старый 16.07.2021, 11:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,978

Сообщение от Сергей Ракипов
а почему просто не написать center
я не знаю такого метода.
Ответить с цитированием
  #14 (permalink)  
Старый 16.07.2021, 11:37
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 405

Сообщение от рони Посмотреть сообщение
я не знаю такого метода.
Понял
Ответить с цитированием
  #15 (permalink)  
Старый 18.07.2021, 11:21
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 405

Если это возможно, можно еще прикрепить код который бы масштабировал карту двумя кнопками и мышью
И кончено же в пределах самого блока который в котором находится карта и не делал изображение больше чем его реальные размеры.
Ответить с цитированием
  #16 (permalink)  
Старый 19.07.2021, 07:37
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 405

<!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>
Ответить с цитированием
  #17 (permalink)  
Старый 19.07.2021, 10:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,978

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>
Ответить с цитированием
  #18 (permalink)  
Старый 19.07.2021, 11:21
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 405

рони,
Не нужно ни каких полос.
Нужно что бы картинка была в 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 (permalink)  
Старый 19.07.2021, 12:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,978

Сообщение от Сергей Ракипов
Не нужно ни каких полос.
вы пост выше читали?
Ответить с цитированием
  #20 (permalink)  
Старый 19.07.2021, 12:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,978

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как объединить фильтрацию в яндекс картах? Lalviz Общие вопросы Javascript 0 07.06.2020 19:17
Как встроить виджет яндекс карты в компонент angular6? zlodiak Библиотеки/Тулкиты/Фреймворки 0 16.08.2018 22:28
Как убрать табличку в гугл картах? Cdelphi78 Элементы интерфейса 8 08.07.2018 01:00
Вопрос по картах яндекс zerofx Events/DOM/Window 0 12.05.2015 21:33
Как вызывается функция? Мараторий Общие вопросы Javascript 3 22.01.2010 12:18