同时将屏幕和其他div移出屏幕

问题描述：

我正在构建移动Web应用程序（APK未链接），并且我知道如何编译。但我想给它一个真正的应用程序的感觉（效果）。同时将屏幕和其他div移出屏幕

我有这个至今：

有没有一种方法，使左边，而另一个DIV幻灯片有权在其位置上填写当我点击的类别是整个DIV幻灯片？我正在寻找一些简单的代码来做到这一点，但我会采取任何行动。

谢谢！

在这种情况下，我会建议jQuery Mobile的，因为它拥有所有你想要的功能。 http://demos.jquerymobile.com/1.4.5/transitions/ –

您可以在第一个div上设置每个div'min-width：100％;'并控制'margin-left：'。所以当你想让它滑出来时，第一个div从'margin-left：0％;'到'margin-left：-100％;''你可以在container/wrapper/parent上使用'display：flex;'所以它们不会相互堆叠（堆叠在另一个之上），因为flex的默认值是'flex-direction：row;'和'flex-wrap：nowrap'其他方式去解决它。 –

这将是很好，如果我们可以看到一些代码 –

答

基于我的评论这里是一些基本的代码，让你开始。

$('.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/

同时将屏幕和其他div移出屏幕

相关推荐