Question

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

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

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

我有两个主要问题：

如果浏览器窗口宽度可以变化，并且所有非当前项目的元素都应该在屏幕外，我如何获得正确的边距值？

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

Answer 1

在中间创建一个div，它有margin：auto，因此它总是居中。我猜你的（红色）盒子总是一样大小？这个居中的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

Answer 2

在你需要红框之前，你不能只是display: none;吗？

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

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

即使窗口调整大小，如何使用CSS确保项目保持屏幕外？

2 个答案: