Loupe 技术文档

本文档将为您提供关于如何安装、使用以及理解 Loupe 项目的方法。以下内容将涵盖安装指南、项目使用说明以及项目 API 使用文档。

1. 安装指南

Loupe 可作为 Bower 包进行安装：

bower install loupe

2. 项目使用说明

将 loupe.js 和相应的 CSS 文件（参考 loupe.css）添加到您的页面中。

Loupe 是一个构造函数，需要以一个元素作为其唯一参数进行调用。该元素可以是链接到一个较大图像的链接：

<a id="demo-1" href="big.jpg">
  <img src="small.jpg" />
</a>

<script>
  new Loupe(document.getElementById('demo-1'));
</script>

或者它可以是一个图像本身，在这种情况下，放大镜中会显示与图像源相同的放大版本：

<img id="demo-2" src="big.jpg" />

<script>
  new Loupe(document.getElementById('demo-2'));
</script>

（显然，您实际上不会使用内联 JS 来实现这个功能！这些示例只是为了演示放大镜的构建方法！）

3. 项目 API 使用文档

目前文档中未提供具体的 API 使用细节，但根据示例代码，我们可以推断出以下基本使用方法：

• new Loupe(element)：创建一个新的 Loupe 实例，其中 element 是触发放大效果的元素。

4. 项目安装方式

项目的安装方式已在“安装指南”部分中描述。以下是简要回顾：

• 使用 Bower 包管理器安装 Loupe：

bower install loupe

• 将 loupe.js 和相应的 CSS 文件添加到您的项目中。

• 根据需要初始化 Loupe 实例。

请注意，Loupe 设计了渐进增强的理念，在不支持的环境中将不会显示。它已经经过测试，可以在以下客户端中正常工作：

• MSIE 11+（不会在 IE 8, 9 或 10 中工作）
• 桌面版 Safari 7（不包括滚动轮缩放功能）
• Firefox 28
• Chrome 36

另外，Loupe 专门避免在触摸屏上激活，因为对于触摸屏有更好的选项。