Lightense是一个无依赖的纯 JavaScript 图像放大灯箱缩放插件

Lightense是一个无依赖的纯 JavaScript 图像放大灯箱缩放插件，小于 2KB（压缩）。

特征：

在灯箱弹出窗口中显示放大的图像。

简化弹出窗口的自定义背景颜色。

向上/向下滚动页面时自动拒绝。

使用方式：

第一步将 Lightense.js JavaScript 库放在网页底部。

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lightense.js"></script>

如何是npm的话

$ npm install lightense-images --save
$ yarn add lightense-images

第二步准备图片dom

<img src="//repo.bfw.wiki/bfwrepo/image/61de6e39623c8.png" data-background="rgba(0, 0, 0, 0.8)" class="lightense">

还可以通过链接打开图片

<a class="lightense" data-image="//repo.bfw.wiki/bfwrepo/image/61de6e39623c8.png" >点我</a> 

第三步配置参数

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

{
  time: 300, // animation speed
  padding: 40,
  offset: 40,
  keyboard: true,
  cubicBezier: 'cubic-bezier(.2, 0, .1, 1)',
  background: 'rgba(255, 255, 255, .98)',
  zIndex: 2147483647
};

js修改

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
});

<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">

还可以设置部分图片不使用这个插件

<img src="photo.jpg" class="no-lightense">
<script>
  window.addEventListener('load', function () {
    Lightense('img:not(.no-lightense)');
  }, false);
</script>

<img
  src="https://d349cztnlupsuf.cloudfront.net/girls_dead_monster_logo.png"
  before-show-alert="Showing!"
  after-show-alert="Showed!"
  before-hide-alert="Hiding!"
  after-hide-alert="Hidden!"
/>
<script>
  window.addEventListener("load", function() {
    Lightense("img:not(.no-lightense),.lightense", {
      beforeShow(config) {
        var beforeShowAttr = config.target.getAttribute("before-show-alert");
        beforeShowAttr && alert(beforeShowAttr);
      },
      afterShow(config) {
        var afterShowAttr = config.target.getAttribute("after-show-alert");
        afterShowAttr && alert(afterShowAttr);
      },
      beforeHide(config) {
        var beforeHideMessage = config.target.getAttribute("before-hide-alert");
        beforeHideMessage && alert(beforeHideMessage);
      },
      afterHide(config) {
        var afterHideMessage = config.target.getAttribute("after-hide-alert");
        afterHideMessage && alert(afterHideMessage);
      }
    });
  }, false);
</script>