Lightense Images 使用指南

---

一、项目目录结构及介绍

lightense-images 是一个轻量级的图像放大库，其结构简洁，便于集成。以下是该仓库的基本目录结构及其简介：

lightense-images
├── babelrc                    # Babel 配置文件
├── dist                       # 编译后的生产环境代码存放处
│   └── lightense-images.min.js # 压缩后的主库文件
├── src                        # 源码目录
│   ├── lightense-images.js     # 核心逻辑实现
│   ┦???
├── package.json               # 包管理配置文件
├── README.md                  # 项目说明文档
├── LICENSE                    # 许可证文件
├── travis.yml                 # Travis CI 的配置文件
└── ...

• dist: 包含压缩和未压缩的版本，用于生产环境中部署。
• src: 开发源代码所在位置，主要业务逻辑实现区域。
• package.json: 定义了项目依赖、脚本命令等，是npm包的核心配置文件。
• README.md: 提供项目快速入门指导和关键信息。
• LICENSE: 项目的MIT许可证文件，说明了软件的使用权限。

二、项目启动文件介绍

本项目作为一个JavaScript库，并不直接提供一个可执行的“启动文件”，而是通过在web应用中引入来使用。使用时，可以通过以下几种方式之一将库集成到你的项目中：

1. NPM/Yarn安装:

   npm install lightense-images --save
   

   或者

   yarn add lightense-images
   

2. 直接下载: 下载ZIP或从dist目录手动获取lightense-images.min.js后，放在你的项目中，并通过 <script> 标签引入。

3. CDN服务: 选择一个CDN服务，比如Unpkg，然后在HTML文件中添加如下代码：

   <script src="https://cdn.jsdelivr.net/npm/lightense-images@latest/dist/lightense-images.min.js"></script>
   

三、项目的配置文件介绍

主要配置

实际上，lightense-images 的配置不是通过单独的配置文件进行，而是在实际使用过程中通过JavaScript代码或者HTML元素上的数据属性(data-*)来设置。这意味着你可以直接在使用Lightense()函数时提供配置对象，或者在图片元素上使用特定的数据属性来定制行为。

通过JavaScript配置：

Lightense('img', {
  time: 300, // 动画时间
  padding: 40, // 图像放大后的内边距
  offset: 40, // 触发偏移量
  keyboard: true, // 是否支持键盘操作
  cubicBezier: 'cubic-bezier(0.2, 0, 1, 1)', // 动画曲线
  background: 'rgba(255, 255, 255, 0.98)', // 放大图背景色
  zIndex: 2147483647 // 控制z-index
});

HTML 数据属性配置示例：

<img src="example.jpg"
     data-lightense-padding="40"
     data-lightense-background="rgba(0, 0, 0, 0.96)">

上述方法提供了灵活的方式来定制Lightense Images的行为，无需直接修改任何配置文件。确保在文档加载完成后调用Lightense以避免DOM未准备好就尝试操作图片。