该插件支持给指定的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)
scaleToAdd
{Number}:缩放倍数。globalRequestedPosition
{Object} : 要放大的位置。(默认目标中心,示例:{x: 100, y: 100}
)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)
pixelsToMoveOnX
{Number} : 要在水平轴上平移的像素pixelsToMoveOnY
{Number}:要在垂直轴上平移的像素。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