您的位置: 首页 >日志>前端技术>详细内容

前端技术

smartJQueryZoom - JQ图片任意缩放与拖拽插件

来源:本站原创 发布时间:2021-09-30 14:43:10 浏览次数: 【字体:

该插件支持给指定的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方法  -  放大到指定位置

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

pan方法 - 平移到指定位置

// 往右边和下边各移动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://www.xueyidian.cn/demo/smart-zoom/

插件开源地址:

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

插件下载:

202109301442434513.zip

×

用户登录