网页添加dock

html代码 

<!--Dock导航栏-->
<div class="ioui-content switch-container home-container sidebar_no container">
<div class="ioui-main">
<div class="content-wrap">
<div class="content-layout">
<div class="dock-container" id="dock-container" style="left: 50%;">
<div class="dock" id="dock">
<ul class="dock-icons">
<!-- 这里添加您的图标 -->
<li class="dock-icon-divider">
<hr class="dock-divider" id="dock-divider" style="display: none">
<!-- 添加分割线 -->
</li>
<li class="dock-icon" title="大海资源库">
<a href="https://vip.lzzcc.cn/" target="_blank">
<img src="https://vip.lzzcc.cn/favicon.ico"
alt="大海资源库">
<span class="docktooltip">大海资源库</span>
<!-- 添加标题元素 -->
</a>
</li>

<li class="dock-icon" title="花瓣">
<a href="https://huaban.com/follow" target="_blank">
<img src="https://navw.cn/dahai/img/huaban.png" alt="花瓣">
<span class="docktooltip">花瓣</span>
</a>
</li>

<li class="dock-icon" title="可画设计">
<a href="https://www.canva.cn/" target="_blank">
<img src="https://navw.cn/dahai/img/canva.png"
alt="可画设计">
<span class="docktooltip">可画设计</span>
</a>
</li>
<li class="dock-icon" title="喜马拉雅">
<a href="https://www.ximalaya.com/" target="_blank">
<img src="https://navw.cn/dahai/img/xima.png"
alt="喜马拉雅">
<span class="docktooltip">喜马拉雅</span>
</a>
</li>
<li class="dock-icon" title="小红书">
<a href="https://www.xiaohongshu.com/explore" target="_blank">
<img src="https://navw.cn/dahai/img/xiaohongshu.png"
alt="小红书">
<span class="docktooltip">小红书</span>
</a>
</li>
<li class="dock-icon" title="抖音">
<a href="https://www.douyin.com/" target="_blank">
<img src="https://navw.cn/dahai/img/douyin.png"
alt="抖音">
<span class="docktooltip">抖音</span>
</a>
</li>

<!-- 其他应用图标 -->
<li class="dock-icon-divider">
<hr class="dock-divider">
<!-- 添加分割线 -->
</li>
<li class="dock-icon add-app" title="添加应用">
<img src="https://navw.cn/dahai/img/dahai-添加.webp"
alt="添加应用">
<span class="docktooltip">添加应用</span>
</li>
<li class="dock-icon close-dock" title="关闭">
<img src="https://navw.cn/dahai/img/dahai-收起.webp"
alt="关闭">
<span class="docktooltip">折迭dock栏</span>
</li>
<li class="dock-icon" title="网站提交">
<a href="/contribute.html"
target="_blank">
<img src="https://navw.cn/dahai/img/dahai-提交.webp"
alt="网站提交">
<span class="docktooltip">网站提交</span>
</a>
</li>
</ul>
</div>
</div>
<div class="expand-dock" id="expand-dock" title="展开DOCK栏" style="display: none">
<i class="iconfont icon-arrow-r"></i>
</div>
<!-- 添加应用的对话框 -->
<div id="addAppModal" class="modal" style="display: none">
<div class="dockmodal-content">
<span class="close">×</span>
<h2>添加应用</h2>
<h5>添加后右键点击即可删除</h5>
<h2></h2>
<form id="appForm">
<label for="appUrl">网址链接（必填）：</label>
<input type="text" id="appUrl" name="appUrl" required="" placeholder="请填写网址链接"><br><br>
<label for="appName">网站名称（必填）：</label>
<input type="text" id="appName" name="appName" required="" placeholder="请填写网站名称"><br><br>
<label for="appIcon">图标链接（非必填）：</label>
<input type="text" id="appIcon" name="appIcon" placeholder="不填写链接自动获取网址图标"><br><br>
<input type="submit" value="添加">
</form>
</div>
</div>
<!-- 删除应用对话框 -->
<div id="customDialog" class="dialog" style="display: none">
<div class="dialog-content">
<p>确定删除该应用吗？</p>
<button id="confirmDeleteBtn">确定</button>
<button id="cancelDeleteBtn">取消</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Dock导航栏结束-->

css

/* 全局样式初始化 */ 
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
 
/* Dock容器样式 */ 
#dock-container { 
    position: fixed; 
    bottom: 20px; 
    transform: translateX(-50%); 
    z-index: 9999; 
} 
 
/* Dock主体 */ 
#dock { 
    background-color: rgba(255,255,255,0.8); 
    backdrop-filter: blur(10px); 
    border-radius: 12px; 
    padding: 8px 12px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
} 
 
/* 图标列表 */ 
.dock-icons { 
    display: flex; 
    align-items: flex-end; 
    list-style: none; 
    gap: 8px; 
} 
 
/* 分割线容器 */ 
.dock-icon-divider { 
    display: flex; 
    align-items: center; 
    padding: 0 4px; 
} 
 
/* 分割线样式 */ 
.dock-divider { 
    width: 1px; 
    height: 40px; 
    background-color: #ccc; 
    border: none; 
} 
 
