当鼠标移动时，缩放图像到光标中断

Question

但是，当移动鼠标指针时，该功能将被破坏。

为了进一步澄清，如果我在鼠标轮上放大一个缺口，图像就会在正确的位置周围放大。这种行为在我放大鼠标轮的每一个缺口上都继续进行，完全如预期的那样。但是，如果在放大一部分后，我将鼠标移到不同的位置，功能就会中断，我必须完全缩小以改变缩放位置。

预期的行为是为了在缩放过程中鼠标位置的任何变化都能正确地反映在缩放的图像中。

self.container.on('mousewheel', function (e, delta) {
        var offset = self.image.offset();

        self.mouseLocation.x = (e.pageX - offset.left) / self.currentscale;
        self.mouseLocation.y = (e.pageY - offset.top) / self.currentscale;

        if (!self.running) {
            self.running = true;
            self.animateLoop();
        }
        self.delta = delta
        self.smoothWheel(delta);
        return false;
    });

zoom: function (scale) {

    var self = this;
    self.currentLocation.x += ((self.mouseLocation.x - self.currentLocation.x) / self.currentscale);
    self.currentLocation.y += ((self.mouseLocation.y - self.currentLocation.y) / self.currentscale);

    var compat = ['-moz-', '-webkit-', '-o-', '-ms-', ''];
    var newCss = {};
    for (var i = compat.length - 1; i; i--) {
        newCss[compat[i] + 'transform'] = 'scale(' + scale + ')';
        newCss[compat[i] + 'transform-origin'] = self.currentLocation.x + 'px ' + self.currentLocation.y + 'px';
    }
    self.image.css(newCss);


    self.currentscale = scale;
},

虽然这对于当图像完全缩小时选择的固定鼠标位置非常有效；如上所述，当鼠标光标在部分缩放后移动时，它就会中断。

事先非常感谢任何能帮忙的人。

Answer 1

其实不太复杂。您只需将鼠标位置更新逻辑与缩放更新逻辑分开即可。查看我的小提琴:http://jsfiddle.net/qggwx/41/

我在这里所做的就是在容器上添加一个'mousemove'侦听器，并将self.mouseLocation更新逻辑放入其中。由于不再需要mouseLocation更新逻辑，我还从'mouseWheel'处理程序中取出了mouseLocation更新逻辑。动画代码保持不变，何时开始/停止动画循环的决定也保持不变。

代码如下：

    self.container.on('mousewheel', function (e, delta) {
        if (!self.running) {
            self.running = true;
            self.animateLoop();
        }
        self.delta = delta
        self.smoothWheel(delta);
        return false;
    });

    self.container.on('mousemove', function (e) {
        var offset = self.image.offset();

        self.mouseLocation.x = (e.pageX - offset.left) / self.currentscale;
        self.mouseLocation.y = (e.pageY - offset.top) / self.currentscale;
    });