代码之家 › 专栏 › 技术社区 › kadina

包含视频元素时,flex属性不能按预期工作

flexbox css3 html5 css javascript

kadina · 技术社区 · 8 年前

我需要显示视频,当用户按下菜单时,我需要将屏幕垂直分成两半(彼此相邻),我需要在前半部分的中间(水平和垂直)显示文本,需要在S中显示一个列表(将使用javascript动态创建)。后半段(所有这些都应该在后台播放视频时发生。基本上菜单应该是透明的)。我创建了一个父DIV和两个子DIV,其flex如下。

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”,菜单将不显示。当视频在后台运行时,它应该显示透明屏幕(带有两个div中的字符串)。

2)出于测试目的,我评论了视频元素。然后,如果我按“M”,两个div将在顶部水平显示。

只有当我不将属性“display=none”添加到mid中时,它才会按预期工作。有人能帮我解决这个问题吗?

2 回复 | 直到 8 年前

Roko C. Buljan 8 年前

你正在设置 #mid 返回 display:block 而不是想要的 display: flex …相反:

创建CSS类 .hidden {display: none;} 把它分配给 中期 要素
在JS中使用 Element.classList 它是 .toggle() 方法来切换 'hidden' 班
集合 #vid 到 z-inedx: -1 因为它应该在背景当你的中期没有 position 集合。

var EL_mid = document.getElementById('mid')

function changeChannel(e) {
  if (e.key === 'm') {
    EL_mid.classList.toggle("hidden");
  }
}

document.addEventListener('keydown', changeChannel);

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

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

manAbl 8 年前

好的,这里是,如果您使用jquery,您可以在 display: hidden 和 display: block 或者您可以添加一个类。隐藏的具有此规则: 显示:隐藏 如果元素有或者没有,则切换onclick,如@rokotbuljan所说。

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; 我要把除数从正常流量中去掉, z-index 只是为了确保它会被放在其他沙发上…如果要添加更好的外观,请添加属性(使用必须创建的切换函数) opacity: 1; 和 opacity: 0; 所以它会淡入淡出

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

希望有帮助:)