这是一款用于图片滚动放大和拖动,且可以添加标记的jQuery插件。该jquery插件具有对图片进行鼠标滚动缩放和拖动功能的插件效果,且可以添加具有回调功能的标记点。

使用方法

在页面中引入zoom-marker.css和zoom-marker.js文件。

<link rel="stylesheet" href="css/zoom-marker.css">
<script src="js/zoom-marker.js"></script>                  
                
HTML结构

对要进行放大和拖动的图片使用下面的HTML结构:

<div id="picview" class="picview">
    <img src="..." alt="..." name="viewArea" id="viewArea" draggable="false"/>
</div>
                
初始化插件

在页面DOM元素加载完毕之后,通过下面的方法来对插件进行初始化。

$(document).ready(function () {
    $('#viewArea').zoomMarker({
        src: "img/mountain.jpg",
        rate: 0.2,
        markers:[
            {src:"img/marker.png", x:500, y:500},
            {src:"img/marker.png", x:0, y:0},
            {src:"img/marker.png", x:1280, y:720, size:20},
            ]
    });
})               
                

该插件实现的效果类似下面的样子:

图片滚动放大和拖动及标记效果

配置参数

插件在初始化时可以传入以下参数:

  • rate:缩放速率,缺省值0.2。该浮点型参数决定了图片滚动放大时的速率,值越大图片缩放速度越快,范围{0, 1}。
  • src:图片资源,缺省值null,不加载图片。图片加载的路径。
  • markers:标记点参数数组,记录了标记点的参数,包含以下几个参数。例如:
    {
        src:"img/marker.png",   // (required)图片加载路径
        x:500,                  // (required)标记点在图片中的X坐标
        y:500                   // (required)标记点在图片中的Y坐标
    }
    

该jquery图片放大拖动和标记功能插件的gihub地址为:https://github.com/yeye0922/ZoomMarker