Zoom image from the cursor position

问题

I start with a image in a DIV, i want to zoom in the image with my mousewheel. All is ok but the zoom in start at the xy0 of the image and it is not what i want.. I want to Zoom from my cursor position. There is a way to do that simply under my code ?

Here is the DEMO :

This is my javascript Code look at the //ZOOMABLE part:

/*
*   ZOOM
*/
(function (window) {
    image(window.document.querySelector('#dropZone'), function (files) {
        //Mouse position
        function mousePosition(e) {
            var result_x = document.getElementById('x_result');
            var result_y = document.getElementById('y_result');
            result_x.innerHTML = e.clientX;
            result_y.innerHTML = e.clientY;
        }
        document.onmousemove = mousePosition;

        //Scroll position
        var scrollableElement = document.getElementById('dropZone');
        scrollableElement.addEventListener('wheel', scrollDirection);

        function scrollDirection(event) {
            var delta;
            if (event.wheelDelta) {
                delta = event.wheelDelta;
            } else {
                delta = -1 * event.deltaY;
            }
            if (delta < 0) {
                console.log("DOWN");
                $("#movable").css("width", "-=30");
                $("#movable").css("max-height", "none")
                $("#movable").css("max-width", "none")
            } else if (delta > 0) {
                console.log("UP");
                $("#movable").css("width", "+=30");
                $("#movable").css("max-height", "none")
                $("#movable").css("max-width", "none")
            }
        }
    );
})(this);

回答1:

I don't understand your problem, please explain it more, I think it is working fine, I haven't checked your whole code due to short time, but I think zooming functionality is working fine.

Kindly explain me more...

来源：https://stackoverflow.com/questions/48874842/zoom-image-from-the-cursor-position