我正在尝试创建一个小站点（约 5 页，大部分是静态的）并希望实现在masshealth.com中实现的过渡效果。我试图寻找它，但徒劳无功。我观察到该站点仅使用一个脚本，尽管链接表明它是一个多页站点，但单击链接将它们显示为 /#page 而不是 /page 这表明它们实际上是一个大页面的一部分。
我想知道这背后究竟是什么技术，以便我可以完美地学习和实施它。
问问题
7359 次
2 回答
3
首先，您绝对应该使用 jQuery，因为它使动画创建变得更加容易。以下是你应该如何去做：
- 将整个页面内容（所有这些，正如您所说的所有页面都只是一页）放在一个包装器 div 中。
- 此包装器 div 的最大宽度应为 100% 并且溢出：隐藏
- 在主包装器内创建第二个包装器 div，但这个宽度等于所有页面的总宽度（或者更好地说是伪页面或其他东西）
- 现在每个页面都是第二个包装器内的 div 并且位置必须是绝对的（然后您应该为它们设置适当的左侧和顶部位置）。
- 第二个包装器的位置也必须是绝对的
- 并且第一个包装器的位置必须是相对的，否则任何绝对位置都不会按照您想要的方式工作。
- 现在，当您想要更改页面时，使用 jquery 为第二个包装器的 x 位置设置动画，并在 y 方向上滚动。
如果我想给你代码，那将需要很长时间，但它背后的整个想法应该是这样的（嗯，我当然希望如此：D）。
如果您在实施这个想法时遇到任何问题，请告诉
于 2013-07-11T15:11:50.720 回答
2
巧合的是，我今天也在研究同样的问题。本教程在这里很好地解释了一切。http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
于 2013-07-11T21:15:36.747 回答