Question

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

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

问题在于平分分裂。我只是不希望它们看起来像是分裂但实际上是用包含所有内容的第一个div分开但实际内容只有前50％的高度，而第二个div包含所有内容但只有底部50％的原始div高度

这是我到目前为止所拥有的。

.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;
}

这是一个小提琴link。

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

Answer 1

这使用jquery插件调用FULLSCREEN SLIT SLIDER 所以你不需要从草图中实现它。在这里，您可以找到如何使用它并下载库的教程。

http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/

修改

<强> CSS

* { margin: 0; padding: 0; } body { background: #222; } .reveal { width: 300px; height: 300px; margin: 50px; float: left; } .curve { background: url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px 150px, url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px -225px, #f6d9ad; background-repeat: no-repeat; -webkit-transition: background-position 0.3s ease; -moz-transition: background-position 0.3s ease; -o-transition: background-position 0.3s ease; -ms-transition: background-position 0.3s ease; transition: background-position 0.3s ease; } .curve:hover { background: url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px 210px, url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px -285px, #f6d9ad; background-repeat: no-repeat; } .reveal p { font: 45px/300px Helvetica, Arial, sans-serif; text-align: center; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .reveal:hover p { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; cursor: pointer; }

<强> HTML

<div class="reveal curve"> <p>lorem</p> </div>

Fiddle is here

Answer 2

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

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

如果您用Google搜索 jquery slitslider ，您获得的第一个链接是FULLSCREEN SLIT SLIDER WITH JQUERY AND CSS3

Answer 3

你在寻找这个..

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

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

小提琴：http://jsfiddle.net/6Kz7c/3/

修改

小提琴：http://jsfiddle.net/6Kz7c/5/

Answer 4

垂直分裂的原理也可以用于水平分割。必须稍微修改HTML布局才能使其正常工作。

HTML

<div class="container">
    <div class="slide-wrapper">
        <div class="slide1">
            <div class="slide-content">Some content that has fixed width and positioned absolutely.</div>
        </div>
        <div class="slide2">
            <div class="slide-content">Some content that has fixed width and positioned absolutely.</div>
        </div>
    </div>
</div>

这是一个工作小提琴。

http://jsfiddle.net/6Kz7c/8/

将div的内容拆分为2个分区

4 个答案: