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

前言

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

仓库地址 > 在线预览

准备

引入 preview.js 文件
指定一个容器的 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 中所指的容器。插件只预览该容器下的所有图片。

1
2
3

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

imgWrap 键的值就是容器的 id

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

预览

girl

总结

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

2020-04-02

docker从零搭建jenkins

持续集成

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

前言

准备

预览

总结

喜欢这篇文章？打赏一下作者吧

评论

链接

分类

标签云

最新文章

归档

标签

最新文章

归档

标签

Your browser is out-of-date!