从光标位置缩放图像



我从DIV中的图像开始,我想用鼠标轮毂放大图像。一切都还可以,但是在图像的XY0开始放大,这不是我想要的..我想从光标位置放大。只需在我的代码下做到这一点吗?

这是演示:

这是我的JavaScript代码,请查看//缩放部分:

/*
*   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);

我不明白您的问题,请更多地解释,我认为它正常工作,由于短时间我没有检查您的整个代码,但是我认为Zooming功能是正常工作。

请更多地解释我...

最新更新