不同大小和方向的全屏滑动div

Question

我一直在尝试制作不同方向和大小的全屏响应式滑动 div 元素，我通过这里找到了这种方法。

http://jsfiddle.net/jkDUm/

$(document).click(function () {
$(".page").toggleClass("in");
});

这就是我想要做的。

    <span id="button">open slider 1</span>
    <span id="button2">open slider 2</span>
    <span id="button3">open slider 3</span>

    <div id="slider">
        <span id="button4">close</span>
    </div>

    <div id="slider2">
        <span id="button5">close</span>      
    </div>

    <div id="slider3">
        <span id="button6">close</span>     
    </div> 

• 按钮 1、2、3 将是段落中的单词。
• “滑块”将从顶部向下滑动，宽度为 100%，高度为 50%。
• “slider2”将从右侧以 50% 的宽度和 100% 的高度向左滑动。
• “slider3”将从底部以 100% 和 100% 的高度向上滑动。
• 每张幻灯片都有自己的关闭按钮，只需将幻灯片移回即可。

这张图片也显示了我正在尝试做的事情。点击here

感谢您阅读本文，希望有人可以帮助我构建它。 谢谢。

Answer 1

Fiddle

JS

$('#button').click(function(){
    $('#slider').addClass('in');
});

$('#button2').click(function(){
    $('#slider2').addClass('in');
});

$('#button3').click(function(){
    $('#slider3').addClass('in');
});

$('#button4').click(function(){
    $('#slider').removeClass('in');
});

$('#button5').click(function(){
    $('#slider2').removeClass('in');
});

$('#button6').click(function(){
    $('#slider3').removeClass('in');
});

HTML

<div style="height:100%">
<span id="button">open slider 1</span>

<span id="button2">open slider 2</span>

<span id="button3">open slider 3</span>

    <div id="slider"> <span id="button4">close</span>

    </div>
    <div id="slider2"> <span id="button5">close</span> 
    </div>
    <div id="slider3"> <span id="button6">close</span> 
    </div>
</div>

CSS

html {
    height: 100%;
}
body {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin:0;
}
.page.in {
    left: 0;
    z-index: 1;
}

#slider {
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 100%;
    background: yellow;
    transition: bottom 1s;
}
#slider.in {
    bottom:50%;
}
#slider2 {
    position: absolute;
    width: 50%;
    height: 100%;
    left:100%;
    top:0;
    background: red;
    transition: left 1s;
}
#slider2.in {
    left:50%;
}
#slider3 {
    position: absolute;
    width: 100%;
    height: 100%;
    top:100%;
    background: blue;
    transition: top 1s;
}
#slider3.in {
    top:0;
}

Answer 2

您需要为每个滑块 div 建立 2 个 css 类，一个用于显示时，一个用于不显示时。然后你的代码就像点击按钮时改变元素的类一样简单。

一种可能性：

.slider {
    position: absolute;
    overflow: hidden;
}

.slider.top {
    top: -50%;
    left: 0px;
    transition: top 1s;
    height: 50%;
    width: 100%;
    background: red;
}

.slider.top.in {
    top: 0%;
}

.slider.right {
    left: 100%;
    top: 0px;
    transition: left 1s;
    height: 100%;
    width: 50%;
    background: yellow;
}

.slider.right.in {
    left: 50%;
}

.slider.bottom {
    top: 100%;
    left: 0px;
    transition: top 1s;
    height: 50%;
    width: 100%;
    background: blue;
    color: cyan;
}

.slider.bottom.in {
    top: 50%;
}

查询

$("#button").click(function(){$("#slider").addClass("in");});
$("#button2").click(function(){$("#slider2").toggleClass("in");});
$("#button3").click(function(){$("#slider3").toggleClass("in");});
$(".closebutton").click(function(){$(this).parent().removeClass("in");});

html

<p><span id="button">open slider 1</span></p>
<p><span id="button2">open slider 2</span></p>
<p><span id="button3">open slider 3</span></p>

<div id="slider" class="top slider">
    <span id="button4" class="closebutton">close</span>
</div>

<div id="slider2" class="right slider">
    <span id="button5" class="closebutton">close</span>      
</div>

<div id="slider3" class="bottom slider">
    <span id="button6" class="closebutton">close</span>     
</div> 

jsfiddle