图片预览插件,纯js编写,适合任意框架

最近需要使用预览图片的功能,改写一些库(我找不到原网址了,找到补上),实现了纯js的预览,脱离框架,方便跨平台使用。

安装:

js 复制代码
npm i preview-img-js

最简单实用:

shell 复制代码
import {preivew-img} from 'preview-img-js';
previewImg('https://blog-huahua.oss-cn-beijing.aliyuncs.com/blog/code/typora-user-images/image-20221016081802807.png')
// 也可以是img元素,previewImg(img元素)

效果图如下:

更多参数设置

js 复制代码
options = {
  isListenWheel: false, // 是否监听滚轮事件,默认不监听
  startZoom: 1, // 缩放比例,默认值为1,表示不缩放
  isClickShadeClose: true, // 是否点击遮罩层关闭,默认为true
  colorMask: 'rgba(0,0,0,.7)', // 遮罩层的颜色,默认为rgba(0,0,0,.7)
  hasCloseBox: true, // 是否有关闭按钮,默认为true
  hasActionBox: true, // 是否有操作按钮,默认为true
  hasAnimateWhenIsImgEl: false, // 当传入值是el是否有动画,默认为false
  afterCloseCallback: null, // 关闭之后的回调
  afterScaleCallback: null, // 改变尺寸之后的回调
}
previewImg(url,options)
相关推荐
咔咔咔索菲斯10 分钟前
Vue 中mounted 生命周期钩子的执行时机和 v-for 的渲染顺序
前端·javascript·vue.js
前端小咸鱼一条10 分钟前
Vue响应式原理一:认识响应式逻辑
前端·javascript·vue.js
初心w50t242 分钟前
Vue 前端开发性能优化攻略
前端·javascript·vue.js
{⌐■_■}42 分钟前
【软件工程】tob和toc含义理解
前端·数据库·mysql·golang·软件工程·tidb
码农捻旧1 小时前
前端性能优化:从之理论到实践的破局道
前端·性能优化
3Katrina1 小时前
前端面试之防抖节流(一)
前端·javascript·面试
kk_stoper1 小时前
使用Ruby接入实时行情API教程
java·开发语言·javascript·数据结构·后端·python·ruby
浏览器API调用工程师_Taylor2 小时前
自动化重复任务:从手动操作到效率飞跃
前端·javascript·爬虫
赵润凤2 小时前
Vue 高级视频播放器实现指南
前端
FogLetter2 小时前
从原生JS事件到React事件机制:深入理解前端事件处理
前端·javascript·react.js