我在网站上使用了Gray元素。但是,我无法在IE11中使用它。例如,在下面的小提琴中,我使用JS添加grayscale
和grayscale-fade
类,以便图像在悬停时从彩色逐渐渐变为灰度。我将如何在IE11中使用它?作者说,该插件需要针对IE11进行初始化(即$('article.project img').gray();
),但是如果我添加该行,则默认情况下,所有图像从一开始都会变成灰色。我只是想让它在IE11中工作。有人可以告诉我如何吗?
小提琴:http : //jsfiddle.net/61jcam54/
的HTML
<div id="content">
<article class="project">
<img width="375" height="375" src="http://i.imgur.com/jNkpAg6.gif" alt="image-title">
<div class="overlay" style="margin-left: -1px; width: 367px;">
<h3>Project Title</h3>
<a class="post-link expand" href="http://google.com">+</a>
</div>
</article>
</div>
的CSS
article.project {
float: left;
margin: 0 1% 2%;
max-width: 375px;
overflow: hidden;
position: relative;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
article.project img {
display: block;
margin: 0;
padding: 0;
max-width: 100%;
height: auto;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
article.project .overlay {
background: rgba(0, 0, 0, 0.8);
bottom: 0;
display: block;
left: 0;
opacity: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 1;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.hover .overlay, .active .overlay, .hover-sticky .overlay {
opacity: 1;
}
article.project .overlay h3 {
color: #FFF;
font-size: 17px;
font-size: 1.7rem;
font-family: 'Montserrat',sans-serif;
text-transform: uppercase;
line-height: 1.3;
margin-top: 3.3em;
padding: 0 1em;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
}
article.project .overlay .expand {
border: 5px solid #FFF;
bottom: 0;
color: #FFF;
display: block;
font-size: 30px;
height: 60px;
left: 0;
line-height: 50px;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 60px;
z-index: 2;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
}
/* GRAYSCALE */
.grayscale, .grayscale-sticky {
/* Firefox 10+, Firefox on Android */
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
/* IE 6-9 */
filter: gray;
/*
Chrome 19+,
Safari 6+,
Safari 6+ iOS,
Opera 15+
*/
-webkit-filter: grayscale(100%);
}
.grayscale.grayscale-fade {
-webkit-transition: -webkit-filter .2s;
}
.grayscale.grayscale-off,
article:hover .grayscale.grayscale-fade {
-webkit-filter: grayscale(0%);
filter: none;
}
.grayscale.grayscale-replaced {
filter: none;
-webkit-filter: none;
}
.grayscale.grayscale-replaced > svg {
opacity: 1;
-webkit-transition: opacity .2s ease;
transition: opacity .2s ease;
}
.grayscale.grayscale-replaced.grayscale-off > svg,
article:hover .grayscale.grayscale-replaced.grayscale-fade > svg {
opacity: 0;
}
JS
$('#content').on('mouseenter', 'article.project', function(){
$(this).addClass('hover grayscale grayscale-fade');
$(this).find('.post-link').hide();
}).on('mouseleave', 'article.project', function(){
$(this).removeClass('hover grayscale grayscale-fade');
$(this).find('.post-link').show();
});
有几个问题...
根据您使用的插件,当浏览器不支持CSS3过滤器时(例如IE10 / 11),适用以下条件:
...该插件使用
Modernizr._prefixes
,css-filters
,Inline SVG
和svg-filters
从Modernizr的功能检测,以确定浏览器的支持。如果浏览器支持嵌入式SVG和SVG过滤器,但不支持CSS过滤器,则该插件将SVG元素替换为带有过滤器的元素。
由于该img
元素需要在IE11中替换为SVG元素,因此需要插件脚本(带有Modernizr shiv)才能起作用。在您提供的jsFiddle示例中,该脚本jquery.gray.min.js
实际上甚至没有在IE11中执行,因为该脚本由于mime类型不匹配而被阻止(此警告在控制台中)。
要解决此问题,我仅将脚本复制/粘贴到示例中。此外,值得一提的是,Modernizr的文档状态脚本必须执行之前的<body>
负载。在使用HTML5 Shiv的IE中,这似乎是相关的:
我们建议将Modernizr放在首位的原因有两个:HTML5 Shiv(在IE中启用HTML5元素)必须在之前执行
<body>
,并且如果您使用的是Modernizr添加的任何CSS类,则需要防止FOUC。
现在该脚本实际上是在IE11中执行的,该插件需要初始化,并且该img
元素需要用SVG替换。根据插件,img
如果元素具有class ,则元素将被自动替换.grayscale
。另外,看起来您也可以使用自定义.gray()
方法。由于您的示例实际上并未将类提供.grayscale
给img
元素,因此它不会在IE11中初始化。
在下面,您会注意到我将类添加.grayscale
到了img
元素(以便在IE11中对其进行初始化)。此外,.grayscale-off
还将该类添加到元素中,以使灰色效果最初处于关闭状态。在更新的jQuery中,您将看到此类已切换。
这是相关的更新的HTML / CSS / jQuery:
我也将jQuery缩短了一点:
$('#content').on('mouseenter mouseleave', 'article.project', function (e){
$('.grayscale', this).toggleClass('hover grayscale-off');
$(this).find('.post-link').toggle();
});
.grayscale.grayscale-replaced > svg {
opacity: 0;
-webkit-transition: opacity .2s ease;
transition: opacity .2s ease;
}
.grayscale.grayscale-replaced.grayscale-off > svg {
opacity: 1;
}
<div id="content">
<article class="project">
<img width="375" height="375" class="grayscale grayscale-off" src="http://lorempizza.com/380/240" alt="image-title" />
<div class="overlay">
<h3>Project Title</h3>
<a class="post-link expand" href="...">+</a>
</div>
</article>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句