Javascript 不同尺寸和方向的全屏滑动div

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

这就是我要做的

    <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
关闭
接近
接近

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

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

感谢阅读此文章，希望有人能帮助我建立这个。

---

谢谢。

您需要为每个滑块div建立两个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%;
}

质疑

html

打开滑块1

打开滑块2

打开滑块3

关闭
接近
接近

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

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>

---

这有用吗？？谢谢拉胡尔。这是一个很棒的滑块，但我不想做一个图像库滑块。谢谢。这太棒了！非常感谢你！我真的很感激。这也太棒了。非常感谢你！

$('#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');
});

<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>

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