纯js轻量级图片放大显示插件

当前位置:主页 > jQuery库 > 图片效果 > 纯js轻量级图片放大显示插件
纯js轻量级图片放大显示插件
分享:

    插件介绍

    lightense-images是一款可以将缩略图片在屏幕中间放大显示的纯js插件。该图片放大插件的效果类似于Medium.com上的图片放大预览效果。

    浏览器兼容性

    浏览器兼容性
    时间:2016-07-20
    阅读:
简要教程

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

网友评论