javascript - 简单的jquery缩放插件中的中心图像

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 + ")"});        
    });

  };

fiddle :
http://jsfiddle.net/xM7r4/1/

我知道这种风格不是最好的，但我只是想在不考虑代码风格的情况下让它发挥作用。

我如何才能让图像在框内居中，我想稍后我必须应用平移效果来更改 transform-origin 值？

PS:目前我只关心 Chrome 和 IE9 的兼容性。

Answer 1

编辑评论

你是对的。在这里，我已更新为使用 transform-origin。它采用包含 div 的尺寸并除以二(以获得包含 div 的中心点)并将这些传递到图像的 css transform-origin 属性中:

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

我用不同尺寸的图像进行了测试，它有效。

---

原创

您需要使用 margin-left 和 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});        
});