jquery图片放大拖动和标记功能插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款用于图片滚动放大和拖动，且可以添加标记的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