写一个可以显示本地图片的静态网页代码，首先定义类别里的图片文件存储的一、整体说明 1.要有代码备注 2.整个页面采用左右分栏设计，左侧宽度为400像素 3.所有的图片左键点击可以放大显示，并可以用鼠标滚轮实现缩放，鼠标图形变换为放大镜图标。 4.所有图片右键可下载原图 5.所有图片 alt=文件名但不包括拓展名+“无图片” 6.主分类分别是：第一数组的第一行 7.产品名对应数组的第2行以下，并同时分别对应同名的二级目录。用上下键可以进行选择并执行。 8.对应7个子分类：1.内包、2.外箱、3.进店图、4.设计图、5.数据图、6.淘宝、7.微分销、，图片链接分别对应在“包装图片”文件夹下的同名四级目录里。在JavaScript中定义数据数组 """, """爱克林""", """百利包""", """杯""", """易拉罐""", """梦幻盖""", """瓶""", """枕""", """砖""", """桶""", """其他""", """定制产品"""], " """, """天润零蔗糖风味酸牛奶（180g）""", """盖瑞纯牛奶（200g）""", """

```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> ``` 此代码实现了一个静态网页，包含左右分栏设计。左侧显示分类，右侧显示对应分类的图片。点击左侧分类会加载对应的图片到右侧，图片支持放大查看、鼠标滚轮缩放以及右键下载功能。 [2025-04-18 22:15:29 | AI问答 | 1257点数解答]

人生没有白走的路，每一步都算数！Ctrl + D 收藏本站，开发、写文章快人一步~

全部AI / 热门 / AI问答

服务商

更多选项

快捷项

其他AI