簡單的jQuery Zoom插件中的中心圖像

Question

我正在嘗試編寫一個非常非常簡單的縮放插件，該插件應該只有一個按鈕可以放大，縮小，以及平移功能來移動圖像。

現在，我已經編寫了要放大和縮小的部分。

我的問題是我找不到在“縮放框”內將圖像居中的方法。

到目前為止，這是我的代碼：

$.fn.zoom = function() {

    var img = this;

    img.attr("style", "-ms-transform: scale(1); -ms-transform-origin: 0% 0%; -webkit-transform: scale(1); -webkit-transform-origin: 0% 0%").wrap('<div style="width: 400px; height: 400px; overflow: hidden;" class="zoombox" data-scale="1"></div>');


    $("body").on("click.zoom", ".zoomin, .zoomout", function() {

        if( $(this).hasClass("zoomin") ) {
            var zoomFactor = (Number(img.parent().attr("data-scale")) + 0.1).toFixed(1);
        } else {
            var zoomFactor = (Number(img.parent().attr("data-scale")) - 0.1).toFixed(1);
        }


        img.parent().attr("data-scale", zoomFactor);
        console.log(zoomFactor);

        img.css({"-webkit-transform": "scale(" + zoomFactor + ")", "-ms-transform":"scale(" + zoomFactor + ")"});        
    });

  };

小提琴：
http://jsfiddle.net/xM7r4/1/

我知道樣式不是最好的樣式，但是我只是想讓它起作用而無需考慮代碼樣式。

我如何才能將圖像居中放置在框內，以為以后必須應用平移效果來改變transform-origin值？

PS：我現在只在乎Chrome和IE9的兼容性。

Answer 1

編輯評論

你是對的。 在這里，我已經更新為可以使用transform-origin 。 它獲取包含div的尺寸並將其除以2（以獲取包含div的中心點），並將其傳遞到圖像的css transform-origin屬性中：

http://jsfiddle.net/xM7r4/23/

我已經測試了不同尺寸的圖像，並且可以正常工作。

---

原版的

您需要根據要放大還是縮小使用margin-left margin-top和上margin-top上移圖像。

http://jsfiddle.net/xM7r4/21/

由於您要按1％的比例增加圖像，因此您需要相應地移動頁邊距，對於放大而言為負，對於縮小而言為位置。

$("body").on("click.zoom", ".zoomin, .zoomout", function() {
    var imgWidth = $(img).width();
    var imgHeight = $(img).height();
    var scaleWidth = Math.floor(imgWidth * 0.01);
    var scaleHeight = Math.floor(imgHeight * 0.01);       

    if( $(this).hasClass("zoomin") ) {
        var zoomFactor = (Number(img.parent().attr("data-scale")) + 0.1).toFixed(1);
        moveLeft -= scaleWidth;
        moveTop -= scaleHeight;


    } else {
        var zoomFactor = (Number(img.parent().attr("data-scale")) - 0.1).toFixed(1);
        moveLeft += scaleWidth;
        moveTop += scaleHeight;
    }
    console.log(moveTop);
        console.log(moveLeft);

    img.parent().attr("data-scale", zoomFactor);
    console.log(zoomFactor);
        img.css({"-webkit-transform": "scale(" + zoomFactor + ")", "-ms-transform":"scale(" + zoomFactor + ")", "marginLeft": moveLeft, "marginTop": moveTop});        
});