Viewer.js 是一款强大的图片预览查看器,之前在做项目的时候遇到的是无法给网页中的图片添加一个强大的预览功能,而Viewer.js刚好满足了我的需求。本文就简单的介绍一下这样一个神奇的图片预览插件:
//原生版本
https://github.com/fengyuanchen/viewerjs
//jquery版本
https://github.com/fengyuanchen/jquery-viewer
从功能来看,这是一款功能强大的图片预览插件,对于基本的需求大多数都可以满足,而且自带原生版本和jquery版本,方便使用!
现在大多数情况直接使用npm进行安装,当然也可以下载发不好的js文件进行使用
npm install viewerjs
new Viewer(element[, options])
// import 'viewerjs/dist/viewer.css';
import Viewer from 'viewerjs';
// View an image
const viewer = new Viewer(document.getElementById('image'), {
inline: true,
viewed() {
viewer.zoomTo(1);
},
});
// View a list of images
const gallery = new Viewer(document.getElementById('images'));
由于排版原因,这里直接放截图,或者大家可以到Github上查看详细的配置
Viewerjs的作者不仅仅是这样一个作品,他还有一个另外的图片类作品,Web端的图片裁剪插件,同样推荐给大家:
https://github.com/fengyuanchen/cropperjs
不得不感谢这样的优秀作品的作者提供了如此优雅的工具,几行代码就可以实现强悍的图片预览功能,如果有类似需求的朋友千万不要错过!
页面更新:2024-02-28
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号