个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
有人能够获得 panzoom 运行的持续时间吗？ https://github.com/timmywil/jquery.panzoom
我进入源代码并将持续时间从 200 增加到 1200，当我调用缩放时没有看到变化。
$panzoom.panzoom("zoom", 2.5);
已更新
var $section = $('section').first();
$panzoom = $section.find('.panzoom').panzoom({
contain: false,
minScale: 1,
maxScale: 3,
contain: true,
duration:1200
}).panzoom('zoom', true);
$(elm).on('click' function(){
$panzoom.panzoom("zoom", true);
});
最佳答案
为什么不直接用 option() 方法来改变它呢？来自 panzoom docs:
// One at a time
// Sets the scale increment option
$elem.panzoom("option", "duration", 1200);
// Several options at once
$elem.panzoom("option", {
increment: 0.4,
minScale: 0.1,
maxScale: 2,
duration: 500,
$reset: $("a.reset-panzoom, button.reset-panzoom")
});
您不必更改源中的任何默认值即可设置不同的持续时间。
编辑:
您需要为“zoom”赋予 true bool 属性，以在选项中设置您自己的持续时间，如文档中所述:
“如果该方法传递一个 bool 值，true将表示根据选项中指定的增量执行缩小。如果为false(或省略)，将执行放大。”
下面是一个工作版本，我在选项中设置了自定义持续时间(2500)并使用了 panzoom("zoom", true):
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://timmywil.github.io/jquery.panzoom/dist/jquery.panzoom.js"></script>
</head>
<body>
<section id="contain">
<h1>Containment within the parent element</h1>
<div class="panzoom-parent" style="overflow: hidden; position: relative;">
<img class="panzoom" src="http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg" width="900" height="900" style="transform: matrix(0.9, 0, 0, 0.9, -46, 44); backface-visibility: hidden; transform-origin: 50% 50% 0px; cursor: move; transition: transform 200ms ease-in-out;">
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range" step="0.05" min="0.4" max="0.9">
<button class="reset">Reset</button>
</div>
<script>
(function() {
var $section = $('#contain');
var $panzoom = $section.find('.panzoom').panzoom({
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset"),
startTransform: 'scale(0.9)',
maxScale: 0.9,
increment: 0.1,
contain: true,
duration:2500
}).panzoom('zoom', true);
})();
</script>
</section>
</body>
</html>关于Jquery panzoom 持续时间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35834012/
26
4
0
我想将图像的初始位置设置为居中，我该怎么做？我不想做 CSS 居中，因为它只会在第一次应用时始终应用，我希望将位置设置为容器居中。 我需要保持样式 #scene {display: inline-bl
有人能够获得 panzoom 运行的持续时间吗？ https://github.com/timmywil/jquery.panzoom 我进入源代码并将持续时间从 200 增加到 1200，当我调用缩
您好，我正在使用 Jquery Panzoom 插件来放大和缩小我的图像，Plugin Link 我想自己设置它的默认缩放值 请告诉我如何更改我无法使用此插件 API 找到的默认缩放值？请帮忙 ？谢谢
在rails 4.2.2项目中，我使用panzoom jquery作为html元素(而不是图像)，对于同一页面我使用annotator插件。现在的问题是注释器无法工作，因为我无法选择页面中的任何单词。
除了重置缩放以强制图像在使用 Panzoom library 平移时不会完全丢失之外，还有其他方法吗？ const element = document.querySelector('#scene')
我已将 jQuery Panzoom 添加到我的项目中。我正在全屏显示图像，并且希望用户能够在 iOS 设备上放大该图片。平移有效，但缩放无效，我不知道为什么。当启用设备模拟时，它也无法在 Chrom
希望实现一个允许您放大 svg 元素的 jquery 插件。 https://github.com/timmywil/jquery.panzoom 我遇到的问题是当用户点击一个元素时实现缩放功能，同时
我正在使用 jQuery panzoom 来缩放图像和一些 div 元素。这通常有效，但位于图像顶部的元素不会留在其原始位置。有没有办法在缩放时将 div 元素保持在原来的位置？ JSFiddle:h
我已经尝试过此 github post 中发布的解决方案 重现步骤: 点击放大按钮两次。 当缩放为 150% 时；点击缩小。 图像放大但实际上应该缩小 const element = document
我正在尝试弄清楚如何在初始化 jquery.panzoom 时制作比浏览器窗口 (2000x2800px) 大得多的图像。我需要图像自行调整大小，使其适合容器的高度。 查看这个 jsFiddle:ht
我正在使用 Panzoom.js 插件来平移和缩放元素。光标上应用了一个 mask ，光标悬停在图像上的任何位置都会显示底层图像的一部分(想象一下彩色图像顶部的黑白图像，光标将显示彩色图像的一部分)光
我想使用 panzoom.js。我的图像尺寸大于容器。我需要在默认 View 下使其适合容器。 这里是 jsfiddle http://jsfiddle.net/Vipin/qam85n
我正在开发一个 HTML/css/js 程序来拖动视频以定位它并使用鼠标滚轮缩放它。该程序在浏览器屏幕中缩放得很好。但是，当我切换到全屏时，放大时视频会从光标处爬上去。如何在进入全屏时重置 panzo
我需要为移动网站实现双指缩放和拖动功能，所以我选择了一个从该来源下载的 jquery 插件 https://github.com/timmywil/jquery.panzoom . 要求只是缩放和拖动
我真的很难让包含选项适用于 jquery.panzoom。 https://github.com/timmywil/jquery.panzoom 无论出于何种原因，我无法将图像拖动到包含 DIV 的整
在 Rails 4.2.2 中，我使用 panzoom jquery 进行缩放功能，我需要禁用检查时发生的拖动选项。 div.panzoom 内的图像或任何元素应该是静态的(不应移动)。 推荐人htt
我使用 jquery.panzoom 插件来缩放和平移 jsPlumb 图，一切都正常工作，但是当我缩放并拖动一个元素时，这个元素会远离指针!有人面临同样的问题吗？有人可以帮我弄这个吗？谢谢 最佳答案
我正在使用 Panzoom 在我有一些点的 Canvas 上缩放和平移。 这些点是可点击的，并且在未缩放 Canvas (通过 Panzoom)时效果很好。 未缩放时缩放系数为 1，缩放 200% 时
我无法使用 Panzoom Javascript library在 Angular 。我明白了 ERROR Error: panzoom is not defined 这里是 stackblitz到目
我正在使用 panzoom，它应该与鼠标滚动一起使用。缩放和其他东西可以工作，但我坚持这个: 我需要让图片保留在其框中，这样它就不会显示背景中的内容。 我已经在谷歌上搜索了好几天，现在我转向你们了。
我是一名优秀的程序员,十分优秀！