纵向屏幕有2页,但只能显示其中一页



屏幕始终是纵向的,大小是可变的。

页面将像一本书一样并排加载两页,但只显示其中一页,另一页应隐藏在左侧或右侧,具体取决于当前显示的页面。

如果显示左侧页面,应该有一种方法可以通过按钮移动到右侧页面。按下该按钮显示右侧页面后,屏幕将向该方向移动,并显示另一页面。

有人知道如何用JavaScript或CSS实现它吗。

有无数种方法可以做到这一点。最快的方法是使用滑块的jQuery插件,响应滑块会更好。

我用非常简单的CSS为您创建了这个演示,可以编辑:http://jsfiddle.net/mcamyeuq/

我使用JavaScript来检测显示的完整大小,并将它们传递给页面。

var windowWidth = $(window).width();
var windowHeight = $(window).height();
$('.slide').width(windowWidth);
$('.slide').height(windowHeight);

您可以在.sslide CSS类中将大小设置为所需大小。

使用的脚本是jQuery和Flex Slider:http://flexslider.woothemes.com

Flex Slider的优点在于它支持触摸,所以你不必按下按钮就可以进入下一步,但如果你在平板电脑等移动设备中,滑动也可以移动页面。

最新更新