【前端实用插件】网页图片放大预览

简介

前端开发中，有时候会遇到将网页中的图片点击放大进行预览，自己写的话，还是得费一番功夫，比较考察原生js能力，特别是拖拽，动画等等。这种效果还是比较常见的，比如掘金的网站，我们点开一篇专栏的时候，可以点开具体某一张图片进行预览，是不是很nice，为了更好的搬砖，推荐一款图片预览插件====》Views.js

下载

npm install viewerjs

用法

//element：显示图片的元素
//options：配置项，各种功能，都可以根据配置项进行设置
new Viewer(element[, options])//通过实例化，配置项的方式

事例

//HTML代码
<div>
  <img id="image" src="picture.jpg" alt="Picture">
</div>

<div>
  <ul id="images">
    <li><img src="picture-1.jpg" alt="Picture 1"></li>
    <li><img src="picture-2.jpg" alt="Picture 2"></li>
    <li><img src="picture-3.jpg" alt="Picture 3"></li>
  </ul>
</div>
//js代码
// import 'viewerjs/dist/viewer.css';//样式文件不要忘了
import Viewer from 'viewerjs';

//实例化，传入配置项
const viewer = new Viewer(document.getElementById('image'), {
  inline: true,
  viewed() {
    viewer.zoomTo(1);
  },
});
//接下来，你只需要点击图片或者主动调动viewer.show()方法就可以预览了 

效果截图

总结

用法还是很简单的，具体的使用参考github官方文档：github.com/fengyuanche… 好了今天分享到这了，有用记得收藏关注哦！