jquery.panzoom 介绍
Panzoom是 一个 渐进的 插件 来创建元素的平移和缩放 功能 。 panzoom需要jQuery1.9.0+或jQuery2.0+。IE<=8 不支持 。Panzoom 支持 包括 iOS和Android的触摸手势，甚至 支持 捏缩放手势。它非常适合用于移动和桌面浏览器。Panzoom 支持 直接在浏览器平移和缩放SVG元素。
加载Panzoom
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="/js/plugins/jquery.panzoom.js"></script>
? 或AMD方式
define([ "jquery","plugins/jquery.panzoom" ],function( $ ) {
$(document).ready(function() {
$(".panzoom-elements").panzoom();
});
});
Panzoom使用
$(".panzoom-elements").panzoom();
// Pass options
$("a.panzoom-elements").panzoom({
minScale: 0,
$zo omr ange: $("input[type='range']")
});
Panzoom选项
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: dis ablePan also dis ables focal point zooming
dis ablePan: false,
dis ableZoom: false,
// Pan only on the X or Y axes
dis ableXAxis: false,
dis ableYAxis: 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 nor mal 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
// See the [demo](http://timmywil.github.io/jquery.panzoom/demo/#set) for an example.
// 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. `$button.on("click",function( e ) { e.preventDefault(); $elem.panzoom("zoom"); });` )
$zoomIn: $(),
$zoomOut: $(),
// Range input on which to bind zooming functionality
$zo omr ange: $(),
// 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 nor mally on the Panzoom element
// e.g. `$elem.on("panzoomend",function( e,panzoom ) { console.log( panzoom.getMatrix() ); });`
onStart: undefined,
onChange: undefined,
onZoom: undefined,
onPan: undefined,
onEnd: undefined,
onReset: undefined
};
GitHub: https://github.com/timmywil/panzoom
网站描述: 元素平移和缩放 插件
jquery.panzoom官方网站
官方网站：
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。