我需要显示视频,当用户按下菜单时,我需要将屏幕垂直划分为两半(彼此相邻),我需要在上半部分的中间(水平和垂直)显示文本,并且需要在下半部分显示一个列表(将使用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时,它才能正常工作。任何人都可以帮我解决这个问题。
答案 0 :(得分:1)
您将#mid
设置回display:block
而不是display: flex
...而是:
.hidden {display: none;}
并将其分配给您的#mid
元素Element.classList
及其.toggle()
方法来切换'hidden'
类#vid
设置为z-inedx: -1
,因为它应位于后台中,而 #mid 未设置position
。< / LI>
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;
答案 1 :(得分:1)
好的,如果你使用的是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;
希望有帮助:)