使用jQuery可拖动拖动div剪贴蒙版内的缩放图像?
问题描述:
我正在创建一个界面,以允许用户放大图像并在剪裁蒙版div内拖动缩放版本。使用jQuery可拖动拖动div剪贴蒙版内的缩放图像?
我有一个div 200px by 200px
,我设置了overflow:hidden on。然后我加载一个std img(<img src="etc">
)到div中,例如1000px by 1000px
。
然后我使用jQuery
$("#my-image").draggable({ containment: [-85,83,99,222] });
的数字是硬编码。到目前为止,我只能通过试验和错误找到它们...
问题是,每次我对页面进行更改(即在我的容器div上插入另一个元素),页面大小发生变化,我的硬编码[ x1,y1,x2,y2]停止正常工作。
的主要问题是,我不完全理解[X1,Y1,X2,Y2] ...
下面是关于这jQuery的文档:
http://docs.jquery.com/UI/Draggable#option-containment
我是正确的思维x1是最左边的可拖动点,x2是最右边的可拖动点? (和y1 & y2相同)?
如果是这样,动态计算它们的最佳策略是什么?
另外,任何其他快速和简单的解决方案的主要问题“拖动一个div剪贴蒙版缩放图像”将不胜感激。
答
好的。我现在有这个工作。这是如何在div剪贴蒙版内设置可拖动的图像,以便它完全动态,并且无论您如何调整页面大小,都能正常工作。
的HTML/CSS
<div id="my-mask" style="width: 200px; height: 200px; overflow: hidden;">
<img id="my-image" src="big-image.jpg" width="1000" height="1000"/>
</div>
jQuery的/ JavaScript的
// Make sure it always starts @ zero position for below calcs to work
$("#my-image").css({top: 0, left: 0});
var maskWidth = $("#my-mask").width();
var maskHeight = $("#my-mask").height();
var imgPos = $("#my-image").offset();
var imgWidth = $("#my-image").width();
var imgHeight = $("#my-image").height();
var x1 = (imgPos.left + maskWidth) - imgWidth;
var y1 = (imgPos.top + maskHeight) - imgHeight;
var x2 = imgPos.left;
var y2 = imgPos.top;
$("#my-image").draggable({ containment: [x1,y1,x2,y2] });
$("#my-image").css({cursor: 'move'});
希望这可以帮助别人!
答
$(this).draggable({
drag: function(event, ui) {
if (ui.position.top > 0) {
ui.position.top = 0;
}
var maxtop = ui.helper.parent().height() - ui.helper.height();
if (ui.position.top < maxtop) {
ui.position.top = maxtop;
}
if (ui.position.left > 0) {
ui.position.left = 0;
}
var maxleft = ui.helper.parent().width() - ui.helper.width();
if (ui.position.left < maxleft) {
ui.position.left = maxleft;
}
}
});
这太棒了。你帮我肯定! – esvendsen 2011-09-21 14:54:06
谢谢,这很好。我希望js仍然是最新的,因为这为我解决了一个真正的问题。 – monotasker 2013-05-30 01:37:33
你让我的一天!设置@zero位置非常重要。我正在处理一个放大的图像,加上'transform:scale(2)';' CSS属性,所以我也必须设置'transform-origin:left top 0px;'并且比它正常工作! – 2017-11-24 16:59:55