html5时间控件菜鸟,html菜鸟教程zoom,插件

插件 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"方法来覆盖所有选项。

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