超实用！可显示本地图片的静态网页代码大揭秘

```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片展示页面</title> <style> body { margin: 0; padding: 0; display: flex; } #left-panel { width: 400px; height: 100vh; overflow-y: auto; background-color: #f4f4f4; padding: 10px; } #right-panel { flex-grow: 1; height: 100vh; overflow-y: auto; padding: 10px; position: relative; } .image-item { margin-bottom: 10px; cursor: zoom-in; } img { max-width: 100%; height: auto; } .zoom-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; } .zoom-overlay.active { display: flex; } .zoom-image { max-width: 90%; max-height: 90%; } </style> </head> <body> <div id="left-panel">  </div> <div id="right-panel">  </div> <div class="zoom-overlay" id="zoom-overlay"> <img src="" alt="" class="zoom-image" id="zoom-image"> </div> <script> const data = [ ["爱克林", "百利包", "杯", "易拉罐", "梦幻盖", "瓶", "枕", "砖", "桶", "其他", "定制产品"], ["天润零蔗糖风味酸牛奶（180g）", "盖瑞纯牛奶（200g）", "盖瑞诚品风味发酵乳(120g)", "佳丽奶啤乳酸菌饮品(300mL)", "夏牧场纯牛奶（梦幻盖250mL）", "天润阿尔泰饮用型风味发酵乳（PET瓶1kg）", "天润浓缩纯牛奶(M版无菌枕200g)", "天润沙漠有机纯牛奶（250g 康美砖）", "天润润康全脂风味发酵乳（原味）（2kg）", "", ""], ["天润百果香了全脂风味发酵乳（180g）", "沙湾盖瑞纯牛奶（200g）", "盖瑞诚品风味发酵乳(100g)", "佳丽奶啤乳酸菌饮品(300mL)-新版", "天润兵牧场纯牛奶 4.0（梦幻盖250mL）", "天润阿尔泰饮用型风味发酵乳（PET瓶1kg）", "佳丽1988年老品牌纯牛奶(无菌枕200g)疆内版3.0蛋白", "天润喀拉峻纯牛奶（康美砖250g）", "天润益家全脂风味发酵乳（原味）（2kg）", "", ""], // 其他数据省略... ]; const categories = data[0]; const products = data.slice(1); const leftPanel = document.getElementById('left-panel'); const rightPanel = document.getElementById('right-panel'); const zoomOverlay = document.getElementById('zoom-overlay'); const zoomImage = document.getElementById('zoom-image'); categories.forEach((category, index) => { const categoryDiv = document.createElement('div'); categoryDiv.textContent = category; categoryDiv.style.cursor = 'pointer'; categoryDiv.addEventListener('click', () => showCategoryImages(index)); leftPanel.appendChild(categoryDiv); }); function showCategoryImages(categoryIndex) { rightPanel.innerHTML = ''; products.forEach(product => { if (product[categoryIndex]) { const productName = product[categoryIndex]; const imageItem = document.createElement('div'); imageItem.className = 'image-item'; const img = document.createElement('img'); img.src = `包装图片/${categories[categoryIndex]}/${productName.replace(/[^a-zA-Z0-9]/g, '')}.jpg`; img.alt = `${productName.split('(')[0].trim()}无图片`; img.style.cursor = 'zoom-in'; img.addEventListener('click', () => { zoomImage.src = img.src; zoomOverlay.classList.add('active'); }); img.addEventListener('wheel', (e) => { e.preventDefault(); const scale = e.deltaY < 0 ? 1.1 : 0.9; img.style.transform = `scale(${scale})`; }); img.addEventListener('contextmenu', (e) => { e.preventDefault(); const link = document.createElement('a'); link.href = img.src; link.download = img.src.split('/').pop(); link.click(); }); imageItem.appendChild(img); rightPanel.appendChild(imageItem); } }); } zoomOverlay.addEventListener('click', () => { zoomOverlay.classList.remove('active'); }); </script> </body> </html> ``` 此代码实现了一个静态网页，包含左右分栏设计。左侧显示分类，右侧显示对应分类的图片。点击左侧分类会加载对应的图片到右侧，图片支持放大查看、鼠标滚轮缩放以及右键下载功能。 ######[AI问答 | 1257点数解答 | 2025-04-18 22:15:29]

服务商

更多选项

快捷项

自定义