13.07.2021, 11:48
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
|
Функция как в картах Гугл и Яндекс
Я не знаю как правильно называется это функция, но смысл ее заключается в том что когда зажимаешь клик на карте то карту можно перемешать в любое направление.
И вот нужно сделать так что бы фоновая картинка тоже меняла свою позицию в зависимости от того куда я ее перемещаю с помощью зажатого клика.
Возможно есть какие то готовые библиотеки или решение не такое сложное как я думаю, прошу помощи.
Возможно лучше сделать что бы картинка была не фоне а просто картинкой, я не знаю.
<!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.
|
|
13.07.2021, 14:41
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
|
|
14.07.2021, 07:11
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
рони,
Спасибо это интересная функция я сохранил.
Но мне нужно не то.
Я не знаю как можно объяснить.
Вот карты https://yandex.ru/maps/54/yekaterinb...56.851369&z=12
И если один раз кликнуть и зажать то можно перетаскивать эту карту.
|
|
14.07.2021, 10:37
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от Сергей Ракипов
|
|
можно перетаскивать эту карту.
|
код выше позволяет это сделать ... сами, либо ждите. |
|
14.07.2021, 11:15
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
Сообщение от рони
|
|
код выше позволяет это сделать ... сами, либо ждите.
|
Спасибо у меня не получатся сообразить как из этого кода сделать то что мне нужно |
|
14.07.2021, 15:16
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
просмотр перетаскиванием
Сергей Ракипов,
<!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; добавлено
|
|
16.07.2021, 06:48
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
рони,
Как всегда признателен, большое спасибо за помощь.
Скажите а что это часть кода значит
el.addEventListener( "pointerdown", pointerHandler );
el.querySelector( "img" ).addEventListener( "load", _ => el.scrollTo(
700,
750
) )
} )
|
|
16.07.2021, 07:09
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
И еще сейчас проверил на мобильной телефоне. В моей голове зажатый клик и зажатый палец на экране это одно и тоже.
Но на телефоне не работает, но то есть как не работает, вроде картинку двигает но делает это плохо. Вот загрузил себе на сайт.
https://rakipov.ru/testik/map/
Последний раз редактировалось Сергей Ракипов, 16.07.2021 в 07:12.
|
|
16.07.2021, 08:32
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от Сергей Ракипов
|
|
что это часть кода значит
|
пытка вывести картинку по её центру))) |
|
16.07.2021, 08:43
|
 |
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,750
|
|
|
Сообщение от Сергей Ракипов
|
|
Но на телефоне не работает, но то есть как не работает, вроде картинку двигает но делает это плохо.
|
Для того, что бы срабатывало на сенсорных экранах, добавить в CSS после строки 29
touch-action :none; |
|
|
|
