Question

我需要显示视频，当用户按下菜单时，我需要将屏幕垂直划分为两半（彼此相邻），我需要在上半部分的中间（水平和垂直）显示文本，并且需要在下半部分显示一个列表（将使用javascript动态创建）（所有这些都应该在后台播放视频时发生。基本菜单应该是透明的）。我创建了一个父div和2个带有flex的子div，如下所示。

HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <title>VOD</title>
        <script src='js/index.js'>
        </script>
        <style>
            html, body
            {
                height:100%
            }

            #vid
            {
                position: fixed;
                top: 50%; left: 50%;
                z-index: 1;
                min-width: 100%;
                min-height: 100%;
                width: auto;
                height: auto;
                transform: translate(-50%, -50%);
            }

            #mid {
                display: flex;
                height: 100vmin;
                justify-content: stretch;
                flex-flow: row nowrap;
                background: blueviolet;
                z-index: 2;
            }

            #mid1, #mid2 {
                flex: 1;
            }

            #mid1 {
                display: flex;
                justify-content: center;
                align-items: center;
                background: red;
                text-align: center;
            }

            #mid2 {
                display: flex;
                justify-content: center;
                align-items: center;
                background: blue;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <!--<video id='vid' src='textMotion.mp4' autoplay loop></video>-->
        <div id='mid' style="display:none">
        <!--<div id='mid'>-->
            <div id='mid1'>
                <h2>text1</h2>
            </div>
            <div id='mid2'>
                <h2>text2</h2>
            </div>
        </div>
    </body>
</html>

Javascript代码：

function changeChannel(e) {
    console.log('received keyEvent : ' + e.keyCode);
    let keyCode = e.keyCode;

    if(keyCode == 77) {
        document.getElementById('mid').style.display = 'block';
    }
}

document.addEventListener('keydown', changeChannel);

我面临以下问题。

1）如果我按'M'，菜单不会显示。当视频在后台运行时，它应该显示透明屏幕（带有2个div的字符串）。

2）出于测试目的，我评论了视频元素。然后，如果我按下'M'，则会在顶部水平显示2个div。

只有当我没有将属性“display = none”添加到mid时，它才能正常工作。任何人都可以帮我解决这个问题。

Answer 1

您将#mid设置回display:block而不是display: flex ...而是：

创建一个CSS类.hidden {display: none;}并将其分配给您的#mid元素
使用Element.classList及其.toggle()方法来切换'hidden'类
将#vid设置为z-inedx: -1，因为它应位于后台中，而 #mid 未设置position。< / LI>

＆＃13;

var EL_mid = document.getElementById('mid')

function changeChannel(e) {
  if (e.key === 'm') {
    EL_mid.classList.toggle("hidden");
  }
}

document.addEventListener('keydown', changeChannel);

＆＃13;

*{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;}

#vid {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: -1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}

#mid {
  display: flex;
  height: 100vmin;
  justify-content: stretch;
  flex-flow: row nowrap;
  background: blueviolet;
  z-index: 2;
}
#mid.hidden {
  display: none; 
}

#mid1,
#mid2 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
  text-align: center;
}
#mid1 {background: red;}
#mid2 {background: blue;}

＆＃13;

<video id='vid' src='http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' autoplay loop></video>

<div id='mid' class="hidden">
  <div id='mid1'>
    <h2>text1</h2>
  </div>
  <div id='mid2'>
    <h2>text2</h2>
  </div>
</div>

＆＃13;

Answer 2

好的，如果你使用的是jquery，你可以在display: hidden和display: block之间切换，或者你可以添加一个只有这个规则的类.hidden：display: hidden和如果元素有或没有像@RokoCBuljan那样切换onclick。

html,body {
  width: 100%;
  height: 100%;
}
#vid {
  display: block;
  position: fixed;
  bottom: 12%; left: 30%;
  background: slateblue;
  height: 300px;
  width: 360px;
}

#mid {
  display: flex;
  z-index: 1;
  height: 100vmin;
  justify-content: stretch;
  flex-flow: row nowrap;
  background: blueviolet;
}

#mid1, #mid2 {
  flex: 1;
}

#mid1 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
  text-align: center;
}

#mid2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: blue;
  text-align: center;
}

使用属性position: fixed;我得到正常流量之外的div而z-index只是为了确保它将被置于其他div之上......如果你想要添加更好的外观添加opacity: 1;和opacity: 0;的属性（使用您必须创建的切换功能），以便淡入淡出

工作笔：https://codepen.io/manAbl/pen/WJqRKR?editors=0100;

希望有帮助：）

当包含视频元素时，flex属性无法正常工作

2 个答案: