Question

我有一个用jQuery编写的图像滑块。我需要将图像分成两组（如杂志）所以我有类.pageLeft和.pageRight应用左边距或右边距等于容器的宽度减去页面的宽度img（.page类）。我希望能够全屏显示此滑块并动态计算和更改.page的宽度和.pageLeft / .pageRight类的边距值。有什么方法可以做到这一点，还是我认为这一切都错了？

我认为这样做的最好方法是直接将类写入DOM，但是每次我都必须清空并添加。

这是我想说的一个例子

nPageWidth = 768;
nPageWidthPlusMargin = ($('#container').width() / 2);
nPageMargin = nPageWidthPlusMargin - nPageWidth;

然后使用该值更改css中类的margin-left = nPageMargin。

对不起，如果这是一个令人困惑的问题。谢谢你的时间。

编辑：我尝试这样做的主要原因是通过将图像的宽度设置为3：4来保持图像的宽高比，图像的高度设置为100％容器。

Answer 1

我认为你应该使用百分比作为边距而不是像素值。

$("#container .pageLeft").css("margin-right", "5%");
$("#container .pageRight").css("margin-left", "5%");

编辑然后您不必一次又一次地计算边距。

编辑仅限CSS：

#container .pageLeft {
  margin-right: 5%;
}
#container .pageRight {
  margin-left: 5%;
}

Answer 2

计算边距的目的是使页面居中吗？在这种情况下，您可以将两个页面包装在一个包装器中，为该包装器指定一个显式宽度，并将包装器的左右边距设置为auto。

然后您不必担心计算边距。只需确保包装器具有正确的宽度。根据您的设计，这个宽度甚至可以设置为容器的百分比。包装页面也是如此，它们可能有width: 50%。这样你甚至不需要Javascript：）

小提琴：http://jsfiddle.net/F4ktm/

jQuery - 动态更改css类的值

2 个答案: