JQuery图片滚动放大拖动标记插件ZoomMarker

简介

ZoomMarker是一款用于图片滚动放大拖动，且可以添加标记的jQuery插件。

（下载的附件中附有使用DEMO）

插件依赖

使用

1.  引入文件

<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>

2.  HTML

添加必要的html标签，注意img标签必须包含唯一的id属性

<div id="zoom-marker-div">
    <img id="zoom-marker-img" alt="..." name="viewArea"  draggable="false"/>
</div>

3.  调用

在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}
    ]
  });
})

相关链接

GitHub 地址：https://github.com/NoticeVengus/ZoomMarker

Gitee 地址：https://gitee.com/yeye0922/ZoomMarker