从光标位置缩放图像 [英] Zoom image from the cursor position

问题描述

我从DIV中的图像开始，我想用鼠标滚轮放大图像.一切正常，但是放大开始于图像的xy0，这不是我想要的.我想从光标位置进行缩放. 有一种方法可以简单地在我的代码下完成吗?

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 ?

这是演示:

这是我的javascript代码，///ZOOMABLE部分:

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

推荐答案

我不明白您的问题，请进一步解释，我认为它工作正常，由于时间短，我没有检查您的整个代码，但我认为缩放功能可以正常工作.

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...

这篇关于从光标位置缩放图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！