0

我正在使用 jQuery 开发一个移动 Web 应用程序，我被要求将每个页面转换到下一个页面，其中页面“分成两半”，然后让上半部分向上滑动，底部向下滑动，因此揭示下一页。

我有一个小想法，但我似乎没有了解的知识：

2 带显示的画布：无，每个宽度宽度：100%，高度：50%。- 查看

将实际显示渲染到所述画布中 - 我没有丝毫想法。

Ajax 在两个画布下方的 div 中的下一页 - 检查

沿各自方向滑动画布 - 检查

将画布设置为 display: none 并将它们恢复到原始位置 - 检查

有什么想法吗？如果需要，我愿意使用 jQuery 中的任何其他框架 appart。我也愿意将我的画布想法变成其他东西。

编辑：至于澄清想象页面是一个壁橱，但是一个垂直的，所以它的门（实际页面）将分别滑入屋顶和地板（它不是最大的比较，但请耐心等待），因此让您看到壁橱的内容并与之互动（下一页）。这将一直持续到应用程序的工作流程在最后一个屏幕结束，因为没有后退按钮。

4

2 回答 2

1

我很确定我知道你想要什么。您的注册/表单过程中有多个页面，而不是旧的淡入/淡出或滑动效果，您希望上半部分向上滑动，下半部分向下滑动。为了做到这一点，我会放弃这个canvas想法。我认为目前还没有一种简单的方法可以使用画布来做到这一点。您可以尝试使用html2canvas脚本，但在渲染此类内容时它并不是 100% 准确的。

作为替代方案，我建议使用以下过程。作为前言，请确保表单中的每个步骤都有自己的容器 div（称为“step-wrap”或“step-container”之类的明显名称）。然后，当你开始动画时，首先要做的是复制当前的 step-wrap，称之为 step-wrap-animation。将原始环绕、步进环绕、a 设为height50%，并将副本放置在第一个下方，高度相同为 50%。两个 div 都应该具有隐藏溢出的样式。还要确保scrollTop将重复的 div 设置为滚动到底部，使其看起来像第一个 div 的延续。从这里开始的一切都应该一帆风顺。

其次，一旦你在第一步中完成了所有工作，就开始动画过程。您可以随心所欲地执行此操作，因为我们已经确定了拆分功能。确保在开始将两个 div 分开之前，将下一步放在上一步之后，以便它解开。

本质上，您需要做的是：

  1. 复制 div
  2. 放置两个 div（原始和副本），使两个高度都等于 50%，并且它们看起来像彼此的延续
  3. 动画顶部 div 向上，底部 div 向下

这是一个基本的小提琴，说明了这样的事情应该如何工作。单击渲染的屏幕以启动动画。

于 2012-12-27T02:25:37.010 回答
0

看看基于backbone.js的backbone.js和marionette.js 。

Backbone.js 是 MVC 框架，您可以在其中定义单独的视图。Marionette 是一个扩展，它支持基于任何你想要的区域和切换视图。在切换逻辑中，您可以轻松实现转换。非常通用的答案，但也许它会帮助您入门。

于 2012-12-27T02:26:27.443 回答