0

我正在尝试使用 jquery 实现一种滑块。然而，这个问题是关于试图实现该功能所涉及的 CSS。

我的网站设计占据了一个宽度为 960px 的中心列。在这个布局中有一个中心元素，我希望在单击“下一步”按钮时向右滑动，同时，同一类的另一个元素从左侧滑入以占据空出的空间。我已经绘制了我想要实现的图表。替代文字 http://img714.imageshack.us/img714/692/61886077.png

在此图中，红色块是我要滑入和滑出的元素，它由向左移动以使用 jQuery 产生效果的 div 分组

我有两个主要问题：

  1. 考虑到浏览器窗口宽度可能会发生变化并且所有不是当前项目的元素都应该在屏幕外，我如何获得正确的边距值？

2.如果用户要调整边距，可以根据使用 jQuery resize() 事件返回的值动态更改边距。或者有没有使用纯 CSS 更简洁更好的方法？

4

2 回答 2

2

在中间创建一个具有 margin: auto 的 div 以便它始终居中。我猜你的（红色）盒子总是一样的大小？有这个大小的居中 div，并且溢出：隐藏。然后在这个 div 中，创建其他三个 div，它们将在固定的 div 大小而不是浏览器窗口大小内移动。

就像是：

<body style="text-align: center">
    <div id="container" style="overflow: hidden; width: 960px; height: 600px; margin: auto; position: relative">
     <div id="slider" style="width: 9999px; position: absolute">
      <div id="first" style="width: 960px; float left;"></div>
      <div id="second" ...></div>
      <div id="third" ...></div>
     </div>
    </div>
</body>

因此，您将容器设置内的滑块 div 向左移动：960px 乘以框数

于 2010-05-21T14:36:21.370 回答
0

在需要它们之前，您不能只display: none;使用红色框吗？

当它们需要移动时，您可以将盒子放在边缘，然后将它们滑上：

http://www.jsfiddle.net/Vsjay/

于 2010-05-21T19:47:55.873 回答