个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在使用 panzoom，它应该与鼠标滚动一起使用。缩放和其他东西可以工作，但我坚持这个:
我需要让图片保留在其框中，这样它就不会显示背景中的内容。
我已经在谷歌上搜索了好几天，现在我转向你们了。
<!DOCTYPE html>
<html>
<head>
<title>Pannutsuumailu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { background: #F5FCFF; color: #333666; }
section { text-align: center; margin: 50px 0; }
.panzoom-parent { border: 2px solid #333; }
.panzoom-parent .panzoom { border: 2px dashed #666; }
.buttons { margin: 40px 0 0; }
</style>
<script src="../test/jquery.js"></script>
<script src="../dist/jquery.panzoom.js"></script>
<script src="../bower_components/jquery-mousewheel/jquery.mousewheel.js"></script>
</head>
<section id="focal">
<div class="panzoom-parent" width="960" height="1000">
<div class="panzoom">
<img src="enocell.jpg" width="1920" height="1920"></img>
</div>
</div>
<script>
(function() {
var $section = $('#focal');
var $panzoom = $section.find('.panzoom').panzoom();
$panzoom.parent().on('mousewheel.focal', function( e ) {
contain: "invert",
e.preventDefault();
var delta = e.delta || e.originalEvent.wheelDelta;
var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
$panzoom.panzoom('zoom', zoomOut, {
increment: 0.3,
minScale: 1,
maxScale: 2,
});
});
})();
</script>
</section>
感谢您的帮助!
我用一个样本https://github.com/timmywil/jquery.panzoom/tree/master/demo做了这个使用插件“Panzoom”(您可以在那里找到它^)
编辑:这应该可以做到，但由于某种原因它对我不起作用。
包含:“invert”-“确保您的 panzoom 元素比父元素更大或相同。”，除非我是盲人，否则确实如此。
最佳答案
我也遇到了这个问题，今天终于找到了解决方案，感谢this发布。
HTML:
<div id="container" style='position:absolute;width:500px;height:180px;'>
<img id='the_image' src='./images/yourimage.png' />
</div>
JavaScript:
<script type="text/javascript">
var $panzoom = $('#the_image').panzoom({
contain: 'invert'
});
$panzoom.parent().on('mousewheel.focal', function( e ) {
e.preventDefault();
var delta = e.delta || e.originalEvent.wheelDelta;
var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
$panzoom.panzoom('zoom', zoomOut, {
increment: 0.1,
focal: e
});
});
</script>
关于jQuery panzoom mousescroll 和 contains invert 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20495983/
25
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，它应该与鼠标滚动一起使用。缩放和其他东西可以工作，但我坚持这个: 我需要让图片保留在其框中，这样它就不会显示背景中的内容。 我已经在谷歌上搜索了好几天，现在我转向你们了。
我是一名优秀的程序员,十分优秀！