Question

可能是一项简单的任务，但我不知道如何处理这个问题。

我有一个巨大的图像（图像是动态的，具有不同的宽度和高度），我希望它始终垂直居中并在我的页面上水平居中。

图像总是太大，身体无法覆盖它，所以它溢出页面，但这正是我想要和需要的。

任务1。） 我只需要自动定位它，图像的中心始终垂直并且在体内以水平方向居中。

任务2。） 我希望图像可拖动，但完全符合它的边界。所以我希望拖动图像直到我到达右上角并且它到达视口的角落，但我不希望它可以进一步拖动。

<div class="container">
   <img class="draggable" src="http://upload.wikimedia.org/wikipedia/commons/b/ba/Flower_jtca001.jpg" alt="image"/>
</div>

所以这不可能...... https://s3.amazonaws.com/f.cl.ly/items/3p2P222S2d163N1R0v2M/Screen%20Shot%202015-03-04%20at%2018.53.47.png

这应该是可能的...... https://s3.amazonaws.com/f.cl.ly/items/1i3o462l2Z3t3t3z1v0m/Screen%20Shot%202015-03-04%20at%2018.54.42.png

我该怎么做？

提前致谢，马特

Answer 1

实现它并不是那么简单，但让我们尝试一下。首先，我们需要为我们的“拖动”事件注入代码，我们强迫它不要超出我们的界限：

drag : function(e,ui) {
    //Force the helper position
    if (ui.position.left > 0) {
        ui.position.left = 0;
    }
    if (ui.position.top > 0) {
        ui.position.top = 0;
    }
}

然后是第二部分，以图像为中心。你可以通过几十种方式实现它 - 你必须要记住的是在我们的可拖动方法的“create”事件中调用它：

create: function (event, ui) {
    var img = $(".draggable")
    ,   imgWidth  = img.width()
    ,   imgHeight = img.height();

    img.css("position","absolute");
    img.css("top", Math.min(0, ($(window).height() - imgWidth / 2) + 
                                            $(window).scrollTop()) + "px");
    img.css("left", Math.min(0, ($(window).width() - imgHeight / 2) + 
                                            $(window).scrollLeft()) + "px");

}

在这里，就是这样！没那么复杂。

http://jsfiddle.net/3j40b4u1/4/

jQuery draggable。全尺寸图像可以拖曳到身体内部的边界？

1 个答案: