我有一个裁剪插件,可以在您拖动图像时平移图像。我想在顶部应用蒙版 png 以给人一种切割形状的印象。 here is the jsfiddle
它在图像 mask div 上使用 css3 属性 pointer-events:none;
,并且它适用于 webkit 浏览器,如 chrome 和 firefox。但它在 IE 中不起作用,因为 pointer-events: none;
仅适用于 SVG。
我对如何通过 div 传递指针事件做了很多研究。我尝试了一些解决方案,但很头疼,还有一些没有用:
forward mouse events through layers
在深入了解我使用的插件后,我能够扩展它并让它在 IE 浏览器(仅测试 8 和 9)和其他浏览器中工作,而不是使用 pointer-events
选项。 Here is the jsfiddle of the new version . 但我真的不知道它为什么有效?我基本上做了三件事。
- 将掩码 src 作为选项传入
添加检查以查看是否提供了屏蔽选项,如果提供则加载函数:
if (this.options.mask_src) { var masksrc = this.options.mask_src; this.createMask(masksrc); }
让函数将带有 mask 图像的 div 作为背景图像附加到文档 div:
createMask: function(m_src) { $('<div class="iviewer_image_mask" style="background: url('+ m_src +');"></div>').appendTo(this.container); },
任何人都可以向我解释为什么此解决方案适用于 mask 层覆盖的图像平移吗?这就像它只是将鼠标事件应用于图像,而忽略了 mask 层。
最佳答案
这似乎是由于两个 div
元素的位置所致。在您的非功能版本中,这是 html 结构(简化):
<div class="wrapper">
<div id="viewer2" class="viewer">
<img />
</div>
<div class="image-mask"></div>
</div>
在您插入元素的功能版本中,这就是它的最终结果:
<div class="wrapper">
<div class="viewer iviewer_cursor" id="viewer2" >
<img />
<div class="iviewer_image_mask"></div>
</div>
</div>
并且通过将掩码移动到您原来的 viewer
div 中,我可以让它工作 in this fiddle .
我相信这会有所不同,因为您的脚本绑定(bind)到 viewer2
div,所以将掩码放在里面显然允许它在您的脚本上下文中运行,而将它放在外面没有。
关于jquery - 有人可以解释为什么这在 IE 浏览器中有效吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11781308/