javascript - 输入范围缩放后如何在大图像上拖动和平移?
问题描述
所以我有一个大地图文件(只是一个大图像),在页面加载时显示为 100%,然后我有范围滑块来放大和缩小,我可以正常工作。但是,我不确定如何在图像放大后添加平移(用鼠标单击并拖动)。用户放大后如何向图像添加平移?如果可能的话,也可以使用鼠标左键或单击并按住滚轮进行拖动。
我进行了一些搜索,但没有找到将其与范围滑块一起使用或具有 jQuery 的示例。我想只使用香草JS。
css
#map {
cursor: grab;
width: 100%;
min-width: 100%;
max-width: 8500px;
}
#map-slider-div {
position: fixed;
bottom: 15px;
width: 100%;
text-align: center;
}
#map-div {
text-align: center;
}
html
<div id="map-div">
<img id="map" src="worldmap.png" alt="">
</div>
<div id="map-slider-div">
<input id="map-slider" type="range" min="300" max="8500" value="300">
</div>
JS
const init = () => {
let mapSlider = document.querySelector('#map-slider');
mapSlider.addEventListener('change', zoomMap);
}
const zoomMap = () => {
let map = document.querySelector('#map');
let mapSliderVal = document.querySelector('#map-slider').value;
map.style.width = mapSliderVal + 'px';
}
window.onload = init;
谢谢!
解决方案
好的,它可以按照我想要的方式工作,新的 init 方法:
const init = () => {
let mapSlider = document.querySelector('#map-slider');
mapSlider.addEventListener('change', zoomMap);
let map = document.querySelector('#map');
let mapDiv = document.querySelector('#map-div');
map.addEventListener('mousedown', start_drag);
mapDiv.addEventListener('mousemove', while_drag);
mapDiv.addEventListener('mouseup', stop_drag);
var img_ele = null,
x_cursor = 0,
y_cursor = 0,
x_img_ele = 0,
y_img_ele = 0;
function start_drag() {
img_ele = this;
x_img_ele = window.event.clientX - map.offsetLeft;
y_img_ele = window.event.clientY - map.offsetTop;
}
function stop_drag() {
img_ele = null;
}
function while_drag() {
var x_cursor = window.event.clientX;
var y_cursor = window.event.clientY;
if (img_ele !== null) {
img_ele.style.left = (x_cursor - x_img_ele) + 'px';
img_ele.style.top = (window.event.clientY - y_img_ele) + 'px';
console.log(img_ele.style.left + ' - ' + img_ele.style.top);
}
}
}
但是有什么办法可以让图像不能从屏幕边缘移开吗?如果您在图像的底部并尝试缩小地图有时会消失。或者也许以某种方式在缩放时重置图像的坐标?
编辑:也回答了这个......无论如何都足够接近。在每次缩放时重置图像的顶部和左侧,使其永远不会完全消失:
const zoomMap = () => {
let map = document.querySelector('#map');
map.style.top = 0;
map.style.left = 0;
let mapSliderVal = document.querySelector('#map-slider').value;
map.style.width = mapSliderVal + 'px';
}
不过希望它可以放大和缩小当前/最后一个位置。由于某种原因,它总是放大到左上角?
推荐阅读
- c - 我对计算机语言 C 的任务有疑问
- javascript - 我怎样才能做一个切换功能
- java - 如何修复原因:java.lang.IllegalArgumentException:找不到类 com.moniesta.manufactoring.domain.Price 的 id 属性
- python - python写入excel覆盖单元格
- coq - 在 Catalina 上通过 nix 安装 mathcomp 8.12/8.13 时出现问题
- c++ - 给定一个包含 N 个整数的数组 A,返回 A 中未出现的最小正整数(大于 0)
- latex - 章节中每一页的页码保持在中心
- vim - 有没有办法在 ctags 中使用相同的标签名称?
- c - 错误:未声明边缘(函数中首次使用)
- java - 如何从android的内部类内部打破for循环?