ImageViewer.js：一个零依赖的现代化图片预览组件
<section id="nice" data-tool="mdnice编辑器" data-website="https://www.mdnice.com" style="margin: 0; padding: 0 10px; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; font-family: Optima, "Microsoft YaHei", PingFangSC-regular, serif; font-size: 16px; color: rgba(0, 0, 0, 1); line-height: 1.5em; word-spacing: 0; letter-spacing: 0; overflow-wrap: break-word; text-align: left"><h2 data-tool="mdnice编辑器" style="border-bottom: 2px solid rgba(239, 112, 96, 1); margin: 30px 0 15px; padding: 0; align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 1px none rgba(0, 0, 0, 1); border-radius: 0; box-shadow: none; display: flex; flex-direction: unset; float: unset; height: auto; justify-content: unset; line-height: 1.1em; overflow-x: unset; overflow-y: unset; position: relative; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 22px; color: rgba(255, 255, 255, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(239, 112, 96, 1); line-height: 1.5em; letter-spacing: 0; align-items: unset; border: 1px none rgba(0, 0, 0, 1); border-radius: 3px 3px 0 0; box-shadow: none; display: inline-block; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; margin: 0 5px 0 0; overflow-x: unset; overflow-y: unset; padding: 3px 10px 1px; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset">🎯 引言</span><span class="suffix" style="display: none"></span><span style="border-bottom: 36px solid rgba(239, 235, 233, 1); align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 20px solid rgba(0, 0, 0, 0); border-radius: 0; box-shadow: none; color: rgba(0, 0, 0, 1); display: inline-block; font-size: 16px; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; letter-spacing: 0; line-height: 1.1em; margin: 0; overflow-x: unset; overflow-y: unset; padding: 0; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"> </span></h2><p data-tool="mdnice编辑器" style="color: rgba(0, 0, 0, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; text-indent: 0; margin: 0; padding: 8px 0">在当今的 Web 开发中，图片预览功能几乎是每个网站的标配。然而，大多数现有的图片预览库要么过于臃肿，要么依赖特定的前端框架，要么配置复杂。有没有一种方案，能够<strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">只需引入一个 JavaScript 文件</strong>，就能为网站添加完整的图片预览功能？</p>
<p data-tool="mdnice编辑器" style="color: rgba(0, 0, 0, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; text-indent: 0; margin: 0; padding: 8px 0">今天我要向大家介绍 <strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">ImageViewer.js</strong> - 一个真正意义上的零依赖、现代化图片预览 Web Component。</p>
<h2 data-tool="mdnice编辑器" style="border-bottom: 2px solid rgba(239, 112, 96, 1); margin: 30px 0 15px; padding: 0; align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 1px none rgba(0, 0, 0, 1); border-radius: 0; box-shadow: none; display: flex; flex-direction: unset; float: unset; height: auto; justify-content: unset; line-height: 1.1em; overflow-x: unset; overflow-y: unset; position: relative; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 22px; color: rgba(255, 255, 255, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(239, 112, 96, 1); line-height: 1.5em; letter-spacing: 0; align-items: unset; border: 1px none rgba(0, 0, 0, 1); border-radius: 3px 3px 0 0; box-shadow: none; display: inline-block; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; margin: 0 5px 0 0; overflow-x: unset; overflow-y: unset; padding: 3px 10px 1px; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset">✨ 为什么选择 ImageViewer.js？</span><span class="suffix" style="display: none"></span><span style="border-bottom: 36px solid rgba(239, 235, 233, 1); align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 20px solid rgba(0, 0, 0, 0); border-radius: 0; box-shadow: none; color: rgba(0, 0, 0, 1); display: inline-block; font-size: 16px; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; letter-spacing: 0; line-height: 1.1em; margin: 0; overflow-x: unset; overflow-y: unset; padding: 0; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"> </span></h2>
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 20px; color: rgba(0, 0, 0, 1); line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: bold; display: block">🚀 极简集成体验</span><span class="suffix" style="display: none"></span></h3>
<p data-tool="mdnice编辑器" style="color: rgba(0, 0, 0, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; text-indent: 0; margin: 0; padding: 8px 0">想象一下，你只需要在 HTML 中添加这样一行代码：</p>
<pre class="custom" data-tool="mdnice编辑器" style="border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); text-align: left; margin: 10px 0; padding: 0"><span style="display: block; background: url("https://files.mdnice.com/user/3441/876cad08-0422-409d-bb5a-08afec5da8ee.svg") 10px 10px / 40px no-repeat rgba(40, 44, 52, 1); height: 30px; width: 100%; margin-bottom: -7px; border-radius: 5px"></span><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(171, 178, 191, 1); background: rgba(40, 44, 52, 1); border-radius: 5px; font-family: Consolas, Monaco, Menlo, monospace; font-size: 12px"><span class="hljs-tag" style="line-height: 26px"><<span class="hljs-name" style="color: rgba(224, 108, 117, 1); line-height: 26px">script</span> <span class="hljs-attr" style="color: rgba(209, 154, 102, 1); line-height: 26px">src</span>=<span class="hljs-string" style="color: rgba(152, 195, 121, 1); line-height: 26px">"https://cdn.jsdelivr.net/gh/mrhuo/image-viewer@1.0.0/dist/image-viewer.min.js"</span>></span><span class="hljs-tag" style="line-height: 26px"></<span class="hljs-name" style="color: rgba(224, 108, 117, 1); line-height: 26px">script</span>></span><br></code></pre>
<p data-tool="mdnice编辑器" style="color: rgba(0, 0, 0, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; text-indent: 0; margin: 0; padding: 8px 0">然后，页面上的所有图片就自动获得了全屏预览功能！点击任意图片，就能享受沉浸式的浏览体验。</p>
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 20px; color: rgba(0, 0, 0, 1); line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: bold; display: block">📱 全平台完美兼容</span><span class="suffix" style="display: none"></span></h3>
<div align="center" data-tool="mdnice编辑器">
<figure style="margin: 10px 0; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center"><img src="https://img2024.cnblogs.com/blog/316520/202511/316520-20251122093607289-1978701988.jpg" alt="桌面端预览效果" style="display: block; margin: 0 auto; max-width: 100%; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0; object-fit: fill; box-shadow: 0 0 rgba(0, 0, 0, 0)"><figcaption style="color: rgba(136, 136, 136, 1); font-size: 14px; line-height: 1.5em; letter-spacing: 0; text-align: center; font-weight: normal; margin: 5px 0 0; padding: 0">桌面端预览效果</figcaption></figure>
<figure style="margin: 10px 0; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center"><img src="https://img2024.cnblogs.com/blog/316520/202511/316520-20251122093607298-220926656.png" alt="桌面端控制界面" style="display: block; margin: 0 auto; max-width: 100%; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0; object-fit: fill; box-shadow: 0 0 rgba(0, 0, 0, 0)"><figcaption style="color: rgba(136, 136, 136, 1); font-size: 14px; line-height: 1.5em; letter-spacing: 0; text-align: center; font-weight: normal; margin: 5px 0 0; padding: 0">桌面端控制界面</figcaption></figure>
<figure style="margin: 10px 0; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center"><img src="https://img2024.cnblogs.com/blog/316520/202511/316520-20251122093607288-1257614120.png" alt="移动端预览效果" style="display: block; margin: 0 auto; max-width: 100%; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0; object-fit: fill; box-shadow: 0 0 rgba(0, 0, 0, 0)"><figcaption style="color: rgba(136, 136, 136, 1); font-size: 14px; line-height: 1.5em; letter-spacing: 0; text-align: center; font-weight: normal; margin: 5px 0 0; padding: 0">移动端预览效果</figcaption></figure>
</div>
<p data-tool="mdnice编辑器" style="color: rgba(0, 0, 0, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; text-indent: 0; margin: 0; padding: 8px 0"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">桌面端体验</strong> - 全屏预览，提供直观的缩放、旋转和导航控制
<br>
<strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">移动端优化</strong> - 触摸友好的界面，流畅的手势操作和响应式设计</p>
<h2 data-tool="mdnice编辑器" style="border-bottom: 2px solid rgba(239, 112, 96, 1); margin: 30px 0 15px; padding: 0; align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 1px none rgba(0, 0, 0, 1); border-radius: 0; box-shadow: none; display: flex; flex-direction: unset; float: unset; height: auto; justify-content: unset; line-height: 1.1em; overflow-x: unset; overflow-y: unset; position: relative; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 22px; color: rgba(255, 255, 255, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(239, 112, 96, 1); line-height: 1.5em; letter-spacing: 0; align-items: unset; border: 1px none rgba(0, 0, 0, 1); border-radius: 3px 3px 0 0; box-shadow: none; display: inline-block; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; margin: 0 5px 0 0; overflow-x: unset; overflow-y: unset; padding: 3px 10px 1px; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset">🛠️ 核心特性详解</span><span class="suffix" style="display: none"></span><span style="border-bottom: 36px solid rgba(239, 235, 233, 1); align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 20px solid rgba(0, 0, 0, 0); border-radius: 0; box-shadow: none; color: rgba(0, 0, 0, 1); display: inline-block; font-size: 16px; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; letter-spacing: 0; line-height: 1.1em; margin: 0; overflow-x: unset; overflow-y: unset; padding: 0; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"> </span></h2>
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 20px; color: rgba(0, 0, 0, 1); line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: bold; display: block">1. 🎯 零配置，零依赖</span><span class="suffix" style="display: none"></span></h3>
<p data-tool="mdnice编辑器" style="color: rgba(0, 0, 0, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; text-indent: 0; margin: 0; padding: 8px 0">这是 ImageViewer.js 最大的亮点：</p>
<ul data-tool="mdnice编辑器" style="list-style-type: disc; margin: 8px 0; padding: 0 0 0 25px; color: rgba(0, 0, 0, 1)">
<li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">纯原生 JavaScript</strong>：不依赖任何第三方库</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">Web Components 标准</strong>：使用现代浏览器原生支持的技术</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">自动初始化</strong>：DOM 加载完成后自动工作</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">轻量级</strong>：压缩后仅约 10KB，加载速度极快</section></li></ul>
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 20px; color: rgba(0, 0, 0, 1); line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: bold; display: block">2. 🖼️ 丰富的交互功能</span><span class="suffix" style="display: none"></span></h3>
<ul data-tool="mdnice编辑器" style="list-style-type: disc; margin: 8px 0; padding: 0 0 0 25px; color: rgba(0, 0, 0, 1)">
<li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">智能缩放</strong>：鼠标滚轮平滑缩放，支持自定义缩放范围</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">拖拽平移</strong>：缩放后可拖拽查看图片细节</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">图片旋转</strong>：支持 90 度增量旋转</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">一键下载</strong>：快速下载原图，支持自定义文件名</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">多图导航</strong>：在多张图片间无缝切换</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">键盘支持</strong>：ESC 关闭，左右箭头切换图片</section></li></ul>
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 20px; color: rgba(0, 0, 0, 1); line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: bold; display: block">3. ⚡ 高性能架构</span><span class="suffix" style="display: none"></span></h3>
<ul data-tool="mdnice编辑器" style="list-style-type: disc; margin: 8px 0; padding: 0 0 0 25px; color: rgba(0, 0, 0, 1)">
<li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">Shadow DOM</strong>：样式隔离，不影响页面其他部分</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">事件委托</strong>：高效的事件处理机制</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">MutationObserver</strong>：动态监听 DOM 变化</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">内存管理</strong>：自动清理事件监听器，避免内存泄漏</section></li></ul>
<h2 data-tool="mdnice编辑器" style="border-bottom: 2px solid rgba(239, 112, 96, 1); margin: 30px 0 15px; padding: 0; align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 1px none rgba(0, 0, 0, 1); border-radius: 0; box-shadow: none; display: flex; flex-direction: unset; float: unset; height: auto; justify-content: unset; line-height: 1.1em; overflow-x: unset; overflow-y: unset; position: relative; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 22px; color: rgba(255, 255, 255, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(239, 112, 96, 1); line-height: 1.5em; letter-spacing: 0; align-items: unset; border: 1px none rgba(0, 0, 0, 1); border-radius: 3px 3px 0 0; box-shadow: none; display: inline-block; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; margin: 0 5px 0 0; overflow-x: unset; overflow-y: unset; padding: 3px 10px 1px; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset">💡 实际使用案例</span><span class="suffix" style="display: none"></span><span style="border-bottom: 36px solid rgba(239, 235, 233, 1); align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 20px solid rgba(0, 0, 0, 0); border-radius: 0; box-shadow: none; color: rgba(0, 0, 0, 1); display: inline-block; font-size: 16px; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; letter-spacing: 0; line-height: 1.1em; margin: 0; overflow-x: unset; overflow-y: unset; padding: 0; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"> </span></h2>
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 20px; color: rgba(0, 0, 0, 1); line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: bold; display: block">基础用法（推荐）</span><span class="suffix" style="display: none"></span></h3>
<pre class="custom" data-tool="mdnice编辑器" style="border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); text-align: left; margin: 10px 0; padding: 0"><span style="display: block; background: url("https://files.mdnice.com/user/3441/876cad08-0422-409d-bb5a-08afec5da8ee.svg") 10px 10px / 40px no-repeat rgba(40, 44, 52, 1); height: 30px; width: 100%; margin-bottom: -7px; border-radius: 5px"></span><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(171, 178, 191, 1); background: rgba(40, 44, 52, 1); border-radius: 5px; font-family: Consolas, Monaco, Menlo, monospace; font-size: 12px"><span class="hljs-comment" style="color: rgba(92, 99, 112, 1); font-style: italic; line-height: 26px"><!-- 引入组件 --></span><br><span class="hljs-tag" style="line-height: 26px"><<span class="hljs-name" style="color: rgba(224, 108, 117, 1); line-height: 26px">script</span> <span class="hljs-attr" style="color: rgba(209, 154, 102, 1); line-height: 26px">src</span>=<span class="hljs-string" style="color: rgba(152, 195, 121, 1); line-height: 26px">"https://cdn.jsdelivr.net/gh/mrhuo/image-viewer@1.0.0/dist/image-viewer.min.js"</span>></span><span class="hljs-tag" style="line-height: 26px"></<span class="hljs-name" style="color: rgba(224, 108, 117, 1); line-height: 26px">script</span>></span><br><br><span class="hljs-comment" style="color: rgba(92, 99, 112, 1); font-style: italic; line-height: 26px"><!-- 你的图片 --></span><br><span class="hljs-tag" style="line-height: 26px"><<span class="hljs-name" style="color: rgba(224, 108, 117, 1); line-height: 26px">img</span> <span class="hljs-attr" style="color: rgba(209, 154, 102, 1); line-height: 26px">src</span>=<span class="hljs-string" style="color: rgba(152, 195, 121, 1); line-height: 26px">"image1.jpg"</span> <span class="hljs-attr" style="color: rgba(209, 154, 102, 1); line-height: 26px">alt</span>=<span class="hljs-string" style="color: rgba(152, 195, 121, 1); line-height: 26px">"美丽的风景"</span>></span><br><span class="hljs-tag" style="line-height: 26px"><<span class="hljs-name" style="color: rgba(224, 108, 117, 1); line-height: 26px">img</span> <span class="hljs-attr" style="color: rgba(209, 154, 102, 1); line-height: 26px">src</span>=<span class="hljs-string" style="color: rgba(152, 195, 121, 1); line-height: 26px">"image2.jpg"</span> <span class="hljs-attr" style="color: rgba(209, 154, 102, 1); line-height: 26px">alt</span>=<span class="hljs-string" style="color: rgba(152, 195, 121, 1); line-height: 26px">"可爱的动物"</span>></span><br></code></pre>
<p data-tool="mdnice编辑器" style="color: rgba(0, 0, 0, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; text-indent: 0; margin: 0; padding: 8px 0">就这么简单！所有图片都自动支持点击预览。</p>
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 20px; color: rgba(0, 0, 0, 1); line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: bold; display: block">高级配置</span><span class="suffix" style="display: none"></span></h3>
<p data-tool="mdnice编辑器" style="color: rgba(0, 0, 0, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; text-indent: 0; margin: 0; padding: 8px 0">如果你需要更精细的控制：</p>
<pre class="custom" data-tool="mdnice编辑器" style="border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); text-align: left; margin: 10px 0; padding: 0"><span style="display: block; background: url("https://files.mdnice.com/user/3441/876cad08-0422-409d-bb5a-08afec5da8ee.svg") 10px 10px / 40px no-repeat rgba(40, 44, 52, 1); height: 30px; width: 100%; margin-bottom: -7px; border-radius: 5px"></span><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(171, 178, 191, 1); background: rgba(40, 44, 52, 1); border-radius: 5px; font-family: Consolas, Monaco, Menlo, monospace; font-size: 12px"><span class="hljs-tag" style="line-height: 26px"><<span class="hljs-name" style="color: rgba(224, 108, 117, 1); line-height: 26px">script</span> <span class="hljs-attr" style="color: rgba(209, 154, 102, 1); line-height: 26px">src</span>=<span class="hljs-string" style="color: rgba(152, 195, 121, 1); line-height: 26px">"https://cdn.jsdelivr.net/gh/mrhuo/image-viewer@1.0.0/dist/image-viewer.min.js"</span> <br> <span class="hljs-attr" style="color: rgba(209, 154, 102, 1); line-height: 26px">id</span>=<span class="hljs-string" style="color: rgba(152, 195, 121, 1); line-height: 26px">"gd-image-viewer"</span><br> <span class="hljs-attr" style="color: rgba(209, 154, 102, 1); line-height: 26px">data-target-selector</span>=<span class="hljs-string" style="color: rgba(152, 195, 121, 1); line-height: 26px">".gallery-img"</span><br> <span class="hljs-attr" style="color: rgba(209, 154, 102, 1); line-height: 26px">data-max-scale</span>=<span class="hljs-string" style="color: rgba(152, 195, 121, 1); line-height: 26px">"8"</span><br> <span class="hljs-attr" style="color: rgba(209, 154, 102, 1); line-height: 26px">data-min-scale</span>=<span class="hljs-string" style="color: rgba(152, 195, 121, 1); line-height: 26px">"0.3"</span><br> <span class="hljs-attr" style="color: rgba(209, 154, 102, 1); line-height: 26px">data-allow-rotate</span>=<span class="hljs-string" style="color: rgba(152, 195, 121, 1); line-height: 26px">"false"</span><br> <span class="hljs-attr" style="color: rgba(209, 154, 102, 1); line-height: 26px">data-allow-download</span>=<span class="hljs-string" style="color: rgba(152, 195, 121, 1); line-height: 26px">"true"</span>></span><br><span class="hljs-tag" style="line-height: 26px"></<span class="hljs-name" style="color: rgba(224, 108, 117, 1); line-height: 26px">script</span>></span><br><br><span class="hljs-comment" style="color: rgba(92, 99, 112, 1); font-style: italic; line-height: 26px"><!-- 只有特定图片可预览 --></span><br><span class="hljs-tag" style="line-height: 26px"><<span class="hljs-name" style="color: rgba(224, 108, 117, 1); line-height: 26px">img</span> <span class="hljs-attr" style="color: rgba(209, 154, 102, 1); line-height: 26px">src</span>=<span class="hljs-string" style="color: rgba(152, 195, 121, 1); line-height: 26px">"image1.jpg"</span> <span class="hljs-attr" style="color: rgba(209, 154, 102, 1); line-height: 26px">class</span>=<span class="hljs-string" style="color: rgba(152, 195, 121, 1); line-height: 26px">"gallery-img"</span> <span class="hljs-attr" style="color: rgba(209, 154, 102, 1); line-height: 26px">alt</span>=<span class="hljs-string" style="color: rgba(152, 195, 121, 1); line-height: 26px">"图片1"</span>></span><br><span class="hljs-tag" style="line-height: 26px"><<span class="hljs-name" style="color: rgba(224, 108, 117, 1); line-height: 26px">img</span> <span class="hljs-attr" style="color: rgba(209, 154, 102, 1); line-height: 26px">src</span>=<span class="hljs-string" style="color: rgba(152, 195, 121, 1); line-height: 26px">"image2.jpg"</span> <span class="hljs-attr" style="color: rgba(209, 154, 102, 1); line-height: 26px">class</span>=<span class="hljs-string" style="color: rgba(152, 195, 121, 1); line-height: 26px">"gallery-img"</span> <span class="hljs-attr" style="color: rgba(209, 154, 102, 1); line-height: 26px">alt</span>=<span class="hljs-string" style="color: rgba(152, 195, 121, 1); line-height: 26px">"图片2"</span>></span><br></code></pre>
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 20px; color: rgba(0, 0, 0, 1); line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: bold; display: block">配置选项说明</span><span class="suffix" style="display: none"></span></h3>
<section class="table-container" data-tool="mdnice编辑器" style="margin: 0; padding: 0; overflow-x: auto"><table style="display: table; text-align: left">
<thead>
<tr>
<th style="color: rgba(0, 0, 0, 1); font-size: 16px; line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(240, 240, 240, 1); width: auto; height: auto; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0; padding: 5px 10px; min-width: 85px">选项</th>
<th style="color: rgba(0, 0, 0, 1); font-size: 16px; line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(240, 240, 240, 1); width: auto; height: auto; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0; padding: 5px 10px; min-width: 85px">默认值</th>
<th style="color: rgba(0, 0, 0, 1); font-size: 16px; line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(240, 240, 240, 1); width: auto; height: auto; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0; padding: 5px 10px; min-width: 85px">描述</th>
</tr>
</thead>
<tbody style="font-size: 16px; line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: normal; border: 0; border-image: initial">
<tr style="color: rgba(0, 0, 0, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(255, 255, 255, 1); width: auto; height: auto">
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0"><code>data-target-selector</code></td>
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0"><code>'img'</code></td>
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0">可点击图片的 CSS 选择器</td>
</tr>
<tr style="color: rgba(0, 0, 0, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(248, 248, 248, 1); width: auto; height: auto">
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0"><code>data-max-scale</code></td>
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0"><code>5</code></td>
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0">最大缩放倍数</td>
</tr>
<tr style="color: rgba(0, 0, 0, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(255, 255, 255, 1); width: auto; height: auto">
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0"><code>data-min-scale</code></td>
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0"><code>0.5</code></td>
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0">最小缩放倍数</td>
</tr>
<tr style="color: rgba(0, 0, 0, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(248, 248, 248, 1); width: auto; height: auto">
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0"><code>data-allow-rotate</code></td>
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0"><code>true</code></td>
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0">是否允许旋转图片</td>
</tr>
<tr style="color: rgba(0, 0, 0, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(255, 255, 255, 1); width: auto; height: auto">
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0"><code>data-allow-download</code></td>
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0"><code>true</code></td>
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0">是否允许下载图片</td>
</tr>
</tbody>
</table>
</section><h2 data-tool="mdnice编辑器" style="border-bottom: 2px solid rgba(239, 112, 96, 1); margin: 30px 0 15px; padding: 0; align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 1px none rgba(0, 0, 0, 1); border-radius: 0; box-shadow: none; display: flex; flex-direction: unset; float: unset; height: auto; justify-content: unset; line-height: 1.1em; overflow-x: unset; overflow-y: unset; position: relative; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 22px; color: rgba(255, 255, 255, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(239, 112, 96, 1); line-height: 1.5em; letter-spacing: 0; align-items: unset; border: 1px none rgba(0, 0, 0, 1); border-radius: 3px 3px 0 0; box-shadow: none; display: inline-block; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; margin: 0 5px 0 0; overflow-x: unset; overflow-y: unset; padding: 3px 10px 1px; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset">🎨 用户体验亮点</span><span class="suffix" style="display: none"></span><span style="border-bottom: 36px solid rgba(239, 235, 233, 1); align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 20px solid rgba(0, 0, 0, 0); border-radius: 0; box-shadow: none; color: rgba(0, 0, 0, 1); display: inline-block; font-size: 16px; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; letter-spacing: 0; line-height: 1.1em; margin: 0; overflow-x: unset; overflow-y: unset; padding: 0; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"> </span></h2>
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 20px; color: rgba(0, 0, 0, 1); line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: bold; display: block">直观的操作方式</span><span class="suffix" style="display: none"></span></h3>
<ul data-tool="mdnice编辑器" style="list-style-type: disc; margin: 8px 0; padding: 0 0 0 25px; color: rgba(0, 0, 0, 1)">
<li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">点击图片</strong>：打开全屏预览模式</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">鼠标滚轮</strong>：缩放图片（支持自定义范围）</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">拖拽图片</strong>：在缩放状态下平移查看</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">旋转按钮</strong>：90度旋转图片</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">下载按钮</strong>：保存原图到本地</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">导航按钮</strong>：在多张图片间切换</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">ESC 键</strong>：快速关闭预览</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">左右箭头</strong>：键盘切换图片</section></li></ul>
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 20px; color: rgba(0, 0, 0, 1); line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: bold; display: block">贴心的细节设计</span><span class="suffix" style="display: none"></span></h3>
<ul data-tool="mdnice编辑器" style="list-style-type: disc; margin: 8px 0; padding: 0 0 0 25px; color: rgba(0, 0, 0, 1)">
<li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">流畅动画</strong>：所有操作都有平滑的过渡效果</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">加载指示器</strong>：大图加载时显示进度</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">高分辨率支持</strong>：支持渐进式加载高清图片</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">无障碍访问</strong>：支持键盘操作和屏幕阅读器</section></li></ul>
<h2 data-tool="mdnice编辑器" style="border-bottom: 2px solid rgba(239, 112, 96, 1); margin: 30px 0 15px; padding: 0; align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 1px none rgba(0, 0, 0, 1); border-radius: 0; box-shadow: none; display: flex; flex-direction: unset; float: unset; height: auto; justify-content: unset; line-height: 1.1em; overflow-x: unset; overflow-y: unset; position: relative; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 22px; color: rgba(255, 255, 255, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(239, 112, 96, 1); line-height: 1.5em; letter-spacing: 0; align-items: unset; border: 1px none rgba(0, 0, 0, 1); border-radius: 3px 3px 0 0; box-shadow: none; display: inline-block; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; margin: 0 5px 0 0; overflow-x: unset; overflow-y: unset; padding: 3px 10px 1px; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset">🔧 技术实现解析</span><span class="suffix" style="display: none"></span><span style="border-bottom: 36px solid rgba(239, 235, 233, 1); align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 20px solid rgba(0, 0, 0, 0); border-radius: 0; box-shadow: none; color: rgba(0, 0, 0, 1); display: inline-block; font-size: 16px; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; letter-spacing: 0; line-height: 1.1em; margin: 0; overflow-x: unset; overflow-y: unset; padding: 0; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"> </span></h2>
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 20px; color: rgba(0, 0, 0, 1); line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: bold; display: block">Web Components 的优势</span><span class="suffix" style="display: none"></span></h3>
<p data-tool="mdnice编辑器" style="color: rgba(0, 0, 0, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; text-indent: 0; margin: 0; padding: 8px 0">ImageViewer.js 采用 Web Components 技术，这意味着：</p>
<ol data-tool="mdnice编辑器" style="list-style-type: decimal; margin: 8px 0; padding: 0 0 0 25px; color: rgba(0, 0, 0, 1)">
<li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">样式隔离</strong>：组件的样式不会影响页面其他部分</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">封装性</strong>：内部实现细节对外部完全隐藏</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">复用性</strong>：可以在任何项目中重复使用</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">标准兼容</strong>：基于 W3C 标准，未来兼容性好</section></li></ol>
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 20px; color: rgba(0, 0, 0, 1); line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: bold; display: block">性能优化策略</span><span class="suffix" style="display: none"></span></h3>
<ul data-tool="mdnice编辑器" style="list-style-type: disc; margin: 8px 0; padding: 0 0 0 25px; color: rgba(0, 0, 0, 1)">
<li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">懒加载</strong>：只在需要时创建预览界面</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">事件委托</strong>：减少事件监听器数量</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">DOM 复用</strong>：重复使用 DOM 元素</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">内存管理</strong>：及时清理不需要的资源</section></li></ul>
<h2 data-tool="mdnice编辑器" style="border-bottom: 2px solid rgba(239, 112, 96, 1); margin: 30px 0 15px; padding: 0; align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 1px none rgba(0, 0, 0, 1); border-radius: 0; box-shadow: none; display: flex; flex-direction: unset; float: unset; height: auto; justify-content: unset; line-height: 1.1em; overflow-x: unset; overflow-y: unset; position: relative; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 22px; color: rgba(255, 255, 255, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(239, 112, 96, 1); line-height: 1.5em; letter-spacing: 0; align-items: unset; border: 1px none rgba(0, 0, 0, 1); border-radius: 3px 3px 0 0; box-shadow: none; display: inline-block; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; margin: 0 5px 0 0; overflow-x: unset; overflow-y: unset; padding: 3px 10px 1px; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset">📊 项目数据</span><span class="suffix" style="display: none"></span><span style="border-bottom: 36px solid rgba(239, 235, 233, 1); align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 20px solid rgba(0, 0, 0, 0); border-radius: 0; box-shadow: none; color: rgba(0, 0, 0, 1); display: inline-block; font-size: 16px; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; letter-spacing: 0; line-height: 1.1em; margin: 0; overflow-x: unset; overflow-y: unset; padding: 0; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"> </span></h2>
<ul data-tool="mdnice编辑器" style="list-style-type: disc; margin: 8px 0; padding: 0 0 0 25px; color: rgba(0, 0, 0, 1)">
<li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">文件大小</strong>：原始 24.2KB → 压缩后 10.4KB（减少 56.81%）</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">兼容性</strong>：Chrome 61+, Firefox 63+, Safari 10.1+, Edge 79+</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">依赖</strong>：零依赖</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">许可证</strong>：MIT</section></li></ul>
<h2 data-tool="mdnice编辑器" style="border-bottom: 2px solid rgba(239, 112, 96, 1); margin: 30px 0 15px; padding: 0; align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 1px none rgba(0, 0, 0, 1); border-radius: 0; box-shadow: none; display: flex; flex-direction: unset; float: unset; height: auto; justify-content: unset; line-height: 1.1em; overflow-x: unset; overflow-y: unset; position: relative; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 22px; color: rgba(255, 255, 255, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(239, 112, 96, 1); line-height: 1.5em; letter-spacing: 0; align-items: unset; border: 1px none rgba(0, 0, 0, 1); border-radius: 3px 3px 0 0; box-shadow: none; display: inline-block; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; margin: 0 5px 0 0; overflow-x: unset; overflow-y: unset; padding: 3px 10px 1px; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset">🚀 快速开始</span><span class="suffix" style="display: none"></span><span style="border-bottom: 36px solid rgba(239, 235, 233, 1); align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 20px solid rgba(0, 0, 0, 0); border-radius: 0; box-shadow: none; color: rgba(0, 0, 0, 1); display: inline-block; font-size: 16px; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; letter-spacing: 0; line-height: 1.1em; margin: 0; overflow-x: unset; overflow-y: unset; padding: 0; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"> </span></h2>
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 20px; color: rgba(0, 0, 0, 1); line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: bold; display: block">1. 下载使用</span><span class="suffix" style="display: none"></span></h3>
<pre class="custom" data-tool="mdnice编辑器" style="border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); text-align: left; margin: 10px 0; padding: 0"><span style="display: block; background: url("https://files.mdnice.com/user/3441/876cad08-0422-409d-bb5a-08afec5da8ee.svg") 10px 10px / 40px no-repeat rgba(40, 44, 52, 1); height: 30px; width: 100%; margin-bottom: -7px; border-radius: 5px"></span><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(171, 178, 191, 1); background: rgba(40, 44, 52, 1); border-radius: 5px; font-family: Consolas, Monaco, Menlo, monospace; font-size: 12px"><span class="hljs-comment" style="color: rgba(92, 99, 112, 1); font-style: italic; line-height: 26px"># 从 GitHub 下载</span><br>git <span class="hljs-built_in" style="color: rgba(230, 192, 123, 1); line-height: 26px">clone</span> https://github.com/mrhuo/image-viewer.git<br></code></pre>
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 20px; color: rgba(0, 0, 0, 1); line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: bold; display: block">2. CDN 引入</span><span class="suffix" style="display: none"></span></h3>
<pre class="custom" data-tool="mdnice编辑器" style="border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); text-align: left; margin: 10px 0; padding: 0"><span style="display: block; background: url("https://files.mdnice.com/user/3441/876cad08-0422-409d-bb5a-08afec5da8ee.svg") 10px 10px / 40px no-repeat rgba(40, 44, 52, 1); height: 30px; width: 100%; margin-bottom: -7px; border-radius: 5px"></span><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(171, 178, 191, 1); background: rgba(40, 44, 52, 1); border-radius: 5px; font-family: Consolas, Monaco, Menlo, monospace; font-size: 12px"><span class="hljs-tag" style="line-height: 26px"><<span class="hljs-name" style="color: rgba(224, 108, 117, 1); line-height: 26px">script</span> <span class="hljs-attr" style="color: rgba(209, 154, 102, 1); line-height: 26px">src</span>=<span class="hljs-string" style="color: rgba(152, 195, 121, 1); line-height: 26px">"https://cdn.jsdelivr.net/gh/mrhuo/image-viewer@1.0.0/dist/image-viewer.min.js"</span>></span><span class="hljs-tag" style="line-height: 26px"></<span class="hljs-name" style="color: rgba(224, 108, 117, 1); line-height: 26px">script</span>></span><br></code></pre>
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 20px; color: rgba(0, 0, 0, 1); line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: bold; display: block">3. 本地构建</span><span class="suffix" style="display: none"></span></h3>
<pre class="custom" data-tool="mdnice编辑器" style="border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); text-align: left; margin: 10px 0; padding: 0"><span style="display: block; background: url("https://files.mdnice.com/user/3441/876cad08-0422-409d-bb5a-08afec5da8ee.svg") 10px 10px / 40px no-repeat rgba(40, 44, 52, 1); height: 30px; width: 100%; margin-bottom: -7px; border-radius: 5px"></span><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(171, 178, 191, 1); background: rgba(40, 44, 52, 1); border-radius: 5px; font-family: Consolas, Monaco, Menlo, monospace; font-size: 12px">npm install<br>npm run build<br></code></pre>
<h2 data-tool="mdnice编辑器" style="border-bottom: 2px solid rgba(239, 112, 96, 1); margin: 30px 0 15px; padding: 0; align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 1px none rgba(0, 0, 0, 1); border-radius: 0; box-shadow: none; display: flex; flex-direction: unset; float: unset; height: auto; justify-content: unset; line-height: 1.1em; overflow-x: unset; overflow-y: unset; position: relative; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 22px; color: rgba(255, 255, 255, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(239, 112, 96, 1); line-height: 1.5em; letter-spacing: 0; align-items: unset; border: 1px none rgba(0, 0, 0, 1); border-radius: 3px 3px 0 0; box-shadow: none; display: inline-block; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; margin: 0 5px 0 0; overflow-x: unset; overflow-y: unset; padding: 3px 10px 1px; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset">💭 总结</span><span class="suffix" style="display: none"></span><span style="border-bottom: 36px solid rgba(239, 235, 233, 1); align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 20px solid rgba(0, 0, 0, 0); border-radius: 0; box-shadow: none; color: rgba(0, 0, 0, 1); display: inline-block; font-size: 16px; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; letter-spacing: 0; line-height: 1.1em; margin: 0; overflow-x: unset; overflow-y: unset; padding: 0; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"> </span></h2>
<p data-tool="mdnice编辑器" style="color: rgba(0, 0, 0, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; text-indent: 0; margin: 0; padding: 8px 0">ImageViewer.js 解决了图片预览功能集成复杂、依赖过多的问题。它的核心优势可以总结为：</p>
<ol data-tool="mdnice编辑器" style="list-style-type: decimal; margin: 8px 0; padding: 0 0 0 25px; color: rgba(0, 0, 0, 1)">
<li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">极简集成</strong>：一行代码即可使用</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">零依赖</strong>：不依赖任何第三方库</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">全功能</strong>：提供完整的图片预览体验</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">高性能</strong>：基于现代 Web 标准构建</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">跨平台</strong>：桌面和移动端完美适配</section></li></ol>
<p data-tool="mdnice编辑器" style="color: rgba(0, 0, 0, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; text-indent: 0; margin: 0; padding: 8px 0">无论你是个人博客、企业官网，还是复杂的 Web 应用，ImageViewer.js 都能为你提供专业级的图片预览解决方案。</p>
<h2 data-tool="mdnice编辑器" style="border-bottom: 2px solid rgba(239, 112, 96, 1); margin: 30px 0 15px; padding: 0; align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 1px none rgba(0, 0, 0, 1); border-radius: 0; box-shadow: none; display: flex; flex-direction: unset; float: unset; height: auto; justify-content: unset; line-height: 1.1em; overflow-x: unset; overflow-y: unset; position: relative; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 22px; color: rgba(255, 255, 255, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(239, 112, 96, 1); line-height: 1.5em; letter-spacing: 0; align-items: unset; border: 1px none rgba(0, 0, 0, 1); border-radius: 3px 3px 0 0; box-shadow: none; display: inline-block; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; margin: 0 5px 0 0; overflow-x: unset; overflow-y: unset; padding: 3px 10px 1px; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset">🔗 相关资源</span><span class="suffix" style="display: none"></span><span style="border-bottom: 36px solid rgba(239, 235, 233, 1); align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 20px solid rgba(0, 0, 0, 0); border-radius: 0; box-shadow: none; color: rgba(0, 0, 0, 1); display: inline-block; font-size: 16px; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; letter-spacing: 0; line-height: 1.1em; margin: 0; overflow-x: unset; overflow-y: unset; padding: 0; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"> </span></h2>
<ul data-tool="mdnice编辑器" style="list-style-type: disc; margin: 8px 0; padding: 0 0 0 25px; color: rgba(0, 0, 0, 1)">
<li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal">GitHub 仓库</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal">在线演示</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal">API 文档</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal">问题反馈</section></li></ul>
<hr data-tool="mdnice编辑器" style="margin: 10px 0; padding: 0; border-top: 1px solid rgba(0, 0, 0, 1); border-bottom: 3px none rgba(0, 0, 0, 0.4); border-left: 3px none rgba(0, 0, 0, 0.4); border-right: 3px none rgba(0, 0, 0, 0.4); border-radius: 0; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: 1px">
<p data-tool="mdnice编辑器" style="color: rgba(0, 0, 0, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; text-indent: 0; margin: 0; padding: 8px 0"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">让图片预览变得简单而强大！</strong> 🎉</p>
<p data-tool="mdnice编辑器" style="color: rgba(0, 0, 0, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; text-indent: 0; margin: 0; padding: 8px 0">如果你觉得这个项目有用，欢迎在 GitHub 上给个 ⭐️，也欢迎提交 Issue 和 Pull Request！</p>
</section>
</div>
<div id="MySignature" role="contentinfo">
专注互联网产品开发，分享工具心得。
做好每一件或大或小的事情。
http://www.mrhuo.com<br><br>
来源：https://www.cnblogs.com/MrHuo/p/19255489/image-viewer
頁:
[1]