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

zhonghanwen 发布于2019-08-26 11:44 / 1278人阅读

摘要：插件只预览该容器下的所有图片。指定该容器里的图片点击预览键的值就是容器的如果觉得样式不满意什么的，可以直接覆盖就可以了。预览总结如有疏忽或错误，希望您及时指出，我会尽早修改。有什么需要交流的可在评论区与我交流

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

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

仓库地址
在线预览

准备

引入preview.js文件

指定一个容器的id，插件只预览该容器内的图片，举个栗子?：

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

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

imgWrap键的值就是容器的id

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

预览

总结

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

云服务器 GPU云服务器原生js实现拖拽图片缩放拖拽 js拖拽插件 js文本框拖拽插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107464.html

h5实现移动端图片预览器（一）

摘要：最近接触移动端开发。自己写一个类似微博的图片预览器来学习一下移动端手势的实现和的属性的使用。在发生时将坐标位置向减得到位移量。双手势单手势双手势单手势触发移动事件图片放大功能的实现我采用了的属性进行缩放，并且设置来设置缩放中心位置。最近接触vue.js移动端开发。自己写一个类似微博的图片预览器来学习一下移动端手势的实现和css3的属性的使用。目标分析首先分析图片预览器的功能： 1...

Shonim 2019-08-22 14:02 评论0 收藏0
一个简易的DIY场景H5框架

摘要：笔者也用操作的形式做了一个类似项目，现在整合成一个简易的框架分享给大家，只需要根据自己的需要完成布局与样式的编写，以及按下面指示操作，就可以生成一个自己的空间定制。第一次发项目，以供大家学习参考，可能有些简陋，若有不合理处，请大神们指教。最近在朋友圈出现了很多DIY类的H5游戏，通过添加拖拉摆放和组合元素，来DIY自定义一个场景并合成图片分享出去的新H5展示形式。笔者也用操作DOM...

dongxiawu 2019-08-22 16:20 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

netmou 2019-08-23 12:28 评论0 收藏0