Jquery 有人能解释一下为什么这在IE浏览器中有效吗?
我有一个裁剪插件,可以在拖动图像时对其进行平移。我想在顶部应用一个蒙版png,给人一种切割形状的印象 它使用css3属性Jquery 有人能解释一下为什么这在IE浏览器中有效吗?,jquery,css,Jquery,Css,我有一个裁剪插件,可以在拖动图像时对其进行平移。我想在顶部应用一个蒙版png,给人一种切割形状的印象 它使用css3属性指针事件:无,它可以在诸如chrome和firefox之类的webkit浏览器中工作。但它在IE中不起作用,因为指针事件:无仅适用于SVG 我做了很多关于如何通过div传递指针事件的研究。我尝试了一些解决方案,但它们令人头痛,有些不起作用: 在深入研究了我使用的插件之后,我能够扩展它并使其在IE浏览器(仅测试8和9)和其他浏览器中工作,而不使用指针事件选项但我真的不知道它为
指针事件:无在image mask div上的code>,它可以在诸如chrome和firefox之类的webkit浏览器中工作。但它在IE中不起作用,因为指针事件:无代码>仅适用于SVG
我做了很多关于如何通过div传递指针事件的研究。我尝试了一些解决方案,但它们令人头痛,有些不起作用:
在深入研究了我使用的插件之后,我能够扩展它并使其在IE浏览器(仅测试8和9)和其他浏览器中工作,而不使用指针事件
选项但我真的不知道它为什么会起作用???我基本上做了三件事
将掩码src作为选项传入
添加检查以查看是否提供了掩码选项,如果提供,请加载函数:
if (this.options.mask_src) {
var masksrc = this.options.mask_src;
this.createMask(masksrc);
}
让函数将带有掩码图像的div作为背景图像附加到文档div:
createMask: function(m_src) {
$('<div class="iviewer_image_mask" style="background: url('+ m_src +');"></div>').appendTo(this.container);
},
createMask:function(m_src){
$('').appendTo(this.container);
},
有人能给我解释一下为什么这个解决方案适用于有遮罩层覆盖的图像平移吗?就像它只是将鼠标事件应用于图像,而忽略遮罩层。这似乎是由于两个div
元素的位置造成的。在非功能版本中,这是html结构(简化):
在插入元素的功能版本中,其结果如下:
<div class="wrapper">
<div class="viewer iviewer_cursor" id="viewer2" >
<img />
<div class="iviewer_image_mask"></div>
</div>
</div>
通过将掩码移动到原稿中的查看器
div,我可以让它工作。
我相信这会有所不同,因为您的脚本绑定到viewer2
div,所以将掩码放在里面显然允许它在脚本上下文中运行,而将它放在外面则不行
<div class="wrapper">
<div class="viewer iviewer_cursor" id="viewer2" >
<img />
<div class="iviewer_image_mask"></div>
</div>
</div>