Функция как в картах Гугл и Яндекс
Я не знаю как правильно называется это функция, но смысл ее заключается в том что когда зажимаешь клик на карте то карту можно перемешать в любое направление.
И вот нужно сделать так что бы фоновая картинка тоже меняла свою позицию в зависимости от того куда я ее перемещаю с помощью зажатого клика. Возможно есть какие то готовые библиотеки или решение не такое сложное как я думаю, прошу помощи. Возможно лучше сделать что бы картинка была не фоне а просто картинкой, я не знаю.
<!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>
|
Сергей Ракипов,
https://javascript.ru/forum/dom-wind...tml#post504886 |
рони,
Спасибо это интересная функция я сохранил. Но мне нужно не то. Я не знаю как можно объяснить. Вот карты https://yandex.ru/maps/54/yekaterinb...56.851369&z=12 И если один раз кликнуть и зажать то можно перетаскивать эту карту. |
Цитата:
|
Цитата:
|
просмотр перетаскиванием
Сергей Ракипов,
<!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>
|
рони,
Как всегда признателен, большое спасибо за помощь. Скажите а что это часть кода значит
el.addEventListener( "pointerdown", pointerHandler );
el.querySelector( "img" ).addEventListener( "load", _ => el.scrollTo(
700,
750
) )
} )
|
И еще сейчас проверил на мобильной телефоне. В моей голове зажатый клик и зажатый палец на экране это одно и тоже.
Но на телефоне не работает, но то есть как не работает, вроде картинку двигает но делает это плохо. Вот загрузил себе на сайт. https://rakipov.ru/testik/map/ |
Цитата:
|
Цитата:
touch-action :none; |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Если это возможно, можно еще прикрепить код который бы масштабировал карту двумя кнопками и мышью
И кончено же в пределах самого блока который в котором находится карта и не делал изображение больше чем его реальные размеры. |
<!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>
|
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>
|
рони,
Не нужно ни каких полос. Нужно что бы картинка была в 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>
|
Цитата:
|
Сергей Ракипов,
изображение 2000*2000 нет у вас такого изображения, попробуйте сделать, может и полоса исчезнет. либо нужно менять размеры окна просмотра. |
рони,
не внимательность :( Спасибо рони, |
Цитата:
<!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>
|
Сергей Ракипов,
полоса снизу примерно 4 миллиметра остаётся, |
Цитата:
|
Сергей Ракипов,
обновите эту страницу |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
рони,
Как всегда спасибо тебе добрый человек :) |
Сергей Ракипов,
добавил класс для кнопок, пост тот-же #22 |
Цитата:
|
Посмотрел, как идеально все сделано!!!
|
рони,
А получается что скрипт работает так. Масшат идет от верхнего левого угла. А как сделать что бы он масштабировался в большую или меньшую сторону от тогда месте который сейчас находится в блоке. Понимаю что это сложно сделать. То хотя бы от центра шел масштаб. |
Цитата:
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);
}
А можно сделать что бы зум шел от того мета который при просмотре в блоке |
И как я понял за центровку изображение отвечает вот эта часть
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
);
Просто она не совсем по центру |
что то я не много поплыл, а что отвечает за высоту блока
Понял это вот тут
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;
А можно сделать так что бы сохранять пропорции в зависимости от разрешения. |
Цитата:
|
Я имею виду не картинку а блок вот это сделать пропорциональный который зависит от разрешение.
.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;
}
|
Цитата:
|
| Часовой пояс GMT +3, время: 12:56. |