HTML5瀏覽器全屏代碼
HTML5 瀏覽器全屏模式使得在瀏覽器中全屏查看視頻或者圖片成為了一件非常方便的事情。現在,我們可以使用簡單的代碼來實現全屏查看。
首先,我們需要在 HTML 文件的頭部引入庫文件。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>然后,我們需要編寫一個全屏查看的按鈕。在按鈕中,我們需要定義一個全屏的 div 用于顯示內容。
<button class="full-screen-button">全屏顯示</button> <div id="full-screen-div"></div>接下來,我們需要編寫一些 CSS 樣式來設置全屏查看的按鈕的樣式。
.full-screen-button { position: fixed; top: 10px; right: 10px; z-index: 9999; } #full-screen-div { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #000; z-index: 9998; }在這個樣式中,我們設置了一個固定的位置來顯示全屏按鈕,并且使用了一個固定的背景色來顯示全屏查看的內容。 接下來,我們需要編寫一些 JavaScript 代碼來控制全屏查看的效果。
$(document).on('click', '.full-screen-button', function() { $('#full-screen-div').fadeIn(); $('body').css('overflow-y', 'hidden'); }); $('#full-screen-div').click(function() { $('#full-screen-div').fadeOut(); $('body').css('overflow-y', ''); });在這段代碼中,我們綁定了點擊全屏按鈕時的行為,并在按鈕中顯示全屏的 div。同時,我們在 div 上綁定了一個點擊事件,當用戶在全屏查看中點擊 div 時,會退出全屏查看。 總之,HTML5 瀏覽器全屏模式是一種非常便捷的方式,可以讓我們更好地觀看各種圖片和視頻,十分適合于網站設計和開發。使用上述代碼,可以輕松地在您的網站上添加全屏查看的功能。
上一篇qq網頁用css怎么做