/* Dock图标样式 */ 
.dock-icon { 
    cursor: pointer; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    position: relative; 
    transition: transform 0.2s ease; 
    width: 60px; 
    padding: 4px 0; 
} 
 
.dock-icon img { 
    width: 56px; 
    height: 56px; 
    border-radius: 12px; 
    object-fit: cover; 
    transition: transform 0.2s ease; 
} 
 
/* 悬停放大效果 */ 
.dock-icon:hover { 
    transform: translateY(-8px); 
} 
 
.dock-icon:hover img { 
    transform: scale(1.2); 
} 
 
/* 提示文字样式 */ 
.docktooltip { 
    opacity: 0; 
    position: absolute; 
    bottom: 72px; 
    background-color: rgba(0,0,0,0.8); 
    color: #fff; 
    padding: 4px 8px; 
    border-radius: 6px; 
    font-size: 12px; 
    white-space: nowrap; 
    pointer-events: none; 
    transition: opacity 0.2s ease; 
} 
 
.dock-icon:hover .docktooltip { 
    opacity: 1; 
} 
 
/* 展开按钮样式 */ 
#expand-dock { 
    position: fixed; 
    bottom: 20px; 
    left: 50%; 
    transform: translateX(-50%); 
    background-color: rgba(255,255,255,0.8); 
    backdrop-filter: blur(10px); 
    padding: 8px; 
    border-radius: 50%; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
    cursor: pointer; 
    z-index: 9998; 
} 
 
#expand-dock i { 
    font-size: 16px; 
    color: #333; 
} 
 
/* 弹窗通用样式 */ 
.modal, .dialog { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.5); 
    z-index: 10000; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
 
/* 添加应用弹窗内容 */ 
.dockmodal-content { 
    background-color: #fff; 
    padding: 24px; 
    border-radius: 12px; 
    width: 90%; 
    max-width: 400px; 
} 
 
.dockmodal-content .close { 
    float: right; 
    font-size: 24px; 
    font-weight: bold; 
    cursor: pointer; 
    color: #666; 
} 
 
.dockmodal-content h2 { 
    margin-bottom: 12px; 
    color: #333; 
} 
 
.dockmodal-content h5 { 
    color: #666; 
    margin-bottom: 20px; 
    font-weight: normal; 
} 
 
.dockmodal-content form label { 
    display: block; 
    margin-bottom: 6px; 
    color: #333; 
    font-size: 14px; 
} 
 
.dockmodal-content form input { 
    width: 100%; 
    padding: 8px; 
    margin-bottom: 16px; 
    border: 1px solid #ddd; 
    border-radius: 6px; 
    font-size: 14px; 
} 
 
.dockmodal-content form input[type="submit"] { 
    background-color: #007bff; 
    color: #fff; 
    border: none; 
    cursor: pointer; 
    transition: background-color 0.2s ease; 
} 
 
.dockmodal-content form input[type="submit"]:hover { 
    background-color: #0056b3; 
} 
 
/* 删除确认弹窗内容 */ 
.dialog-content { 
    background-color: #fff; 
    padding: 24px; 
    border-radius: 12px; 
    text-align: center; 
} 
 
.dialog-content p { 
    margin-bottom: 20px; 
    font-size: 16px; 
    color: #333; 
} 
 
.dialog-content button { 
    padding: 8px 16px; 
    margin: 0 8px; 
    border-radius: 6px; 
    border: none; 
    cursor: pointer; 
    transition: background-color 0.2s ease; 
} 
 
#confirmDeleteBtn { 
    background-color: #dc3545; 
    color: #fff; 
} 
 
#confirmDeleteBtn:hover { 
    background-color: #c82333; 
} 
 
#cancelDeleteBtn { 
    background-color: #6c757d; 
    color: #fff; 
} 
 
#cancelDeleteBtn:hover { 
    background-color: #5a6268; 
}

js

