我有此代码:
<div id="image-zoom-wrapper" style="position: relative;
text-align: left;
width: 2700px;
height: 340px;
overflow: auto;
background-color:grey;
float:left;
">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" onclick="var instance = panzoom(this);instance.on('transform',function(e) {controller.pause();});">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" onclick="var instance = panzoom(this);instance.on('transform',function(e) {controller.pause();});">
</div>
<script src=https://unpkg.com/panzoom@8.4.0/dist/panzoom.min.js></script>
实际中: https://jsfiddle.net/xy6hcuaj/
我想在此div中添加几张图像,并让它们全部可自由拖动和缩放,以使人们创建拼贴。
但是当我这样调用图像时,panzoom.js并不是我真正想要的:
onclick="var instance = panzoom(this);instance.on('transform',function(e) {controller.pause();});"
图像应该是可缩放的并且可以自由移动,覆盖等。但是我的代码总是一次移动许多图像:(
非常感谢您提供正确方向的提示。