Cx330/DreamLife_HomePage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

为界面添加全屏按钮

Browse Source
This commit is contained in:
张梦南 2025-04-14 20:23:51 +08:00
parent 87d425cbd3
commit a122cd3d2b
5 changed files with 71 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/body.css
View File

@ -41,3 +41,21 @@ body {
margin: 10px; margin: 10px;
text-align: center; 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% */
}

BIN
icon/full.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
icon/off.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

5
index.html
View File

@ -13,6 +13,10 @@
</head> </head>
<body> <body>
<button id="fullscreen-button" class="fullscreen-btn">
<span class="icon"><img src="icon/full.png" width="30px"></span>
</button>
<div class="main-layout"> <div class="main-layout">
<!-- 左侧内容 --> <!-- 左侧内容 -->
<div class="left-panel"> <div class="left-panel">
@ -69,6 +73,7 @@
<script src="javascape/max_width.js"></script> <script src="javascape/max_width.js"></script>
<script src="javascape/marked.min.js"></script> <script src="javascape/marked.min.js"></script>
<script src="javascape/purify.min.js"></script> <script src="javascape/purify.min.js"></script>
<script src="javascape/full_button.js"></script>
</body> </body>
</html> </html>

48
javascape/full_button.js Normal file
View File

@ -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 = '<img src="./icon/off.png" width="30px">'; // 退出全屏图标
} else {
button.querySelector('span').textContent = '全屏';
button.querySelector('.icon').innerHTML = '<img src="./icon/full.png" width="30px">'; // 全屏图标
}
});
}
// 绑定点击事件
fullscreenButton.addEventListener('click', toggleFullscreen);
sidebarFullscreenButton.addEventListener('click', toggleFullscreen);