帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

Js平移缩放插件 支持网页中任意元素放大/缩小

帝国模板之家 2020-12-05 网页特效 评论

 插件介绍

这是一款简单,快速的Js平移缩放插件,性能好,使用CSS3来拖动、平移、放大/缩小网页中的任何元素,支持平移和缩放图像、文本、视频、div和许多其他html元素。

使用方法

1. 在html页面中加载插件文件。 

<script src="panzoom.min.js"></script>

2. 创建要应用平移和缩放功能的html标签。

<div id="panzoom"> 
  <img src="1.svg" width="900" height="900"> 
</div>

3. 创建放大/缩小控制按钮

<button id="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range">
<button class="reset">Reset</button>

4. 插件初始化。

const element = document.getElementById('panzoom')
const panzoom = Panzoom(element, {
      // options here
});

// enable mouse wheel
const parent = element.parentElement
parent.addEventListener('wheel', panzoom.zoomWithWheel);

5.插件默认选项。

// Whether or not to transition the scale
animate: false,

// This option treats the Panzoom element's parent as a canvas. 
// Effectively, Panzoom binds the down handler to the parent instead of the Panzoom element, so that pointer events anywhere on the "canvas" moves its children. 
canvas: false,

// Default cursor style for the element
cursor: 'move',

// Disable panning and zooming
disablePan: false,
disableZoom: false,

// Pan only on the X or Y axes
disableXAxis: false,
disableYAxis: false,

// Animation duration (ms)
duration: 200,

// CSS easing used for scale transition
easing: 'ease-in-out',

// An array of elements to exclude
exclude: [],

// Or add the CSS class to element that should be excluded
excludeClass: 'panzoom-exclude',

// Override the default handle start event here
handleStartEvent: function (e) {
  e.preventDefault();
  e.stopPropagation();
},

// min/max scale factors
maxScale: 4,
minScale: 0.125,

// CSS overflow property
overflow: 'hidden',

// Disable panning while the scale is equal to the starting value
panOnlyWhenZoomed: false,

// When passing x and y values to .pan(), treat the values as relative to their current values
relative: false,

// Override the transform setter. 
setTransform: setTransform,

// X Value used to set the beginning transform
startX: 0,

// Y Value used to set the beginning transform
startY: 0,

// Scale used to set the beginning transform
startScale: 1,

// Step options
step: 0.3,

// Contain the panzoom element either inside or outside the parent.
// "inside" | "outside"
contain: null,

// set touch-action on both the Panzoom element and its parent
touchAction: 'none'

6. API方法.

// destroy the instance
panzoom.destroy();

// get options
panzoom.getOptions();

// get the current x/y translation
panzoom.getPan();

// get the current scale
panzoom.getScale();

// pan the Panzoom element to given x and y coordinates
panzoom.pan(x, y, OPTIONS);

// reset the Panzoom element
panzoom.reset(OPTIONS);

// set/update options
panzoom.setOptions(OPTIONS);

// set styles
panzoom.setStyle(name, value);

// zoom the Panzoom element to a given scale
panzoom.zoom(scale, OPTIONS);

// zoom in the Panzoom element
panzoom.zoomIn(OPTIONS);

// zoom out the Panzoom element
panzoom.zoomOut(OPTIONS);

// zoom the Panzoom element to a focal point using the given pointer/touch/mouse event or constructed point.
panzoom.zoomToPoint(point, pointerEvent, OPTIONS);

// zoom with mouse wheel
// Bind the default down, move, and up event listeners to the Panzoom element. 
// This does not normally need to be called. 
// It gets called by default when creating a new Panzoom object, but can be skipped with the noBind option.
panzoom.bind();

7. 时间处理函数.

// The event object passed as an argument to the listener will always have a detail property with the current x, y, and scale values.
// Events can be silenced when the silent option is set to true, either globally or when passed to pan, any zoom method, or reset.
// Avoid putting too much logic in these event handlers as it could effect the performance of panning or zooming.

element.addEventListener('panzoomstart', (event) => {
  // do something
});

element.addEventListener('panzoomchange', (event) => {
  // do something
});

element.addEventListener('panzoomzoom', (event) => {
  // do something
});

element.addEventListener('panzoompan', (event) => {
  // do something
});

element.addEventListener('panzoomend', (event) => {
  // do something
});

element.addEventListener('panzoomreset', (event) => {
  // do something
});
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言