因此,我有一个较大的地图文件(只是一个大图像),该文件在页面加载时显示为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;
谢谢!