Javascript 使用鼠标滚轮放大图像上的特定点

我正在尝试使用JS/jQuery构建一个图像缩放/平移器。到目前为止，我已经成功地使用鼠标滚轮来放大/缩小缩放，但它目前每次只放大中心点

就像谷歌地图一样，我希望能够放大鼠标光标所在的点，但我不确定要用什么代码来实现这一点

到目前为止，我对自己的进展进行了调整：

任何帮助都将不胜感激：-

我的代码是：

// Plugin to allow for button holds
jQuery.fn.mousehold = function (timeout, f) {
if (timeout && typeof timeout == 'function') {
    f = timeout;
    timeout = 100;
}
if (f && typeof f == 'function') {
    var timer = 0;
    var fireStep = 0;
    return this.each(function () {
        jQuery(this).mousedown(function () {
            fireStep = 1;
            var ctr = 0;
            var t = this;
            timer = setInterval(function () {
                ctr++;
                f.call(t, ctr);
                fireStep = 2;
            }, timeout);
        })

        clearMousehold = function () {
            clearInterval(timer);
            if (fireStep == 1) f.call(this, 1);
            fireStep = 0;
        }

        jQuery(this).mouseout(clearMousehold);
        jQuery(this).mouseup(clearMousehold);
    })
}
}


/**
* CSS3 Transform helper
*/
var cssTransformScale = function (x, y, z) {
return {
    '-webkit-transform': 'scale3d(' + x + ', ' + y + ', ' + z + ')',
        '-moz-transform': 'scale3d(' + x + ', ' + y + ', ' + z + ')',
        '-ms-transform': 'scale3d(' + x + ', ' + y + ', ' + z + ')',
        '-o-transform': 'scale3d(' + x + ', ' + y + ', ' + z + ')',
        'transform': 'scale3d(' + x + ', ' + y + ', ' + z + ')',
};

};




$(document).ready(function () {

var assetViewer = {
    name: 'assetViewer',
    defaults: {
        $assetWrap: $('#asset-wrap'),
        $assetImg: $('.asset-img'),
        imgSrc: "http://lorempixel.com/1600/760/",
        zoomScale: 0.01,
        initialZoom: 1,
        currentZoom: 1,
        maxZoom: 3,
        minZoom: 1,
        $zoomIn: $('#zoom-in'),
        $zoomOut: $('#zoom-out')
    },
    init: function (options) {
        var me = this;
        this.options = $.extend(this.defaults, options);

        this.appendImage();
        this.bindEvents();
    },
    appendImage: function () {
        var me = this;
        this.options.$assetWrap.append('<div class="asset-holder"><div class="asset-inner-wrap"><img class="asset-img" src="' + this.options.imgSrc + '" /></div></div>');
        me.options.$assetImg = $(me.options.$assetImg.selector); // Using .selector to refresh the element
    },
    bindEvents: function () {
        var me = this;

        me.options.$zoomIn.mousehold(1, function () {
            me.zoom("+", 1);
        })
        me.options.$zoomOut.mousehold(1, function () {
            me.zoom("-", 1);
        })

        me.options.$assetImg.mousewheel(function (event, delta) {
            if (delta > 0) me.zoom("+", delta);
            else if (delta < 0) me.zoom("-", Math.abs(delta)); // Forces the negative to become a positive

            return false; // prevent default
        });
    },
    zoom: function (direction, delta) {
        var me = this;

        //console.log();

        if ((me.options.currentZoom >= me.options.minZoom) && (me.options.currentZoom <= me.options.maxZoom)) {
            var scale = (direction === "+") ? me.options.currentZoom += (me.options.zoomScale * delta) : me.options.currentZoom -= (me.options.zoomScale * delta);

            // Set the Zoom Bounds
            if (me.options.currentZoom <= me.options.minZoom) {
                scale = me.options.currentZoom = me.options.minZoom;
            }
            if (me.options.currentZoom >= me.options.maxZoom) {
                scale = me.options.currentZoom = me.options.maxZoom;
            }
            me.options.$assetImg.css(cssTransformScale(scale, scale, scale));
        }

    }

}

assetViewer.init();

});

---

我做了一些与您尝试实现的非常类似的事情，我在一个div中有一个div，然后使用子div的左侧和顶部CSS属性通过一个小地图图像在图像中导航。

如果您已经使用jQuery，那么您的生活会更轻松，不要使用所有这些特定于供应商的属性，jQuery为您提供了开箱即用的功能。也不要害怕使用正确的语言标点符号。就像我们同意在我们的语言中使用它一样，ECMAScript也是如此。这里有一个更新的提琴这个答案可能会帮助你：谢谢你的建议，我没有意识到jQuery做了这件事，肯定会让事情更干净。我会查看那个链接，谢谢你的网页提示小地图是我的下一步一旦我开始缩放工作，我想你没有任何代码示例可以分享，或者如何实现这个目标的建议？抱歉dave我不知道我是否能找到相关的东西dave，我在这里为这个网站的小地图编写了初始模型，然后他们让自己的团队将其构建到他们的网站中，你可以在这里看到。我没有我写的原始代码，但你可以用firebug查询它，并获得信息日志。希望这有帮助。