2

如果您可以使用 jquery 幻灯片功能缩放图像并且可以拖动图像，我正在制作横幅。

它的工作完美，除了 1 件事。当您使用图像下方的幻灯片放大图像时，它可以完美运行。您可以根据需要拖动图像。但是当你想用滑动功能再次缩小时。图像正在向顶部和左侧移动。

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

对于我使用的代码：

jQuery：

var previousValueL = 30;
var previousValueT = 45;

jQuery 顶部的 2 个变量。我得到了 30 和 45，因为。图像从 30px 获得了 margin-left 和从 45px 获得了 margin-top。

        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/

希望有人可以帮助我，

丹尼斯。

4

1 回答 1

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
         });
     }

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

于 2013-05-06T16:03:10.260 回答