Javascript 如何在输入范围缩放后在大图像上拖动和平移？

所以我有一个大的地图文件（只是一个大的图像），在页面加载时100%显示，然后我有一个范围滑块来放大和缩小，我已经正常工作了。但是，我不确定在放大图像后如何添加平移（用鼠标单击并拖动）。如何在用户放大后向图像添加平移？如果可能的话，也可以使用鼠标左键或单击并按住滚轮进行拖动

我做了一些搜索，但没有找到一个将其与范围滑块一起使用的示例，也没有找到包含jQuery的示例。我只想用香草JS

css

html

---

谢谢

好吧，我想它是如何工作的，新的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';
    }

希望它能放大和缩小当前/最后的位置。。出于某种原因，它总是缩放到左上角

    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;

    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';
    }