纵向屏幕有2页,但只有一页应该显示

时间:2014-10-02 11:44:44

标签: javascript jquery html css

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

该页面将像书一样彼此相邻地加载2页,但只显示其中一页,另一页应隐藏在左侧或右侧,具体取决于现在显示的页面。

如果左侧页面显示,则应该有一种方法可以使用按钮移动到右侧页面。按下该按钮以显示正确的页面后,屏幕将朝该方向移动并显示另一页。

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

1 个答案:

答案 0 :(得分:1)

你可以通过无限的方式做到这一点。最快的是使用滑块的jQuery插件,响应滑块会更好。

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

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

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

$('.slide').width(windowWidth);
$('.slide').height(windowHeight);

您可以在.slide CSS类中将大小设置为您想要的任何内容。

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

Flex Slider的优点在于它启用了触控功能,因此您无需按下按钮即可进入下一步,但如果您使用平板电脑等移动设备,则滑动也可以移动页面