前言
一个不需要其他依赖的图片查看器插件,您仅需要引入单个js,然后初始化它,既可使用。
使用也仅需要给它一个src,然后使用show方法进行显示,效果图如下。
初始化
使用 const imageViewer = new ImageViewer();
来进行初始化,就可以开始使用它了。
调用
您只需要拿到图片的src后,调用刚才定义的对象imageViewer
,然后在通过imageViewer.changeImg(src);
将图片的地址传给图片查看器,再通过imageViewer.show();
show方法进行显示即可。在显示后,如果您需要隐藏可以通过右上角的关闭按钮进行关闭,或者调用imageViewer.hide();
hide方法。
功能
- 图片打开的默认最大宽高是屏幕高度的95%,但用户如果挑了显示比例加浏览器放大可能会出现偏差。
- 点击右上角X号图标可以关闭图片查看器。
- 点击右下角的放大缩小可以进行放大图片或者缩小图片。
- 图片查看器按住CTRL键滚轮滚动可以进行放大缩小,最大可放大至500%,或缩小至50%。
- 按住CTRL+鼠标拖拽图片,可以在屏幕上拖动图片。
- 按住CTRL+0进行复位。(定位复位+大小复位)
后续计划
- 目前仅在chrome上测试过,未在其他浏览器进行测试,以及未测试各种显示比例情况是否会显示错误,我会找时间进行一个较为完整的测试。
- show方法与hide方法增加回调
更新说明
日期 | 更新类型 | 更新说明 |
---|---|---|
2021-07-22 | 新增功能 | 新增一个当前倍率的显示框 |
源码
1 | /** |
I'm so cute. Please give me money.
- 本文链接:http://blog.oldking.site/2021/07/22/%E6%BA%90%E7%A0%81%E5%88%86%E4%BA%AB%20-%20%E5%9B%BE%E7%89%87%E6%9F%A5%E7%9C%8B%E5%99%A8/
- 版权声明:本博客所有文章除特别声明外,均默认采用 许可协议。