私はビデオを表示する必要があり、ユーザーがメニューを押すと、画面を垂直に2つに分割し(互いに隣接する)、前半の中央(水平および垂直)にテキストを表示し、リストを表示する必要があります(これはJavaScriptを使用して動的に作成されます)後半(これはすべて、ビデオがバックグラウンドで再生されている間に発生します。基本的にメニューは透明である必要があります)。次のように、flexを使用して親divと2つの子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に追加しない場合のみ、期待どおりに機能します。誰でもこの問題を解決するのを手伝ってください。
わかりました。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;
で 私は通常のフローとz-index
の外側にdivを取得しています 他のdivの上に配置されることを確認するだけです...より良い外観を追加する場合は、opacity: 1;
のプロパティ(作成する必要のあるトグル機能を使用)を追加します。 およびopacity: 0;
そのため、フェードインおよびフェードアウトします作業ペン:https://codepen.io/manAbl/pen/WJqRKR?editors=0100;
希望が役立ちます:)
関連記事
- Vimのワイルドカードが期待どおりに機能しない–例からバイナリ列を削除する方法は?
- ネストされた要素を介してマッピングすると、再帰関数が期待どおりに機能しない
- printoptionsフォーマッタが複素数の配列の単一の要素に対して機能しない
- ReactJS保護ルートエラー:エラー:要素タイプが無効です:文字列(組み込みコンポーネントの場合)またはクラス/関数が必要です
- 期待どおりに機能しないラベルに再開します
- 要素の予想されるインデックスが元のインデックスになるように配列をシャッフルします
- 指定されたプロパティに基づくVueレンダリング要素
- JavaWeakReferenceテストが期待どおりに機能しない
- Javascriptコールバックが期待どおりに機能しない
- JavascriptscrollTopが期待どおりに機能しない
- BorderBottomがビューの上部に追加ReactNative
- Javascriptが複数のBootstrapSelectdivを追加しましたが機能しません
- coloumnを使用して、画像のパディングが反対側の上面で重なっているのはなぜですか?
- 子要素を親要素のonclick関数に応答しないようにしますが、それ自体のコンテンツには応答します
- マテリアライズCSSで選択入力を選択オプションに動的に一致させる方法は?
- チェックボックスの値が増加または減少している間、それは1つのチェックボックスでのみ機能し、すべてのチェックボックスで機能するはずです(プレーンJavascripr)
- 関数angularjs内の変数値を更新できません
- onclickが最初のクリックで起動しない(プレーンJavascriptでのみ回答)
- Javascript:スムーズに自動水平スクロールを繰り返す
- ReactJS:ドット演算子を使用して条件付きでclassNameを追加します
#mid
を設定していますdisplay:block
に戻る 代わりに目的のdisplay: flex
に ...代わりに:CSSクラス
.hidden {display: none;}
を作成する それを#mid
に割り当てます 素子JSでは
Element.classList
を使用します そしてそれは.toggle()
です その'hidden'
を切り替える方法 クラス#vid
を設定z-inedx: -1
へ それはバックグラウンド あなたの#midposition
はありません セットする。