Web前端开发网

fly63.com

首页 资源 工具 文章 教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下

关闭

搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

资源分类

AI智能 酷站推荐 招聘/兼职 框架/库 模块/管理 移动端UI框架 Web-UI框架 Js插件 Jquery插件 CSS相关 IDE环境 在线工具 图形动效 游戏框架 node相关 调试/测试 在线学习 社区/论坛 博客/团队 前端素材 图标/图库 建站资源 设计/灵感 IT资讯
提交资源 / 链接反馈

jquery.panzoom
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

GitHub:https://github.com/timmywil/panzoom
网站描述:元素平移和缩放插件
GitHub

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,
  $zoomRange: $("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: disablePan also disables focal point zooming
  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
  // 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
  $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. `$elem.on("panzoomend", function( e, panzoom ) { console.log( panzoom.getMatrix() ); });`
  onStart: undefined,
  onChange: undefined,
  onZoom: undefined,
  onPan: undefined,
  onEnd: undefined,
  onReset: undefined
};


仅供个人学习参考/导航指引使用,具体请以第三方网站说明为准,本站不提供任何专业建议。如果地址失效或描述有误,请联系站长反馈~感谢您的理解与支持!

链接: https://fly63.com/nav/1416

more>>
相关栏目
jQuery之家
致力于搜集和整理各种jQuery插件,jQuery特效...
官网
fullPage.js
jQuery全屏滚动插件
官网 GitHub
Waterfall.js
瀑布流无限加载插件
官网 GitHub
Raty
一个非常棒的jQuery 评分插件
官网 GitHub
Bootstrap-waterfall
一款基于Bootstrap仿Pinterest网站的网格瀑布流插件
官网 GitHub
Jcrop
一个功能强大的 jQuery 图像裁剪插件
官网 GitHub
jcarousel
jQuery轮播图插件
官网 GitHub
Parallax.js
一款jQuery滚动视觉差插件
官网 GitHub
vegas
一个jQuery / Zepto幻灯片插件
官网 GitHub
paroller.js
一款轻量级的页面滚动视觉差特效jquery插件
官网 GitHub
lazyload.js
jquery图片懒加载插件
官网 GitHub
alertify.js
jQuery酷炫的各种消息提示插件
官网 GitHub
pickadate.js
一个轻量级的 jQuery 日期选择插件
官网 GitHub
chosen.js
基于jquery的下拉选择框美化插件
官网 GitHub
threesixty.js
360度产品图片预览jQuery插件
官网 GitHub
textillate.js
实现动感的 CSS3 文本动画的简单插件
官网 GitHub
首页 技术导航 在线工具 技术文章 教程资源 AI工具集 前端库/框架 实用工具箱

Copyright © 2018 Web前端开发网提供免费在线工具、编程学习资源(教程/框架/库),内容以学习参考为主。All Rights Reserved. 网站备案号:蜀ICP备13022973号

手机预览