javascript - JQuery image.mapster 与其他 jquery 版本冲突

Question

我面临 image.mapster jquery 将自定义 div 悬停在图像中与其他 jquery 版本用于在按钮单击时缩小和放大之间的一些 jquery 冲突。

以下是我面临的查询:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script type="text/javascript" src="../dist/jquery.imagemapster.js"></script>

如果我按照上面的顺序编写代码，image.mapster jquery 将在悬停时工作，但我的放大和缩小功能将不起作用。

如果我首先使用 image.mapster 查询，然后编写第二个 jquery，那么我会收到错误，因为找不到 image.mapster 方法。

我也创建了一个测试文件代码 http://jsfiddle.net/vpd1Lbtp/3/ 但在 jsfidder 中，它部分工作，两件事都工作，但图像的大小没有放大和缩小。我也在 html 代码中写了相同的内容，只有一个功能工作

Answer 1

如果您在缩放时检查 img#vegetables，您将看到缩放代码实际上正在运行。但是，Mapster 已将图像的不透明度设置为 0。您正在查看的图像是 Mapster 使用 class="mapster_el" 创建的图像。

我认为您可以通过缩放 .mapster_el 而不是 #vegetables 来获得所需的功能:

$('.mapster_el').stop(true, true).animate({
//etc...

这将缩放复制的图像以及代表 map 的 canvas 元素。