Question

我正在使用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”（你可以在那里找到^）

编辑：这应该做到，但由于某种原因它不适合我。

包含：“反转” - “确保你的panzoom元素比父元素更大或相同。”，除非我是盲目的，否则就是。

Answer 1

我也遇到了这个问题，终于找到了今天的解决方案，其中包含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>

Answer 2

有点晚了，但是遇到这个问题的其他人：

显然，这是Firefox的一个已知错误。您需要在panzoom https://github.com/jquery/jquery-mousewheel

之前包含mousewheel插件

jQuery panzoom mousescroll和包含反转不起作用

2 个答案: