建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

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

来源:易助科技网浏览量:16收藏

简介

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

(下载的附件中附有使用DEMO)


插件依赖


namemin-versiondetail
jQuery3.3.1JavaScript的DOM操作框架
jquery.mousewheel1.6jQuery鼠标滚轮监听插件
Hammer.js2.0.4多点触控插件
EasyLoading.js0.1.0(可选) 加载动画库


使用

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