div内容横排 html_html5横向滑动布局

本教程将带给大家一种html5页面布局效果。你可能已经在 Skybox 或 website of Lotta Nieminen见到过这种效果。这个页面布局是将一个大的面板放在屏幕中间，两边各有一个小的面板。在上方还有一些导航按钮，当我们点击小面板或导航按钮时，对应的面板将滑动到屏幕的中央。

我们将使用CSS 3D Transforms来横向滑动面板，如果浏览器不支持CSS 3D Transforms，那么你就只能看到默认效果。

HTML结构:

Sliding Triple View Layout with Visible Adjoining Sections

• Hate dog flop
• Stretch hopped
• Inspect anything

我们首先要做的事是检测浏览器是否支持CSS 3D Transforms。如果支持，我们就为每一个section分配class，以帮助我们正确定位下一个面板的位置。

CSS样式：

.vs-triplelayout .vs-wrapper .vs-left {

left: -70%; /* 80 - 10 */

}

.vs-triplelayout .vs-wrapper .vs-left-outer {

left: -150%; /* - 70 - 80 */

}

.vs-triplelayout .vs-wrapper .vs-current {

position: relative;

z-index: 100;

}

.vs-triplelayout .vs-wrapper .vs-right {

left: 90%; /* 80 + 10 */

}

.vs-triplelayout .vs-wrapper .vs-right-outer {

left: 170%; /* 90 + 80 */

}

为了滑动面板，我们需要一个class来控制主容器的运动。下面的例子是当主容器的class为vs-move-right时的效果。

.vs-container.vs-move-right .vs-left,

.vs-container.vs-move-right .vs-left-outer,

.vs-container.vs-move-right .vs-current,

.vs-container.vs-move-right .vs-right {

transition: transform 0.5s;

transform: translate3d(100%,0,0);

}

当transition结束后，我们重置面板的位置。当使用导航按操作时，道理是相同的。

因为面板都是使用百分比宽度，所以它是流式的布局，具有响应式特点。我们还需要使用媒体查询来设置一下不同分辨率下的字体大小和margin、padding等。

完整的代码请参考下载的文件。

本教程就到这里，希望对你有所帮助。