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

您所在的位置：网站首页 › html点击图片放大预览 › 【前端实用插件】网页图片放大预览

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

2023-12-19 02:29| 来源: 网络整理| 查看: 265

简介

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

下载 npm install viewerjs 用法 //element：显示图片的元素 //options：配置项，各种功能，都可以根据配置项进行设置 new Viewer(element[, options])//通过实例化，配置项的方式事例 //HTML代码 span"Picture"/span

//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… 好了今天分享到这了，有用记得收藏关注哦！

【本文地址】

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

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

今日新闻

推荐新闻