图片/图形
Medium. 图片缩放预览jQuery插件
PetitQ
lightense-images 是一款纯 js 仿 Medium.com 图片缩放预览插件。该插件没有任何依赖，压缩后的版本仅 2KB，可以用来制作图片的预览和展示效果。
使用方法
在页面中引入 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
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
