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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!