修改全屏按钮
This commit is contained in:
parent
584977f39d
commit
4b72d5b4c7
@ -34,12 +34,11 @@ header .toggle-menu:hover {
|
|||||||
/* 头部全屏按钮样式(仅大屏幕显示) */
|
/* 头部全屏按钮样式(仅大屏幕显示) */
|
||||||
#fullscreen-button {
|
#fullscreen-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 16px;
|
right: 12px;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 32px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
transition: top 0.3s ease,transform 0.3s ease-in-out, padding 0.3s ease-in-out; /* 平滑放大动画 */
|
transition: top 0.3s ease,transform 0.3s ease-in-out, padding 0.3s ease-in-out; /* 平滑放大动画 */
|
||||||
|
BIN
icon/full.png
Normal file
BIN
icon/full.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.3 KiB |
BIN
icon/off.png
Normal file
BIN
icon/off.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.4 KiB |
@ -21,7 +21,7 @@
|
|||||||
<div class="logo_head" id="logo_head">DreamLife|ToolBox</div>
|
<div class="logo_head" id="logo_head">DreamLife|ToolBox</div>
|
||||||
<button class="toggle-menu" id="toggle-menu">☰</button>
|
<button class="toggle-menu" id="toggle-menu">☰</button>
|
||||||
<button id="fullscreen-button" class="fullscreen-btn">
|
<button id="fullscreen-button" class="fullscreen-btn">
|
||||||
<span class="icon">⛶</span>
|
<span class="icon"><img src="icon/full.png" width="30px"></span>
|
||||||
</button>
|
</button>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
@ -35,8 +35,8 @@
|
|||||||
<nav>
|
<nav>
|
||||||
<a id="sidebar-fullscreen-button" href="#" class="sidebar-link">
|
<a id="sidebar-fullscreen-button" href="#" class="sidebar-link">
|
||||||
<div class="link-content">
|
<div class="link-content">
|
||||||
<i class="icon">⛶</i> <!-- 初始图标 -->
|
<span class="icon"><img src="icon/full.png" width="30px"></span>
|
||||||
<span>全屏</span>
|
<span class="btn-text">全屏</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
@ -33,12 +33,17 @@ function toggleFullscreen() {
|
|||||||
function updateFullscreenButton(isFullscreen) {
|
function updateFullscreenButton(isFullscreen) {
|
||||||
const buttons = [fullscreenButton, sidebarFullscreenButton];
|
const buttons = [fullscreenButton, sidebarFullscreenButton];
|
||||||
buttons.forEach(button => {
|
buttons.forEach(button => {
|
||||||
|
// 更新文字
|
||||||
|
const textElement = button.querySelector('.btn-text');
|
||||||
|
if (textElement) {
|
||||||
|
textElement.textContent = isFullscreen ? '退出' : '全屏';
|
||||||
|
}
|
||||||
if (isFullscreen) {
|
if (isFullscreen) {
|
||||||
button.querySelector('span').textContent = '退出';
|
button.querySelector('span').textContent = '退出';
|
||||||
button.querySelector('.icon').innerHTML = '↵'; // 退出全屏图标
|
button.querySelector('.icon').innerHTML = '<img src="./icon/off.png" width="30px">'; // 退出全屏图标
|
||||||
} else {
|
} else {
|
||||||
button.querySelector('span').textContent = '全屏';
|
button.querySelector('span').textContent = '全屏';
|
||||||
button.querySelector('.icon').innerHTML = '⛶'; // 全屏图标
|
button.querySelector('.icon').innerHTML = '<img src="./icon/full.png" width="30px">'; // 全屏图标
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user