我正在处理一个图片库,我想在其中以相同的尺寸显示所有缩略图并隐藏任何溢出,但是在鼠标悬停时,用户可以通过在缩略图父元素,而图像跟踪其移动。
jQuery 用户界面:
$( '#targetElement' ).mousemove(function( event ) {
$( "#position img" ).position({
my: "center",
of: event,
collision: "none"
});
});
CSS:
#targetElement {
width: 200px;
height: 150px;
border: 1px solid #333;
overflow: hidden;
margin: 50px auto;
}
.positionDiv {
width: 200px;
height: 150px;
position: relative;
}
.positionDiv img {
min-height: 150px;
max-width: 200px;
position: absolute;
top: -50%;
}
HTML:
<div id="targetElement">
<div class="positionDiv" id="position"><img src="http://er.pe/server/php/files/thumbnail/ill_09.jpg"></div>
</div>
请参阅 JSFiddle 我目前的进度。
我想做的是设置垂直边界,使图像的边缘不能越过其父元素的垂直边界。
这可能吗?
最佳答案
我不太明白你在图像父元素的边界内设置边界是什么意思,因为你已经在使用溢出隐藏并且大部分图像在拖动时已经越过边界..也许你可以澄清你的意思想要我。
但这里有一个基本示例,说明如何使用“jquery-ui-draggable”让图像保持在边界内。也许您可以修改它来完成您的设计。
这是一个例子:
var right = 0;
var bottom = 0;
var top = 0;
var left = 0;
adjustment = 5;
$( "img" ).draggable({
start: function ( event, ui ) {
bottom = $(this).parent().parent().height();
right = $(this).parent().parent().width();
},
drag: function( event, ui ) {
if(ui.position.top <= top-adjustment)
ui.position.top = top-adjustment;
if(ui.position.left <= left-adjustment)
ui.position.left = left-adjustment;
console.log(ui.position.left);
if(ui.position.left+$(this).width() >= right+adjustment)
ui.position.left = right-$(this).width()+adjustment;
if(ui.position.top+$(this).height() >= bottom+adjustment)
ui.position.top = bottom-$(this).height()+adjustment;
}
});
http://jsfiddle.net/trevordowdle/B5f5M/
更新
关于javascript - jQuery UI .position() 带边界的鼠标事件跟踪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22717132/