该插件支持给指定的Dom元素设置平移与缩放，并且支持移动端触摸，并兼容不支持CSS3的浏览器。

在PC上通过鼠标左键拖拽、滚轮缩放、双击放大。

在移动端上通过触摸事件交互。

使用方法

引入JQ与插件

<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="js/e-smart-zoom-jquery.min.js"></script>

添加元素

<div class="bd">
    <img src="pic.jpg" id="elementToZoomOn">
</div>

初始化插件

$(document).ready(function() {
    $("#elementToZoomOn").smartZoom({
        'dblClickEnabled': 1,
        'maxScale' : 1
    });
});

注意事项

• 初始化需要放置在$(document).ready()事件内，否则会报错
• 缩放元素不仅支持图片，也可以是任意元素，初始化前建议先用CSS设置好宽高，即原图大小
• 父元素建议设置与缩放元素一样比例的宽高，否则会出现两边留白

参数说明及注释

$("#elementToZoomOn").smartZoom({
    'top': '0',  // 以像素为单位缩放目标容器顶部位置
    'left': '0',  // 以像素为单位缩放目标容器左侧位置
    'width': '100%',  // 缩放目标容器宽度以像素或百分比
    'height': '100%',  // 以像素或百分比缩放目标容器高度
    'easing': 'smartZoomEasing',  // 当浏览器不支持 css 转换时使用的 jquery 缓动函数
    'maxScale': 3, // 将应用于缩放目标的最大比例
    'dblClickMaxScale': 1.8,  // 双击时将应用于缩放目标的最大比例
    'mouseEnabled': true,  // 启用插件鼠标交互
    'scrollEnabled': true,  // 启用插件鼠标滚轮 behviour
    'dblClickEnabled': true,  // 启用插件鼠标双击 behviour
    'mouseMoveEnabled': true,  // 启用插件目标拖动 behviour
    'moveCursorEnabled': true, // 显示用于拖动的移动光标
    'touchEnabled': true,  // 启用插件触摸交互
    'dblTapEnabled': true,  // 启用插件双击行为
    'pinchEnabled': true,  // 当用户捏住目标时启用缩放
    'touchMoveEnabled': true,  // 启用目标move via touch
    'containerBackground': '#FFFFFF',  // 缩放目标容器背景颜色（如果 containerClass 未设置）
    'containerClass': ''  // 如果您想更改背景或边框，则应用于缩放目标容器的类（不要通过 css 更改大小或位置）
})

事件方法说明

zoom方法 - 放大到指定位置

smartZoom("zoom", scaleToAdd, globalRequestedPosition, duration)

1. scaleToAdd {Number}：缩放倍数。
2. globalRequestedPosition {Object} : 要放大的位置。（默认目标中心，示例：{x: 100, y: 100}）
3. duration {Number}：以毫秒为单位的效果持续时间。（默认 700）

// 以单击点为中心放大到1倍
$('#elementToZoomOn').click(function(e) {
    var pageX = e.pageX;
    var pageY = e.pageY;
    $('#elementToZoomOn').smartZoom('zoom', 1, {'x': pageX, 'y': pageY});
})

pan方法 - 平移到指定位置

smartZoom("pan", pixelsToMoveOnX, pixelsToMoveOnY, duration)

1. pixelsToMoveOnX {Number} : 要在水平轴上平移的像素
2. pixelsToMoveOnY {Number}：要在垂直轴上平移的像素。
3. duration {Number}：以毫秒为单位的效果持续时间。（默认 700）

// 往右边和下边各移动10像素
$('#elementToZoomOn').smartZoom('pan', 10, 10);

destroy方法 - 删除并清理插件效果

smartZoom("destroy")

destroy方法 - 检查插件是否活动状态

smartZoom("isPluginActive"):Boolean

// 如果插件已激活，将其删除，否则将初始化。
if ($('#zoomImage').smartZoom('isPluginActive')) {
    $('#zoomImage').smartZoom('destroy');
} else {
    $('#zoomImage').smartZoom();
}

演示Demo，使用事件方法增加按钮

插件开源地址：

https://github.com/dams-dev/smartJQueryZoom

插件下载：