0

我有一个大图像，它保存在一个较小的 div 中。div 已position:absolute; top:10px; left:10px; width:563px; height:563px; z-index:200; overflow:hidden应用于它，因此只有图像的一部分可见。该 div 位于另一个 div 中，该 div 在屏幕上居中width:1000px; margin:0 auto; position:relative;

我已经应用于$('#theImage').draggable({cursor: 'move', containment: [-523,-738,361,146]});图像，这意味着它可以在 div 周围拖动，但图像的外边缘永远不会超出 div 的外边缘。（即图像的左边缘不能被拖动到 div 的左边缘之外，这同样适用于右、上和下边缘）因此图像总是完全填满 div；没有可见的背景。

当我的浏览器最大化时这工作正常，但当它不是时会改变 - 我假设包含 X 和 Y 值是从浏览器窗口而不是父 div 计算的。有什么办法可以强制它从 div 计算？（将包含设置为“父级”不起作用，因为它允许将图像拖到看不见的地方（即，现在可以将图像的每个边缘拖到 div 的相对边缘）。

4

1 回答 1

0

我有同样的问题，这是我解决它的方法：

var windowX = $( window ).width(); //determines the width of the browser window
var windowY = $( window ).height();//determines the height of the browser window
var imageX = 2000; //put the width of your image here. my image was 2000x1000
var imageY = 1000;//image height
$("#theImage").draggable({ containment: [(windowX - imageX),(windowY - imageY),0,0] });

最后一行包含左上角和浏览器宽度/高度之间的图像。希望这可以帮助！

于 2014-11-20T20:03:43.980 回答