插件 jQuery.panzoom 中文API文档

 

　　源码 & 下载

 

　　插件特点

 

　　一个jQuery插件，用于使用CSS3平移和缩放元素。

 

　　Panzoom是一个渐进式插件，可为元素创建平移和缩放功能。

 

　　Panzoom不是在图像标签上设置宽度和高度，而是使用CSS变换和矩阵函数来利用浏览器中的硬件/ GPU加速，

 

　　这意味着元素可以是任何东西：图像，视频，iframe，画布，文字，无论如何。

 

　　包含在此repo中的jquery.panzoom.min.js(12.5kb / 4.6kb gzip)使用uglifyjs进行压缩。

 

　　有关常见支持问题，请参阅底部的常见问题解答。

 

　　依赖

 

　　jquery.panzoom更喜欢jQuery 3.0.0+，但适用于jQuery 1.9.0+和jQuery 2.0.0+。jquery.panzoom支持IE9 +。

 

　　移动支持

 

　　Panzoom包括对触摸手势的支持，甚至还支持用于缩放的捏合手势。它非常适合移动和桌面浏览器。你会对你在移动设备上的表现感到惊讶。

 

　　支持iOS和Android。

 

　　支持指针(IE 10+)，触摸和鼠标事件。

 

　　SVG支持

 

　　Panzoom支持在支持SVG的浏览器中直接平移和缩放SVG元素。

 

　　在IE9-11和Edge 13-14 +中，CSS动画/过渡不适用于SVG元素，至少对于变换样式。它们可以在其他浏览器中使用。

 

　　可以通过覆盖setTransform()方法并为javascript动画(例如tween.js)集成补间库，在这些浏览器中手动实现转换。

 

　　兼容性说明： Firefox存在已知问题并使用该focal选项。Firefox无法正确维护SVG父元素的维度，这会抛弃偏移量。如果使用focalSVG选项，则解决方法是使用Panzoom.prototype.parentOffset(示例)手动在Panzoom实例上设置正确的偏移量。

 

　　加载Panzoom

 

　　Panzoom可以包含在身体末尾的脚本中，但是Panzoom支持AMD用于javascript模块的爱。

 

　　使用脚本标签：

 

　　使用AMD加载器的匿名模块：

 

　　define([ "jquery", "plugins/jquery.panzoom" ], function( $ ) {

 

　　$(document).ready(function() {

 

　　$(".panzoom-elements").panzoom();

 

　　});

 

　　});

 

　　初始化

 

　　$(".panzoom-elements").panzoom();

 

　　// Pass options

 

　　$("a.panzoom-elements").panzoom({

 

　　minScale: 0,

 

　　$zoomRange: $("input[type='range']")

 

　　});

 

　　选项

 

　　可以通过像任何其他插件一样传递对象文字

 

　　或使用"option"方法来覆盖所有选项。

 

　　查看包含和反向包含选项的演示。