bugfix> javascript > 投稿

私はビデオを表示する必要があり、ユーザーがメニューを押すと、画面を垂直に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に追加しない場合のみ、期待どおりに機能します。誰でもこの問題を解決するのを手伝ってください。

回答 2 件
  • #mid を設定しています   display:block に戻る  代わりに目的の display: flex に ...代わりに:

    CSSクラス .hidden {display: none;} を作成する  それを #mid に割り当てます  素子

    JSでは Element.classList を使用します  そしてそれは .toggle() です  その 'hidden' を切り替える方法  クラス

    #vid を設定   z-inedx: -1 へ  それはバックグラウンド あなたの#mid  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>
    
    

  • わかりました。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;

    希望が役立ちます:)

あなたの答え