diff --git a/css/body.css b/css/body.css index 4e457a5..3d33fc2 100644 --- a/css/body.css +++ b/css/body.css @@ -41,3 +41,21 @@ body { margin: 10px; text-align: center; } + +/* 全屏按钮样式（仅大屏幕显示） */ +#fullscreen-button { + position: absolute; + right: 12px; + top: 7px; + background: none; + border: none; + cursor: pointer; + display: flex; + align-items: center; + transition: top 0.3s ease,transform 0.3s ease-in-out, padding 0.3s ease-in-out; /* 平滑放大动画 */ + transform-origin: center center; /* 确保放大时的中心不变 */ +} + +#fullscreen-button:hover { + transform: scale(1.20); /* 悬停时上下左右均匀放大 20% */ +} \ No newline at end of file diff --git a/icon/full.png b/icon/full.png new file mode 100644 index 0000000..bf41d6b Binary files /dev/null and b/icon/full.png differ diff --git a/icon/off.png b/icon/off.png new file mode 100644 index 0000000..109e4cf Binary files /dev/null and b/icon/off.png differ diff --git a/index.html b/index.html index 5cb6213..79746fa 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,10 @@ + +
@@ -69,6 +73,7 @@ + \ No newline at end of file diff --git a/javascape/full_button.js b/javascape/full_button.js new file mode 100644 index 0000000..241b91a --- /dev/null +++ b/javascape/full_button.js @@ -0,0 +1,48 @@ +// 获取两个全屏按钮 +const fullscreenButton = document.getElementById('fullscreen-button'); +const sidebarFullscreenButton = document.getElementById('sidebar-fullscreen-button'); + +// 绑定全屏切换事件 +function toggleFullscreen() { + if (!document.fullscreenElement) { + if (document.documentElement.requestFullscreen) { + document.documentElement.requestFullscreen(); + } else if (document.documentElement.mozRequestFullScreen) { + document.documentElement.mozRequestFullScreen(); + } else if (document.documentElement.webkitRequestFullscreen) { + document.documentElement.webkitRequestFullscreen(); + } else if (document.documentElement.msRequestFullscreen) { + document.documentElement.msRequestFullscreen(); + } + updateFullscreenButton(true); + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else if (document.webkitExitFullscreen) { + document.webkitExitFullscreen(); + } else if (document.msExitFullscreen) { + document.msExitFullscreen(); + } + updateFullscreenButton(false); + } +} + +// 更新按钮文本和图标 +function updateFullscreenButton(isFullscreen) { + const buttons = [fullscreenButton, sidebarFullscreenButton]; + buttons.forEach(button => { + if (isFullscreen) { + button.querySelector('span').textContent = '退出'; + button.querySelector('.icon').innerHTML = ''; // 退出全屏图标 + } else { + button.querySelector('span').textContent = '全屏'; + button.querySelector('.icon').innerHTML = ''; // 全屏图标 + } + }); +} + +// 绑定点击事件 +fullscreenButton.addEventListener('click', toggleFullscreen); +sidebarFullscreenButton.addEventListener('click', toggleFullscreen); \ No newline at end of file