gpt4 book ai didi

jquery - 如何使用 CSS 确保即使调整窗口大小时元素仍保持在屏幕外?

转载 作者:太空宇宙 更新时间:2023-11-04 05:31:35 24 4
gpt4 key购买 nike

我正在尝试使用 jquery 实现一种 slider 。但是,这个问题是关于尝试实现该功能所涉及的 CSS。

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

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

我有两个主要问题:

  1. 如果浏览器窗口宽度可以变化并且所有不是当前元素的元素都应该在屏幕外,我如何获得正确的边距值?

2.如果用户要调整边距的大小,则可以根据使用 jQuery resize() 事件返回的值动态更改边距。或者是否有使用纯 CSS 的更简洁、更快、更好的方法?

最佳答案

在中间创建一个 div,它有 margin: auto 以便它始终居中。我猜你的(红色)盒子总是一样大的?将这个居中的 div 设置为这个大小,然后 overflow: hidden。然后在这个 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>

因此,您将容器设置内的 slider div 向左移动:960px 乘以框数

关于jquery - 如何使用 CSS 确保即使调整窗口大小时元素仍保持在屏幕外?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2882961/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com