Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.07.2021, 11:48
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 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: 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 в 11:54.
Ответить с цитированием
  #2 (permalink)  
Старый 13.07.2021, 14:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,980

Сергей Ракипов,
https://javascript.ru/forum/dom-wind...tml#post504886
Ответить с цитированием
  #3 (permalink)  
Старый 14.07.2021, 07:11
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 405

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

Но мне нужно не то.
Я не знаю как можно объяснить.
Вот карты https://yandex.ru/maps/54/yekaterinb...56.851369&z=12
И если один раз кликнуть и зажать то можно перетаскивать эту карту.
Ответить с цитированием
  #4 (permalink)  
Старый 14.07.2021, 10:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,980

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

Сообщение от рони Посмотреть сообщение
код выше позволяет это сделать ... сами, либо ждите.
Спасибо у меня не получатся сообразить как из этого кода сделать то что мне нужно
Ответить с цитированием
  #6 (permalink)  
Старый 14.07.2021, 15:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,980

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

<!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 в 12:01. Причина: touch-action :none; добавлено
Ответить с цитированием
  #7 (permalink)  
Старый 16.07.2021, 06:48
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 405

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

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

el.addEventListener( "pointerdown", pointerHandler );
                el.querySelector( "img" ).addEventListener( "load", _ => el.scrollTo(
                    700,
                    750
                ) )
            } )
Ответить с цитированием
  #8 (permalink)  
Старый 16.07.2021, 07:09
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 405

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

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

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

Последний раз редактировалось Сергей Ракипов, 16.07.2021 в 07:12.
Ответить с цитированием
  #9 (permalink)  
Старый 16.07.2021, 08:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,980

Сообщение от Сергей Ракипов
что это часть кода значит
пытка вывести картинку по её центру)))
Ответить с цитированием
  #10 (permalink)  
Старый 16.07.2021, 08:43
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,275

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

touch-action :none;
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как объединить фильтрацию в яндекс картах? 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