同時將屏幕和其他div移出屏幕

Question

我正在構建移動Web應用程序（APK未鏈接），並且我知道如何編譯。 但我想給它一個真正的應用程序的感覺（效果）。

我有這個至今：

有沒有一種方法，使左邊，而另一個DIV幻燈片有權在其位置上填寫當我點擊的類別是整個DIV幻燈片？我正在尋找一些簡單的代碼來做到這一點，但我會採取任何行動。

謝謝！

Answer 1

基於我的評論這裏是一些基本的代碼，讓你開始。

$('.button').click(function() { 
 
    if ($(this).hasClass('button-right')) { 
 
    $('.block1').css('marginLeft', '-100%') 
 
    } else { // hasClass button-left 
 
    $('.block1').css('marginLeft', '0%') 
 
    } 
 
})

html, body { 
 
    height: 100vh; 
 
    margin: 0; padding: 0; 
 
    background-color: green; 
 
} 
 
div { 
 
    display: flex; 
 
    height: 100%; 
 
} 
 
.container { 
 
    position: relative; 
 
    display: flex; 
 
    flex: 1; 
 
} 
 
.blocks { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex: 1; 
 
    min-width: 100%; 
 
    transition: all 0.3s ease; 
 
} 
 
.block1 { 
 
    margin-left: 0; 
 
    background-color: red; 
 
} 
 
.block2 { 
 
    background-color: yellow; 
 
} 
 
.button { 
 
    position: absolute; 
 
    top: 50%; transform: translateY(-50%); 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    width: 30px; height: 30px; 
 
    border-radius: 100%; 
 
    color: white; 
 
    background-color: black; 
 
    font-variant: small-caps; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
} 
 
.button:hover {background-color: green;} 
 
.button-left { left: 10px; } 
 
.button-right { right: 10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="blocks block1">div one (left)</div> 
 
    <div class="blocks block2">div two (right)</div> 
 
    <div class="button button-left">l</div> 
 
    <div class="button button-right">r</div> 
 
</div>

小提琴

https://jsfiddle.net/Hastig/kfbwxye8/