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

Question

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

与 Google map 一样，我希望能够放大鼠标光标所在的点，但不确定执行此操作的代码。

到目前为止，我已经设置了一个 fiddle : http://jsfiddle.net/quirksmode/XrKLN/1/

任何帮助将不胜感激:-)

我的代码是:

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

});

Answer 1

我做了一些与你想要实现的非常相似的事情，我在一个 div 中有一个 div，然后使用了 child 的 left 和 top CSS 属性div 通过小 map 图像在图像中导航。