lightense-images是一款可以将缩略图片在屏幕中间放大显示的纯js插件。该图片放大插件的效果类似于Medium.com上的图片放大预览效果。它的特点有:
- 轻量级,压缩后的版本仅2KB。
- 点击缩略图后,以lightbox的方式来显示放大图片。
- 可以自定义背景遮罩层的颜色和透明度。
- 在页面滚动时自动将大图恢复为缩略图。
使用方法
在页面中引入lightense.js文件。
<script type="text/javascript" src="path/to/lightense.js"></script>
初始化插件
可以使用下面的方法来初始化该图片放大插件。
window.addEventListener('load', function () { var el = document.querySelectorAll('img.lightense'); Lightense(el); }, false);
你可以为图片<img>
元素设置data-background
属性来修改背景遮罩层的颜色和透明度。
<img src="demo.png" data-background="rgba(0, 10, 45, .6)" class="lightense">
得到的效果类型下图:
你也可以在超链接元素中通过data-image
属性来指定要打开的图片。
<a class="lightense" data-image="demo.png">点击打开图片</a>
lightense-images图片放大插件的github地址为:https://github.com/sparanoid/lightense-images
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!