仿照导航博客写的Dock栏，可收起。（支持添加到其他任意网站）
代码部署
添加到 外观 – 小工具 – 主内容上面
<div class="dock-container" id="dock-container">
<div class="dock" id="dock">
<ul class="dock-icons"> <!-- 这里添加您的图标 -->
<li class="dock-icon" title="快看漫画">
<a href="https://www.kuaikanmanhua.com/" target="_blank">
<img src="https://festatic.v3mh.com/static-resource/img/20210706/tiny/logo_128x128.png" alt="快看漫画">
</a>
<span class="docktooltip">快看漫画</span>
</li>
<li class="dock-icon" title="快看漫画">
<a href="https://www.kuaikanmanhua.com/" target="_blank">
<img src="https://festatic.v3mh.com/static-resource/img/20210706/tiny/logo_128x128.png" alt="快看漫画">
</a>
<span class="docktooltip">快看漫画</span>
</li>
<li class="dock-icon" title="快看漫画">
<a href="https://www.kuaikanmanhua.com/" target="_blank">
<img src="https://festatic.v3mh.com/static-resource/img/20210706/tiny/logo_128x128.png" alt="快看漫画">
</a>
<span class="docktooltip">快看漫画</span>
</li>
<li class="dock-icon" title="快看漫画">
<a href="https://www.kuaikanmanhua.com/" target="_blank">
<img src="https://festatic.v3mh.com/static-resource/img/20210706/tiny/logo_128x128.png" alt="快看漫画">
</a>
<span class="docktooltip">快看漫画</span>
</li>
<li class="dock-icon-divider">
<hr class="dock-divider"> <!-- 移除style="display: none;" -->
</li>
<li class="dock-icon" title="快看漫画">
<a href="https://www.kuaikanmanhua.com/" target="_blank">
<img src="https://festatic.v3mh.com/static-resource/img/20210706/tiny/logo_128x128.png" alt="快看漫画">
</a>
<span class="docktooltip">快看漫画</span>
</li>
<li class="dock-icon" title="快看漫画">
<a href="https://www.kuaikanmanhua.com/" target="_blank">
<img src="https://festatic.v3mh.com/static-resource/img/20210706/tiny/logo_128x128.png" alt="快看漫画">
</a>
<span class="docktooltip">快看漫画</span>
</li>
<li class="dock-icon" title="快看漫画">
<a href="https://www.kuaikanmanhua.com/" target="_blank">
<img src="https://festatic.v3mh.com/static-resource/img/20210706/tiny/logo_128x128.png" alt="快看漫画">
</a>
<span class="docktooltip">快看漫画</span>
</li>
<li class="dock-icon" title="快看漫画">
<a href="https://www.kuaikanmanhua.com/" target="_blank">
<img src="https://festatic.v3mh.com/static-resource/img/20210706/tiny/logo_128x128.png" alt="快看漫画">
</a>
<span class="docktooltip">快看漫画</span>
</li>
<!-- 其他应用图标 -->
<li class="dock-icon-divider">
<hr class="dock-divider"> <!-- 添加分割线 -->
</li>
<li class="dock-icon close-dock" title="折叠">
<img src="https://vip.lzzcc.cn/dahai/img/dock/shou.webp" alt="关闭">
<span class="docktooltip">折叠Dock栏</span>
</li>
<li class="dock-icon" title="网站提交" style="transform: scale(1); margin-right: 5px; margin-left: 5px;"> <a
href="https://www.star8.cn/contribute" target="_blank"> <img src="https://vip.lzzcc.cn/dahai/img/dock/ti.webp"
alt="网站提交">
<span class="docktooltip">网站提交</span> </a> </li>
</ul>
</div>
</div>
<script>
// 折叠功能实现
const dockManager = (() => {
const dockContainer = document.getElementById('dock-container');
const closeButton = document.querySelector('.close-dock');
let isCollapsed = false;
function createCollapsedUI() {
const collapsedBar = document.createElement('div');
collapsedBar.className = 'collapsed-bar';
Object.assign(collapsedBar.style, {
position: 'fixed',
bottom: '20px',
left: '0',
width: '40px',
height: '40px',
background: '#2196F3',
borderRadius: '5px',
cursor: 'pointer',
boxShadow: '0 4px 12px rgba(0,0,0,0.2)',
transition: 'all 0.3s ease',
display: 'none'
});
document.body.appendChild(collapsedBar);
return collapsedBar;
}
const collapsedBar = createCollapsedUI();
function toggleDock() {
isCollapsed = !isCollapsed;
dockContainer.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
if (isCollapsed) {
dockContainer.style.transform = 'translateX(-50%) scale(0)';
dockContainer.style.opacity = '0';
setTimeout(() => {
collapsedBar.style.display = 'block';
collapsedBar.style.transform = 'translateX(20px)';
}, 300);
} else {
dockContainer.style.transform = 'translateX(-50%) scale(1)';
dockContainer.style.opacity = '1';
collapsedBar.style.transform = 'translateX(-100%)';
setTimeout(() => collapsedBar.style.display = 'none', 300);
}
// 更新提示文字
const tooltip = closeButton.querySelector('.docktooltip');
tooltip.textContent = isCollapsed ? '展开Dock栏' : '折叠Dock栏';
}
// 事件绑定
closeButton.addEventListener('click', (e) => {
e.stopPropagation();
toggleDock();
});
collapsedBar.addEventListener('click', toggleDock);
return { toggleDock };
})();
</script>
<style>
/* 合并后的CSS样式 */
.dock-container {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.dock {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(0, 122, 255, 0.3);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15),
0 0 8px rgba(0, 122, 255, 0.2);
border-radius: 5px;
padding: 2px 22px;
}
.dock-icons {
display: flex;
align-items: flex-end;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
height: 64px;
gap: 2px;
}
.dock-icon {
width: 64px;
height: 64px;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
margin: 0 2px;
will-change: transform;
}
.dock-icon img {
width: 48px;
height: 48px;
border-radius: 8px;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
cursor: pointer;
object-fit: cover;
will-change: transform;
}
.dock-icon:hover img {
transform: scale(1.25) translateY(-12px);
filter: drop-shadow(0 4px 8px rgba(0, 122, 255, 0.3));
}
.docktooltip {
position: absolute;
top: -60px;
left: 50%;
transform: translate(-50%, 0px) scale(0.95);
background: #007AFF;
color: white;
padding: 4px 12px;
border-radius: 6px;
font-size: 15px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 500;
letter-spacing: 0.2px;
opacity: 0;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.1);
white-space: nowrap;
pointer-events: none;
z-index: 999;
}
.docktooltip::after {
content: "";
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
border-width: 4px;
border-style: solid;
border-color: #007AFF transparent transparent transparent;
filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.1));
}
.dock-icon:hover .docktooltip {
opacity: 1;
transform: translate(-50%, 0) scale(1);
}
.dock-divider {
height: 40px;
width: 1px;
background: linear-gradient(to bottom,
transparent 10%,
rgba(0, 0, 0, 0.15) 50%,
transparent 90%);
margin: 0 8px;
border: none;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
}
.dock-icon::after {
content: "";
position: absolute;
bottom: -10px;
width: 48px;
height: 8px;
background: linear-gradient(to top,
rgba(0, 122, 255, 0.2),
transparent);
opacity: 0.3;
transition: all 0.3s ease;
mix-blend-mode: soft-light;
}
.dock-icon:hover::after {
opacity: 0.8;
}
.dock-container.collapsed {
transform: translateX(-50%) scale(0);
opacity: 0;
pointer-events: none;
}
.dock-container.collapsed .dock {
border: 1px solid rgba(0, 122, 255, 0.2);
box-shadow: 0 0 12px rgba(0, 122, 255, 0.15);
border-radius: 5px;
padding: 8px;
}
.dock-container.collapsed .dock-icons {
flex-direction: column;
align-items: center;
height: auto;
}
.dock-container.collapsed .dock-icon:not(.close-dock),
.dock-container.collapsed .dock-icon-divider {
display: none;
}
.dock-container.collapsed .close-dock {
transform: scale(0.9);
filter: brightness(0) invert(1);
}
.dock-container.collapsed .close-dock img {
/* transition: transform 0.3s ease; */
/* 注释掉这行 */
}
.close-dock img {
/* transition: transform 0.3s ease; */
/* 注释掉这行 */
}
.dock-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
backdrop-filter: inherit;
-webkit-backdrop-filter: inherit;
z-index: -1;
border-radius: inherit;
}
.dock-icon:hover {
margin: 0 6px;
}
</style>
© 版权声明
THE END
