[英]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>
我正在使用Pan Zoom插件。
https://github.com/timmywil/jquery.panzoom
如何限制縮放功能。 我的意思是我想將圖像縮小到圖像的某些大小,例如100 px。
演示 http://timmywil.github.io/jquery.panzoom/demo/#inverted-contain
我已經嘗試了Demo中Inverted containment within the parent element (to hide what's behind)
的Inverted containment within the parent element (to hide what's behind)
。 但是對我來說,它不起作用。 請幫忙。
我知道這很老,但是如果您使用minScale,就可以得到想要的東西。 您可以閱讀README文件上的文檔:
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
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.