3

这个问题可能听起来很傻，但它让我头疼。我想做一种垂直滚动的演示，由不同的幻灯片组成；效果应该和这个网站“相似”：http: //www.soleilnoir.net/believein/#/start

我创建了一个包含不同幻灯片的无序列表：

<div id="main">
  <div id="content">
    <ul id="bg">
      <li id="slide1"> <!-- content --></li>
      <li id="slide2"> <!-- content --></li>
    <!-- and so on -->
    </ul>
  </div>
</div>

我position:fixed在页面的中心为所有幻灯片的内容（到目前为止是图像）提供了一个，以及一个不同的 z-index 来使幻灯片和图像堆叠。就像是

-----  slide 1
  §§§ image 2
-----  slide 2
  §§§ image 3
----   slide 3

等等

这当然只在某种意义上起作用：幻灯片在滚动时会显示下一张幻灯片，但之前的图像总是可见的，由于它们的固定位置而全部从流中删除。

所以我想给图像一个position:absolute（并给position:relative）<li>，但这不会让它们在页面中心“粘”在新幻灯片到达并覆盖它之前，它们当然会自然地跟随他们的父母<li>移动。

我对此完全不知所措，也不知如何在窗口中获取当前的可见列表。我查看了 jQuery 提供的所有内置函数：scrollTop(), offset().top, position().top, 我得到$(window).height(), $('#container').height(), <li>s 高度是固定的，等等，但我得到的只是元素的“绝对”位置（我的意思是，它不会随滚动），我不知道如何说幻灯片何时穿过屏幕，以便我可以做某事（但仍然不知道是什么）。

我确定我在这里遗漏了一些明显的东西。我研究了链接网站上的代码，虽然我几乎可以理解其中的所有内容，但我仍然无法弄清楚它是如何获得当前幻灯片的（此外，它的工作方式与我的不同，因为它会动态加载动画 gif 和只对每张幻灯片执行此操作。在我的每张幻灯片中，每张幻灯片都是一个包含不同元素、动画等的容器）。

$('li#slide3')例如，如果在内部视图中，我如何获得？如何解决堆叠图像问题？我是否需要将它们动态设置为“固定”，或者在每次滚动时重新计算它们的位置以便 aposition:absolute可以做到？对于这一秒，我仍然需要将每个元素的位置与一个固定点进行比较（我相信$(window).scrollTop()，到目前为止，滚动时我总是为 0），但我不知道如何。

哦，我正在使用 jQueryscroll()方法来绑定滚动，因为我还有一个导航列表可以让您跳转到所需的幻灯片，它也说明了这一点。

我希望我清楚这一点：图像必须始终保持在中心，滚动幻灯片时需要覆盖它们，而当图像被覆盖时，以下需要出现并取代它，所以我需要了解如何获取当前<li>元素的位置，比如当它在窗口的一半时，并相应地设置上一个图像。

4

2 回答 2

5

这种类型的网站使用视差效果来移动背景图像。

考虑使用jQuery Parallax 插件，例如jparallax，它可以让事情变得更容易。

但是对于整个网页，您可能想要转向jQuery Parallax Plugin，它有一个基于您提供的示例的演示页面。该演示页面也是一个教程！

还有很多网站可以为您提供更多想法，通过查看网页内部，您可以了解他们使用的视差插件类型。

编辑： Firefox 浏览器中内置了一个出色的使用工具，因此您可以在分层 3D 结构中查看任何网页。这将有助于了解该网站如何与分层背景交互。更多关于Firefox 3D 查看 这里。

编辑 2：这可能有用：如何判断 DOM 元素在当前视口中是否可见？

此外，对于您提供的网站示例，可以在他们的style.css文件中看到他们用来将图像滚动到视图后在视口中居中的方法。当然他们有 jQuery 修改这些元素，但样式确实有意义：

#main ul.bg li img.gif { position: absolute; z-index: 1; width: 996px; height: 800px; left: 50%; right: 50%; top: 50%; bottom: 50%; margin: -400px -498px; }



编辑 3：这是一个jQuery Parallax 插件，它与您的链接示例执行相同的操作，并且具有非常强大的 API。这个特定的插件具有自定义偏移的每层定位。

这是一个使用该插件的网站，其中的东西在屏幕中央排列。
这个其他网站显示此插件在选择任何要与之交互的层时没有问题。

该插件名为Stellar.js，gitHub 页面位于此处。如果您访问那里的主页，它会水平滚动...注意星星中的“ EASY ”一词，这是一种与浏览器视口边缘对齐的视差效果。当您滚动时，其他星星会在一般区域自动滚动以显示其他关键字。

于 2012-06-10T09:06:47.097 回答
-1

我看 HTML 演变，div#container 有很大的高度（li 的数量 * li 高度），li 有 display:none/block、overflow:hidden 和 0 到窗口高度之间的高度。

于 2012-06-10T09:14:50.350 回答