jQuery：整页水平滑动

jQuery: full Page horizontal slide

提问by Vish

Can anyone help me with a full page slide to the left and right. I want to create a fixed header with the links and want to slide the bottom div to the left or right. sample webpage

任何人都可以帮助我向左和向右滑动整页。我想创建一个带有链接的固定标题，并希望将底部 div 向左或向右滑动。示例网页

回答by xbonez

For this example, lets say your main content is x pixels wide.

在这个例子中，假设您的主要内容是 x 像素宽。

Create a large div that is 3x pixels wide, which contains 3 inline divs x pixels wide each.

创建一个 3x 像素宽的大 div，其中包含 3 个内联 div，每个 x 像素宽。

You can now simulate the sliding by adjusting the margin-leftof the outermost div. When margin-leftis 0, the leftmost child div will be visible. When it equals-x, the middle content will show, and so on.

您现在可以通过调整margin-left最外面的 div来模拟滑动。当margin-left为 0 时，最左边的子 div 将可见。当等于 时-x，显示中间内容，以此类推。

Make sure you set overflow:hiddenfor the outer div.

确保overflow:hidden为外部 div设置。

This should be enough to get you started. Unless you were looking for someone to code it for you.

这应该足以让您入门。除非您正在寻找某人为您编码。

回答by Satish

Look at supersized, it's a jquery plugin , http://buildinternet.com/project/supersized/slideshow/3.2/demo.html

看看 supersized，它是一个 jquery 插件， http://buildinternet.com/project/supersized/slideshow/3.2/demo.html

also google for jquery full page sliders, there are tons of them

也谷歌 jquery 整页滑块，有很多

ex: http://machoarts.com/21-beautiful-jquery-sliders-for-your-next-project

例如：http: //machoarts.com/21-beautiful-jquery-sliders-for-your-next-project

回答by Nick H247

Ive used http://srobbin.com/jquery-plugins/pageslide/successfully for this purpose

为此，我已成功使用http://srobbin.com/jquery-plugins/pageslide/

though you need to set width to 100% in jquery.pageslide.css

尽管您需要在 jquery.pageslide.css 中将宽度设置为 100%