html - 将一个 div 的内容拆分为 2 个部分

Question

我试图实现拆分整个内容以创建幻灯片。与此类似。

http://tympanus.net/Tutorials/FullscreenSlitSlider/

问题是平均分配部门。我只是不希望它们看起来是分开的，但实际上是分开的，第一个 div 包含所有内容，但只有实际内容的前 50% 高度，第二个 div 包含所有内容，但只有原始 div 的底部 50% 高度。

这是我目前所拥有的。

.container {
    position: absolute;
    width: 100%;
    height: 20%;
}
.slide1, .slide2 {
    width: 100px;
    height: 50%;
    /*height: 100%;*/
    overflow: hidden;
    position: absolute;
    color: #AAA;
}

.slide1 {
    background: #F00;
}
.slide2 {
    top: 50%;
    background: #0F0;
}

这是一把 fiddle link .

更新:This是我想要的最终结果。这只是一个看起来好像第二个 div 被拆分的快速 hack。

Answer 1

如果您刚刚查看了您提供的演示站点中的源代码，您可能已经看到了这段代码:

<script type="text/javascript" src="js/jquery.slitslider.js"></script>

如果你用谷歌搜索 jquery slitslider，你得到的第一个链接是 FULLSCREEN SLIT SLIDER WITH JQUERY AND CSS3