平移缩放 JQuery 功能
Pan Zoom JQuery functionality
HTML 和 Javascript
<section>
<h1>Panning and zooming with CSS3</h1>
<div class="parent">
<div class="panzoom">
<img src="image1" width="400" height="400">
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range">
<button class="reset">Reset</button>
</div>
<script>
(function() {
var $section = $('section').first();
$section.find('.panzoom').panzoom({
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset")
});
})();
</script>
</section>
我正在使用平移缩放插件。
https://github.com/timmywil/jquery.panzoom
如何限制缩小功能。我的意思是我想将图像缩小到图像的特定大小,例如 100 像素。
演示http://timmywil.github.io/jquery.panzoom/demo/#inverted-contain
我试过Inverted containment within the parent element (to hide what's behind)
从演示。但对我来说它不起作用。请帮忙。
我知道
这很老了,但如果你玩 minScale,你可以得到你喜欢的东西。您可以阅读自述文件上的文档:
https://github.com/timmywil/jquery.panzoom/blob/master/README.md
试试这个,这对你有用
(function() {
var $section = $('section').first();
$section.find('.panzoom').panzoom({
increment: 0.3,
minScale: 0.8,
maxScale: 1.3
});
相关文章:
- 如何将chrome扩展功能移植到移动设备(特别是jquery和trello)
- jQuery滚动功能只工作一次
- JQuery使用相同的功能自动完成各种输入文本
- jQuery自动完成功能不适用于多个文本输入
- 这个jquery语法的功能是什么
- 如何使用javascript/jquery更改转义键的功能
- 使用Jquery创建一个具有单击和悬停功能的菜单
- 屏幕大小调整功能-Jquery
- 使用复杂数组时Jquery自动完成功能不起作用
- jQuery点击操作被排序功能剥离
- Angular JS和jQuery UI自动完成功能
- 检查jquery(或ajax)功能是否已完成
- 计时器在使用 jQuery 一分钟后没有触发,或者每 1 分钟后给出一些其他解决方案来触发功能
- 必须单击按钮两次才能执行功能 - jQuery
- 可以't在我的HTML表中显示第三列(向下搜索功能jQuery/JavaScript)
- 传递点击事件到功能- JQuery切换无序列表中的孩子
- 淡入淡出功能Jquery
- 禁用然后重新启用点击功能jQuery
- 更改按钮功能jQuery
- 试图添加更多的jQuery到我的页面,但当我添加更多的链接/脚本标签,以前的功能jQuery停止运行.有人能帮帮我吗?