我正在制作横幅,你可以用jquery滑动功能缩放图像,你可以拖动图像。
图像必须留在de div中。因此,当我缩小图像时,需要留在div中。
对于该代码我使用:
jQuery的:
var previousValueL = 30;
var previousValueT = 45;
jQuery顶部的2个变量。我得到30和45因为。图像的边距为30px,边距为45px。
if (sliderValue < previousValueL) {
var l;
l = $img.position().left;
if (l < 30) l = l + (previousValueL - sliderValue);
$img.offset({
left: l
});
}
previousValueL = sliderValue;
if (sliderValue < previousValueT) {
var t;
t = $img.position().left;
if (t < 45) t = t + (previousValueT - sliderValue);
$img.offset({
top: t
});
}
previousValueT = sliderValue;
此代码适用于缩小时。
您也可以使用此示例:
http://jsfiddle.net/DennisBetman/tnaGA/
希望有人可以帮助我,
丹尼斯。
答案 0 :(得分:3)
其中一个问题是使用位置。 Position返回元素相对于其父元素的坐标。父母可能有自己的偏移。因此,将偏移设置为相对于父级的坐标可能会导致奇怪的位置。
我将代码更改为使用偏移量。 http://jsfiddle.net/tnaGA/51/
if (sliderValue < previousValueL) {
var l;
l = $img.position().left;
if (l < 30) l = $img.offset().left+ (previousValueL - sliderValue);
$img.offset({
left: l
});
}
previousValueL = sliderValue;
if (sliderValue < previousValueT) {
var t;
t = $img.position().left;
if (t < 45) t = $img.offset().top + (previousValueT - sliderValue);
$img.offset({
top: t
});
}
我仍然不完全喜欢这个结果,因为图像的大小会跳跃,所以有时会看到一些黑色的背景。我不知道为什么会发生这种情况。