Skip to content

Latest commit

 

History

History

previewImg

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 

原生js实现拖拽缩放预览图片插件

前言

插件功能暂只满足我司业务需求,如果希望有更多的功能,可在下方留言,我尽量扩展!如果你有需要或者喜欢的话,可以给我github来个star 😆

仓库地址

在线预览

准备

  1. 引入preview.js文件
  2. 指定一个容器的id,插件只预览该容器内的图片,举个栗子🌰:
<div id="wrap">
    <div>
        <img src="./data/girl1.jpg" alt="" />
    </div>
    <img src="./data/girl2.jpg" alt="" />
    <img src="./data/girl3.jpg" alt="">
</div>

其中id为wrap的div就是 2 中所指的容器。插件只预览该容器下的所有图片。

var preview = new Preview({
    imgWrap: 'wrap' // 指定该容器里的图片点击预览
})

imgWrap键的值就是容器的id

  1. 如果觉得样式不满意什么的,可以直接css覆盖就可以了。

预览

girl

总结

如有疏忽或错误,希望您及时指出可Issues,我会尽早修改😆。有什么需要交流的可在评论区与我交流