Функция как в картах Гугл и Яндекс
Я не знаю как правильно называется это функция, но смысл ее заключается в том что когда зажимаешь клик на карте то карту можно перемешать в любое направление.
И вот нужно сделать так что бы фоновая картинка тоже меняла свою позицию в зависимости от того куда я ее перемещаю с помощью зажатого клика. Возможно есть какие то готовые библиотеки или решение не такое сложное как я думаю, прошу помощи. Возможно лучше сделать что бы картинка была не фоне а просто картинкой, я не знаю. <!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:22. |