// 页面加载完成后执行所有逻辑 
document.addEventListener('DOMContentLoaded', function() { 
    // ========= 1. Dock栏折叠与展开功能 ======== 
    const dockContainer = document.getElementById('dock-container'); 
    const closeDockBtn = document.querySelector('.close-dock'); 
    const expandDockBtn = document.getElementById('expand-dock'); 
 
    // 折叠Dock栏 
    closeDockBtn.addEventListener('click', function() { 
        dockContainer.style.display = 'none'; 
        expandDockBtn.style.display = 'block'; 
    }); 
 
    // 展开Dock栏 
    expandDockBtn.addEventListener('click', function() { 
        dockContainer.style.display = 'block'; 
        expandDockBtn.style.display = 'none'; 
    }); 
 
    // ========= 2. 添加应用弹窗功能 ======== 
    const addAppBtn = document.querySelector('.add-app'); 
    const addAppModal = document.getElementById('addAppModal'); 
    const closeModalBtn = document.querySelector('.dockmodal-content .close'); 
    const appForm = document.getElementById('appForm'); 
    const dockIconsList = document.querySelector('.dock-icons'); 
 
    // 打开添加应用弹窗 
    addAppBtn.addEventListener('click', function() { 
        addAppModal.style.display = 'flex'; 
    }); 
 
    // 点击关闭按钮关闭弹窗 
    closeModalBtn.addEventListener('click', function() { 
        addAppModal.style.display = 'none'; 
        appForm.reset(); 
    }); 
 
    // 点击弹窗外部区域关闭弹窗 
    window.addEventListener('click', function(e) { 
        if(e.target == addAppModal) { 
            addAppModal.style.display = 'none'; 
            appForm.reset(); 
        } 
        if(e.target == document.getElementById('customDialog')) { 
            document.getElementById('customDialog').style.display = 'none'; 
        } 
    }); 
 
    // 表单提交添加新应用 
    appForm.addEventListener('submit', function(e) { 
        e.preventDefault(); 
        const appUrl = document.getElementById('appUrl').value.trim(); 
        const appName = document.getElementById('appName').value.trim(); 
        let appIcon = document.getElementById('appIcon').value.trim(); 
 
        // 自动获取网站默认favicon 
        if(!appIcon) { 
            try{ 
                const urlObj = new URL(appUrl); 
                appIcon = `${urlObj.origin}/favicon.ico`; 
            }catch{ 
                appIcon = "https://navw.cn/dahai/img/dahai- 添加.webp"; 
            } 
        } 
 
        // 创建新的应用图标节点 
        const newAppItem = document.createElement('li'); 
        newAppItem.className = 'dock-icon custom-app'; 
        newAppItem.setAttribute('title', appName); 
        newAppItem.innerHTML = ` 
        <a href="${appUrl}" target="_blank"> 
            <img src="${appIcon}" alt="${appName}" onerror="this.src='https://navw.cn/dahai/img/dahai- 添加.webp'"> 
            <span class="docktooltip">${appName}</span> 
        </a> 
        `; 
 
        // 将新应用插入到分割线和添加按钮之间 
        const addBtnNode = document.querySelector('.add-app'); 
        dockIconsList.insertBefore(newAppItem, addBtnNode); 
 
        // 保存到本地存储 
        saveCustomApps(appUrl,appName,appIcon); 
        // 关闭弹窗并重置表单 
        addAppModal.style.display = 'none'; 
        appForm.reset(); 
    }); 
 
    // ========= 3. 自定义应用右键删除功能 ======== 
    const deleteDialog = document.getElementById('customDialog'); 
    const confirmDeleteBtn = document.getElementById('confirmDeleteBtn'); 
    const cancelDeleteBtn = document.getElementById('cancelDeleteBtn'); 
    let currentDeleteItem = null; 
 
    // 监听右键点击自定义应用 
    dockIconsList.addEventListener('contextmenu', function(e) { 
        const targetItem = e.target.closest('.custom-app'); 
        if(targetItem){ 
            e.preventDefault(); 
            currentDeleteItem = targetItem; 
            deleteDialog.style.display = 'flex'; 
        } 
    }) 
 
    // 确认删除 
    confirmDeleteBtn.addEventListener('click', function(){ 
        if(currentDeleteItem){ 
            const appName = currentDeleteItem.getAttribute('title'); 
            // 删除页面元素 
            currentDeleteItem.remove(); 
            // 删除本地存储数据 
            removeCustomApp(appName); 
            currentDeleteItem = null; 
            deleteDialog.style.display = 'none'; 
        } 
    }); 
 
    // 取消删除 
    cancelDeleteBtn.addEventListener('click', function(){ 
        currentDeleteItem = null; 
        deleteDialog.style.display = 'none'; 
    }); 
 
    // ========= 4. 本地存储自定义应用 ======== 
    // 加载本地存储的自定义应用 
    loadCustomApps(); 
 
    // 保存自定义应用到localStorage 
    function saveCustomApps(url,name,icon){ 
        let customApps = JSON.parse(localStorage.getItem('dockCustomApps')) || []; 
        customApps.push({url,name,icon}); 
        localStorage.setItem('dockCustomApps',JSON.stringify(customApps)); 
    } 
 
    // 加载本地存储的自定义应用到页面 
    function loadCustomApps(){ 
        let customApps = JSON.parse(localStorage.getItem('dockCustomApps')) || []; 
        const addBtnNode = document.querySelector('.add-app'); 
        customApps.forEach(app=>{ 
            const newAppItem = document.createElement('li'); 
            newAppItem.className = 'dock-icon custom-app'; 
            newAppItem.setAttribute('title', app.name); 
            newAppItem.innerHTML = ` 
            <a href="${app.url}" target="_blank"> 
                <img src="${app.icon}" alt="${app.name}" onerror="this.src='https://navw.cn/dahai/img/dahai- 添加.webp'"> 
                <span class="docktooltip">${app.name}</span> 
            </a> 
            `; 
            dockIconsList.insertBefore(newAppItem, addBtnNode); 
        }) 
    } 
 
    // 删除本地存储里的自定义应用 
    function removeCustomApp(appName){ 
        let customApps = JSON.parse(localStorage.getItem('dockCustomApps')) || []; 
        customApps = customApps.filter(item=> item.name !== appName); 
        localStorage.setItem('dockCustomApps',JSON.stringify(customApps)); 
    } 
})