ZoomMarker 一款用于图片滚动放大拖动,且可以添加标记的jQuery插件
2017-12-04 19:12
991 查看
ZoomMarker
猛戳这里导航至项目地址。一款用于图片滚动放大拖动,且可以添加标记的jQuery插件
在项目中需要实现类似地图应用那样的,具有鼠标滚动缩放和拖动功能的插件效果,且可以添加具有回调功能的标记点。在网上找了一圈都没有找到合适的,所以图方便自己写了一个。
如有任何功能问题或改进意见,欢迎反馈,感谢。
Preview效果预览
点击这里查看使用ZoomMarker和EasyLoading构建的图片拖拽、缩放、标记及加载动画的示例,使用鼠标或触屏点击在图片上添加标记点,鼠标悬浮在上面查看悬浮提示窗口,使用顶部按钮实现图片切换、清空标记点和加载动画示例等。Version版本
version | date | detail |
---|---|---|
0.0.1 | 2017.10.25 | 初始版本,基础功能 |
0.0.2 | 2017.11.3 | 引入Hammer.js处理鼠标操作 |
0.0.3 | 2017.11.8 | 优化接口API |
0.0.4 | 2017.11.11 | 修正图片显示比例错误的问题 |
0.0.5 | 2017.11.13 | 添加图像居中接口,修复重复初始化问题 |
Require依赖
name | min-version | detail |
---|---|---|
jQuery | 1.6 | JavaScript的DOM操作框架 |
jquery.mousewheel | 1.6 | jQuery鼠标滚轮监听插件 |
Hammer.js | 2.0.4 | 多点触控插件 |
EasyLoading.js | 0.1.0 | 加载动画库 |
如果您对EasyLoading感兴趣,欢迎加星。
Usages用法
引入ZoomMarker的JavaScript和CSS文件<link rel="stylesheet" href="css/zoom-marker.css"> <script src="js/zoom-marker.js"></script>
引入第三方依赖库
<script src="js/jquery-1.11.3.min.js"></script> <script src="js/jquery.mousewheel.min.js"></script> <script src="js/hammer.min.js"></script>
在示例中,使用了图像加载动画,为此您还需要引入EasyLoading插件,它也可以单独使用。如果您的项目中不需要使用加载动画,则不需要
引入该插件。
<link rel="stylesheet" href="css/easy-loading.css"> <script src="js/easy-loading.js"></script>
添加必要的html标签
<div id="zoom-marker-div" class="zoom-marker-div"> <img class="zoom-marker-img" id="zoom-marker-img" alt="..." name="viewArea" draggable="false"/> </div>
在ready()中调用初始化方法
$(document).ready(function () { $('#zoom-marker-img').zoomMarker({ src: "img/mountain.jpg", rate: 0.2, width: 600, max: 3000, markers:[ {src:"img/marker.svg", x:500, y:500} ] }); })
在上述例子中,你还需要在img/目录下添加一个名为moutain.jpg的文件用于显示图片,在img/目录下添加名为marker.svg的文件作为marker文件资源,我们已经在该工程对应目录下添加这两个文件。
现在你可以看到效果了,单击鼠标拖动图片,鼠标滚轮滚动放大缩小图片,添加的标记也会跟着移动。
Parameters参数
初始化时可传入以下可选参数。param | function | default |
---|---|---|
rate | 缩放速率 | 0.2 |
src | 图片资源 | null |
width | 图片加载宽度 | 500 |
min | 图片最小宽度 | 300 |
max | 图片最大宽度 | null |
markers | 标记点参数数组 | [] |
marker_size | 默认标记点尺寸 | 20 |
rate
缺省值0.2该浮点型参数决定了图片滚动放大时的速率,值越大图片缩放速度越快,范围{0, 1}。
src
缺省值null,不加载图片图片加载的路径
width
用于配置图片加载后的宽度,请不要使用100%之类的相对宽度定位,会影响ZoomMarker的工作。如果你要使图片的宽度与父节点宽度相同,可以使用jQuery的方法获取父节点宽度,或直接获取”zoom-marker-div”标签的宽度,如:
$("#zoom-marker-img").parent().width(); $("#zoom-marker-div").width();
min
限定图片缩放的最小宽度,默认最小宽度为300px。max
限定图片缩放的最大宽度,默认不做限制。markers
记录了标记点的参数,包含以下几个参数。{ src: "img/marker.png", // (required)图片加载路径 x: 500, // (required)标记点在图片中的X坐标 y: 500, // (required)标记点在图片中的Y坐标 click: function(object){ // 点击回调方法,object为marker的jQuery对象 } }
marker_size
标记点尺寸只能为正方形,通过这个参数可以配置标记点的大小,你也可以在”zoomMarker_AddMarker”添加标记点方法中通过参数配置单个标记点的大小。Methods方法
ZoomMarker的方法全都以”zoomMarker_”开头,直接在你的图片标签jQuery对象上使用jQuery插件的方法调用即可,如清空所有标记点:$("#viewArea").zoomMarker_CleanMarker();
name | function |
---|---|
zoomMarker_LoadImage(src) | 加载图像 |
zoomMarker_Zoom(center, scale) | 缩放图片 |
zoomMarker_Move(x, y) | 移动图片 |
zoomMarker_AddMarker(marker) | 添加标记点 |
zoomMarker_RemoveMarker(markerId) | 删除标记点 |
zoomMarker_CleanMarker() | 清空标记点 |
zoomMarker_GetPicSize() | 获取记载图片尺寸 |
zoomMarker_LoadImage(src)
用于加载图像,src传入图片URL或本地路径。param | function |
---|---|
src | 图像资源路径或URL |
zoomMarker_Zoom(center, scale)
缩放图片。param | function |
---|---|
center | 缩放中心点,相对于document的绝对坐标 |
scale | 缩放比例,浮点型,如1.5为缩放到原图的1.5倍大小 |
zoomMarker_Move(x, y)
移动图片位置,笛卡尔坐标系,左上角坐标为(0, 0)。param | function |
---|---|
x | 图片左上角的目标纵坐标 |
y | 图片左上角的目标横坐标 |
zoomMarker_AddMarker(marker)
添加标记点并返回添加标记点的相关参数,marker的配置参数如下表所示。配置中的”x”和”y”参数均为标记点在图像中的坐标位置。
param | function | detault | required |
---|---|---|---|
x | 标记点在图像中的X坐标 | null | Y |
y | 标记点在图像中的Y坐标 | null | Y |
src | 标记点图标资源 | null | Y |
size | 标记点图标尺寸 | 20 | N |
dialog | 悬浮对话框 | null | N |
hint | 标记点内部内容 | null | N |
click | 标记点击回调 | null | N |
param | function | detault | required |
---|---|---|---|
value | 对话框内容 | “” | N |
style | CSS样式 | {} | N |
offsetX | 对话框X坐标偏移 | 0 | N |
offsetY | 对话框Y坐标偏移 | 0 | N |
param | function | detault | required |
---|---|---|---|
value | 标记点内容 | “” | N |
style | CSS样式 | {} | N |
param | function |
---|---|
id | 标记点ID |
marker | 标记点的jQuery对象 |
param | 用户传入的标记点配置参数 |
zoomMarker_RemoveMarker(markerId)
删除标记点,传入标记点ID,ID可从”zoomMarker_AddMarker(marker)”返回结构体中的”id”项获取。zoomMarker_CleanMarker()
清空所有标记点。zoomMarker_GetPicSize()
获取加载图片的真实尺寸,只有当图片加载结束的时候才会返回正确的图片尺寸。return函数返回对象
param | function |
---|---|
width | 图片宽度 |
height | 图片高度 |
Event事件
通过”on”或”bind”监听ZoomMarker发送的事件。// 监听图片资源加载结束消息,更新UI资源。 $('#zoom-marker-img').on("zoom_marker_img_loaded", function(event, size){ console.log("image has been loaded with size: "+JSON.stringify(size)); /** 更新UI操作 **/ ... });
name | function | param | detail |
---|---|---|---|
zoom_marker_img_load | 图片开始加载 | src | 图片资源路径或URL |
zoom_marker_img_loaded | 图片已加载完成 | size | 图片尺寸 |
zoom_marker_click | 标记点点击 | markerObj | 标记点对象 |
zoom_marker_mouse_click | 图片点击 | mouseObj | 图片点击对象 |
size
param | function |
---|---|
width | 图片宽度 |
height | 图片高度 |
markerObj
param | function |
---|---|
id | 标记点ID |
marker | 标记点的jQuery对象 |
param | 用户传入的标记点配置参数 |
mouseObj
param | function |
---|---|
pageX | 点击位置在document中的X坐标 |
pageY | 点击位置在document中的Y坐标 |
x | 点击位置在图像坐标中的X坐标 |
y | 点击位置在图像坐标中的Y坐标 |
相关文章推荐
- jquery元素分组插件,用于把一连串元素分成多组,如把多个a标签分成多组放入<li>元素中,可以用于简化多图滚动为一个元素滚动,兼容ie6
- 一张图片 点击鼠标放大,再点缩小 ( 基于jquery1.8.3), 另外推荐一款插件:lightBox...效果不错。
- 大神们有知道图片上怎么添加多个可以随意拖动的标记吗?
- Jquery插件 - 可以随着滚动条的滚动而即时加载图片
- Jquery插件 - 可以随着滚动条的滚动而即时加载图片
- jQuery懒加载插件-lazyload(还有 jquery.scrollLoading 插件也可以实现图片滚动加载)
- 一款基于jQuery可放大预览的图片滑块插件
- 一款基于jQuery可放大预览的图片滑块插件
- Jquery插件 - 可以随着滚动条的滚动而即时加载图片
- 一款很好用的jquery图片滚动插件-jquery.flexslider.js
- jQuery插件,图片切割效果,配合PHP可以实现图片切割和调整尺寸
- android利用抽屉添加图片,点击图片可以放大显示
- 用于图片处理的10个超级jQuery插件
- 图片局部放大插件-jquery.jQZoom.js
- jQuery插件MovingBoxes实现左右滑动中间放大图片效果
- 一个超级的jquery选项卡 图片切换 不间断滚动插件
- jQuery插件-div中滚动图片
- 10款jQuery图片左右滚动插件
- 给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动
- 一款手机端的jQuery图片滑块插件