html菜鸟教程zoom，插件jQuery.panzoom中⽂API⽂档
插件 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"⽅法来覆盖所有选项。
查看包含和反向包含选项的演⽰。
Panzoom.defaults = {
// Should always be non-empty
// Used to bind jQuery events without collisions
// A guid is not added here as different instantiations/versions of Panzoom // on the same element is not supported.
eventNamespace: ".panzoom",
// Whether or not to transition the scale
transition: true,
// Default cursor style for the element
cursor: "move",
// There may be some use cases for zooming without panning or vice versa // NOTE: disablePan also disables focal point zooming
easyui开源协议disablePan: false,
disableZoom: false,
// Pan only on the X or Y axes
disableXAxis: false,
disableYAxis: false,
// Set whether you'd like to pan on left (1), middle (2), or right click (3) which: 1,
// The increment at which to zoom
// Should be a number greater than 0
increment: 0.3,
// When no scale is passed, this option tells
// the `zoom` method to increment
/
/ the scale *linearly* based on the increment option.
// This often ends up looking like very little happened at larger zoom levels.
// The default is to multiply/divide the scale based on the increment.
linearZoom: false,
// Pan only when the scale is greater than minScale
panOnlyWhenZoomed: false,
// min and max zoom scales
minScale: 0.4,
maxScale: 5,
// The default step for the range input
// Precendence: default < HTML attribute < option setting
rangeStep: 0.05,
// Animation duration (ms)
duration: 200,
// CSS easing used for scale transition
easing: "ease-in-out",
// Indicate that the element should be contained within its parent when panning
// Note: this does not affect zooming outside of the parent
// Set this value to 'invert' to only allow panning outside of the parent element (the opposite of the normal use of contain) // 'invert' is useful for a large Panzoom element where you don't want to show anything behind it
contain: false,
// Transform value to which to always reset (string)
// Defaults to the original transform on the element when Panzoom is initialized
startTransform: undefined,
// This optional jQuery collection can be set to specify all of the elements
// on which the transform should always be set.
// It should have at least one element.
// This is mainly used for delegating the pan and zoom transform settings
// to another element or multiple elements.
// The default is the Panzoom element wrapped in jQuery
// Note: only one Panzoom element will still handle events for a Panzoom instance.
// Use multiple Panzoom instances for that use case.
$set: $elem,
/
/ Zoom buttons/links collection (you can also bind these yourself - e.g. `$("click", function( e ) {
e.preventDefault(); $elem.panzoom("zoom"); });` )
$zoomIn: $(),
$zoomOut: $(),
// Range input on which to bind zooming functionality
$zoomRange: $(),
// Reset buttons/links collection on which to bind the reset method
$reset: $(),
// For convenience, these options will be bound to Panzoom events
// These can all be bound normally on the Panzoom element
// e.g. `$("panzoomend", function( e, panzoom ) { console.log( Matrix() ); });`
onStart: undefined,
onChange: undefined,
onZoom: undefined,
onPan: undefined,
onEnd: undefined,
onReset: undefinedjquery下载文件插件
};
⽅法
可以使⽤与jQuery UI⼩部件⼯⼚中的窗⼝⼩部件相同的⽅式调⽤⽅法。调⽤时传递⽅法名称 panzoom()。字符串被解释为⽅法名称。option()
// One at a time
// Sets the scale increment option
dz商业插件$elem.panzoom("option", "increment", 0.4);
// Several options at once
$elem.panzoom("option", {
increment: 0.4,
minScale: 0.1,
maxScale: 2,
duration: 500,
$reset: $("a.reset-panzoom, set-panzoom")
});玳瑁猫是谁生出来的
任何选项都可以更改。请参阅上⾯的默认值以获取列表。
织梦源reset( [options] )
参数
options {Object | Boolean}：如果传递了布尔值，则为重置设置动画(默认值：true)。如果传递了选项对象，则将其传递给setMatrix。
options.silent {Boolean}：使重置事件(以及更改事件静⾳，因为相同的选项传递给setMatrix)
$elem.panzoom("reset");
$elem.panzoom("reset", false);
$elem.panzoom("reset", {
animate: false,
contain: false
});
将变换矩阵重置为其原始值。所有平移和缩放都将重置。
resetZoom( [options] )
参数
options {Object | Boolean}：如果传递了布尔值，则为重置设置动画(默认值：true)。如果传递了选项对象，则将其传递给zoom。$elem.panzoom("resetZoom");
$elem.panzoom("resetZoom", false);
$elem.panzoom("resetZoom", {
animate: false,
silent: true
});
将⽐例重置为其原始值(将矩阵中的两个⽐例值重置为其原始值)。
resetPan( [options] )
参数
options {Object | Boolean}：如果传递了布尔值，则为重置设置动画(默认值：true)。如果传递了选项对象，则将其传递给pan。$elem.panzoom("resetPan");
$elem.panzoom("resetPan", false);
$elem.panzoom("resetPan", {
animate: false,
silent: true
});
将平移重置为其原始值。
pan( x, y[, options] )
参数
x {Number}：要设置的翻译X值
y {Number}：要设置的翻译Y值
options {Object}：这些选项也传递给setMatrix。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论