html分屏模板,使用 JavaScript 实现分屏视觉效果

上篇文章10个独特的CSS背景视觉效果中有提到分屏的视觉效果，今天这篇文章就来讲讲使用JavaScript来实现这种分屏的视觉UI效果。现在在网站上这种分屏视觉效果应用的也非常广泛，比如 Corsair website。

HTML结构

先把基础结构样式弄好，要实现这个效果，需要使用div来构建两个panel。第一个赋予bottom类，另外一个为top类。然后使用一个类名为splitview来包裹起来。

复制代码

内容区域即content可以放任何东西，图片文字等等。

然后在splitview结构外面，再添加一个div类名为handle，用来加强表示分屏的视觉效果。

复制代码

样式

首先来写两个panel的样式，要实现这个效果需要用到绝对定位，所以要确保类名为top的panel在另外一个panel的上面。还有一点是为了可以自适应设备屏幕的大小，这里使用vw这个单位。

/* Panels. */

.splitview {

position: relative;

width: 100%;

min-height: 45vw;

overflow: hidden;

}

.panel {

position: absolute;

width: 100vw;

min-height: 45v