jQuery - 动态更改css类的值-Java 学习之路

我有一个用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％ .

2 回答

0

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

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

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

回复于 2024-04-27T21:18:39+08:00

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

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

EDIT 然后您不必一次又一次地计算边距 .

EDIT 仅限CSS：

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

回复于 2024-04-27T21:18:39+08:00

jQuery - 动态更改css类的值

2 回答

相关问题