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

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

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

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

1
$ npm install lightense-images --save

使用方法
在页面中引入lightense.js文件。

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

HTML结构
在页面中添加图片元素。

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

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

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

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

1
2
3
4
5
6
7
8
9
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属性来设置配置参数。

1
2
3
4
5
<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">
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论