CSS3全屏按鈕是一種非常有用的工具,它可以幫助您輕松實現網頁全屏顯示功能。
下面是一個實現CSS3全屏按鈕的示例代碼:
/* CSS樣式 */ .fullscreen { position: fixed; bottom: 20px; right: 20px; background: #000; color: #fff; padding: 10px; border-radius: 50%; cursor: pointer; z-index: 9999; } /* HTML標記 *//* JavaScript代碼 */ var fullscreenBtn = document.querySelector('.fullscreen'); var isFullscreen = false; fullscreenBtn.addEventListener('click', function() { if(!isFullscreen) { if(document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); } else if(document.documentElement.webkitRequestFullscreen) { document.documentElement.webkitRequestFullscreen(); } else if(document.documentElement.mozRequestFullScreen) { document.documentElement.mozRequestFullScreen(); } else if(document.documentElement.msRequestFullscreen) { document.documentElement.msRequestFullscreen(); } isFullscreen = true; fullscreenBtn.innerHTML = ''; } else { if(document.exitFullscreen) { document.exitFullscreen(); } else if(document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.msExitFullscreen) { document.msExitFullscreen(); } isFullscreen = false; fullscreenBtn.innerHTML = ''; } });
上面的代碼包含了CSS樣式、HTML標記和JavaScript代碼。CSS樣式定義了按鈕的樣式,HTML標記包含了按鈕的HTML代碼,JavaScript代碼實現了按鈕的點擊事件以及全屏顯示和縮小功能。
利用上面的代碼,您可以輕松地實現一個全屏按鈕,并讓您的網站實現快速全屏顯示功能。
上一篇net和php哪個簡單
下一篇netos php