0

私はhtmlが初めてです。Alt キーとスペース キーを押したときに、Web ページの特定の div をフルスクリーンで表示することはできますか? これは私のコードです。

<!DOCTYPE html>
<html>

    <body>
        <p>This is some text.</p>
        <div style="color:#0000FF">
            <img src="./1.jpg" height="42" width="42">
        </div>
    </body>

</html>
4

2 に答える 2

-1

疑似クラスを使用しますfull-screen(webkit および mozilla 用):

:-webkit-full-screen {
  /* css rules for full screen */
}
:-moz-full-screen {
  /* css rules for full screen */
}

使用方法については、この Mozilla の記事とこの David Walshの記事を参照してください。

于 2013-08-28T07:59:57.013 に答える
-2

HTML と CSS には、要素の全画面表示モードをトリガーする手段がありません。JavaScript が唯一のオプションです。

HTML 5 では、JavaScript 用の全画面 APIが導入されています。これはまだ実験段階であるため、一部のブラウザーではプレフィックス付きのプロパティ名を使用する必要があり、他のブラウザーではまったく機能しません。

function makeFullScreen(element) {
    if (element.requestFullScreen) {
        element.requestFullScreen();
    } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.msRequestFullScreen) {
        element.msRequestFullScreen();
    } 
}

次に、イベント ハンドラーをバインドして呼び出す必要があります。

document.addEventListener('keypress', function (evt) {
  if (evt.altKey && evt.keyCode === 32) {
     makeFullScreen(document.querySelector('div')); 
  }
});

ただし、修飾キーに依存することに注意してください。私のシステムでは、alt + スペースは OS レベルで (Spotlight を開くために) キャプチャされるため、ブラウザには到達しません。

于 2013-08-28T08:03:29.583 に答える