纯js仿Medium.com图片缩放预览插件

lightense-images是一款纯js仿Medium.com图片缩放预览插件。该插件没有任何依赖，压缩后的版本仅2KB，可以用来制作图片的预览和展示效果。

安装

可以通过npm来安装该图片缩放预览插件。

$ npm install lightense-images --save                  
                

使用方法

在页面中引入lightense.js文件。

<script src="js/lightense.js"></script>
                

HTML结构

在页面中添加图片元素。

<img src="photo.jpg" class="lightense">
                

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化该图片缩放预览插件。

window.addEventListener('load', function () {
  var el = document.querySelectorAll('img.lightense');
  Lightense(el);
}, false);
                

配置参数

该图片缩放预览插件可用的配置参数有：

Lightense(elements, {
  time: 300,
  padding: 40,
  offset: 40,
  keyboard: true,
  cubicBezier: 'cubic-bezier(.2, 0, .1, 1)',
  background: 'rgba(255, 255, 255, .98)',
  zIndex: 2147483647
});
                

也可以通过data属性来设置配置参数。

<img src="image.png"
  data-lightense-padding="40"
  data-lightense-cubic-bezier="cubic-bezier(.2, 0, .1, 1)"
  data-lightense-background="rgba(255, 255, 255, .98)"
  data-lightense-z-index="2147483647">
                

该图片缩放预览插件的github网址为：https://github.com/sparanoid/lightense-images