Jquery图像幻灯片.缩小

Question

我正在制作一个横幅，你可以用jquery幻灯片函数缩放图像，你可以拖动图像。

它工作得很好，除了一件事。当你用幻灯片放大图像时，它会完美地工作。你可以把图像拖到你想要的地方。但是当你想用幻灯片功能缩小的时候。图片正在向左上方移动。

图像必须留在dediv中，所以当我缩小图像时，图像需要留在div中。

对于该代码，我使用:

jQuery:

var previousValueL = 30;
var previousValueT = 45;

jQuery顶部的2个变量。我得到了30和45，因为。图片的margin-left为30px, margin-top为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/

希望有人能帮助我，

丹尼斯

.

Answer 1

其中一个问题是位置的使用。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
         });
     }

我仍然不完全喜欢这个结果，因为图像的大小有点跳跃，所以有时背景的一些黑色是可见的。我不知道为什么现在会这样