Question

我目前正在尝试使用JQuery从https://www.dropbox.com/guide重新创建页面过渡（向左/向右滑动）。我担心我会过度思考进行过渡的过程。我正在考虑做的是：

左侧和右侧都有3个div：1个用于＆＃34;返回＆＃34;内容，1表示当前显示的内容，1表示＆＃34;下一个＆＃34;内容类似于

                [           screen   width               ]
[back div left] [displayed div left] [next div left      ]
                [back div right    ] [displayed div right] [next div right]

＆＃34;后面的div＆＃34;显示div left＆＃34;并且＆＃34;下一个div离开＆＃34;背后＆＃34;显示div右＆＃34;

然后，假设用户按下＆＃34; next＆＃34;。页面：

发送一个AJAX请求，将下一页内容加载到＆＃34;下一个div左边＆＃34;和＆＃34;下一个右边＆＃34;分别
为两个div设置动画，以便屏幕上显示div为＆＃34;下一个div为＆＃34;和＆＃34;下一个右边＆＃34;所以布局看起来像

                                     [ screen width                       ]
[back div left] [displayed div left] [next div left      ]
                [back div right    ] [displayed div right] [next div right]

＆＃34;下一个div离开＆＃34;和＆＃34;下一个右边＆＃34;显示

删除＆＃34;后退div＆＃34;和＆＃34;后退div＆＃34;
将div重命名为：
- ＆＃34;显示div left＆＃34; - ＆GT; ＆＃34;后退div＆＃34;
- ＆＃34;下一个div离开＆＃34; - ＆GT; ＆＃34;左边显示div＆＃34;
- ＆＃34;右边显示div＆＃34; - ＆GT; ＆＃34; back div right＆＃34;
- ＆＃34; next div right＆＃34; - ＆GT; ＆＃34;右边显示div＆＃34;

                [ screen   width                         ]
[back div left] [displayed div left]
                [back div right    ] [displayed div right]

将新的div（相同尺寸）添加到＆＃34;显示的div左边＆＃34;并且＆＃34;显示右对＃34;作为新的＆＃34;下一个div离开＆＃34;并且＆＃34; net div right＆＃34;这样布局与页面加载前的布局相同

                [           screen   width               ]
[back div left] [displayed div left] [next div left      ]
                [back div right    ] [displayed div right] [next div right]

稍微调整一下之后，我有一个版本可以向上/向下转换而不是左/右作为我已经上传here的测试。

问题：

我是在正确的轨道还是我在思考它？
是否有更简单的方法进行转换，而不是在显示内容的任何一侧使用2个占位符div？

提前感谢您的帮助！

使用JQuery从https://www.dropbox.com/guide转换页面

0 个答案: