跨浏览器（IE 10和11）灰度问题

我在此站点的导航滑块上创建灰度效果时遇到问题 – pts.smartchurchproject.com。 您会注意到效果适用于Chrome，Firefox和IE <10和11. IE 10和11是问题，因为它们不再支持CSS过滤器。

我目前正在使用此修复程序来处理IE 10和11. http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js-v2-0-with-浏览器的function检测用使用-Modernizr的/

它适用于hover效果，但我希望导航配置文件在单击和展开时保持颜色。 我认为这将是一个简单的解决方案，但我有一个时间让它工作的bugger。 有什么建议？ 这是该网站的相关脚本。 谢谢你的帮助！

walkingmiller

var gry = jQuery; gry.noConflict(); gry(document).ready(function () { /** Script tests browser features and tells if the Browser is IE10 or IE11 Target IE 10 with JavaScript and CSS property detection. # 2013 by Tim Pietrusky # timpietrusky.com **/ // IE 10 only CSS properties var ie10Styles = [ 'msTouchAction', 'msWrapFlow' ]; var ie11Styles = [ 'msTextCombineHorizontal' ]; /* * Test all IE only CSS properties */ var d = document; var b = d.body; var s = b.style; var brwoser = null; var property; // Tests IE10 properties for (var i = 0; i < ie10Styles.length; i++) { property = ie10Styles[i]; if (s[property] != undefined) { brwoser = "ie10"; } } // Tests IE11 properties for (var i = 0; i < ie11Styles.length; i++) { property = ie11Styles[i]; if (s[property] != undefined) { brwoser = "ie11"; } } //Grayscale images only on browsers IE10+ since they removed support for CSS grayscale filter if (brwoser == "ie10" || brwoser == "ie11") { gry('body').addClass('ie11'); // Fixes marbin issue on IE10 and IE11 after canvas function on images gry('.akkord_slideri img').each(function () { var el = gry(this); el.css({ "position": "absolute" }).wrap("
").clone().addClass('img_grayscale ieImage').css({ "position": "absolute", "z-index": "5", "opacity": "0" }).insertBefore(el).queue(function () { var el = gry(this); el.parent().css({ "width": this.width, "height": this.height }); el.dequeue(); }); this.src = grayscaleIe(this.src); }); // Quick animation on IE10+ gry('.akkord_slideri img').hover( function () { gry(this).parent().find('img:first').stop().animate({ opacity: 1 }, 200); }, function () { gry('.img_grayscale').stop().animate({ opacity: 0 }, 200); } ); gry('.akkord_slideri img').click( function () { gry(this).parent().find('img:first').stop().animate({ opacity: 0 }, 200); } ); // Custom grayscale function for IE10 and IE11 function grayscaleIe(src) { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var imgObj = new Image(); imgObj.src = src; canvas.width = imgObj.width; canvas.height = imgObj.height; ctx.drawImage(imgObj, 0, 0); var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height); for (var y = 0; y < imgPixels.height; y++) { for (var x = 0; x < imgPixels.width; x++) { var i = (y * 4) * imgPixels.width + x * 4; var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3; imgPixels.data[i] = avg; imgPixels.data[i + 1] = avg; imgPixels.data[i + 2] = avg; } } ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); return canvas.toDataURL(); }; }; // If the browser does not support CSS filters filters, we are applying grayscale.js function // This part of Grayscale images applies on Opera, Firefox and Safari browsers if (!Modernizr.cssfilters) { var gryimages = gry(".akkord_slideri img"), imageCount = gryimages.length, counter = 0; // One instead of on, because it need only fire once per image gryimages.one("load", function () { // increment counter every time an image finishes loading counter++; if (counter == imageCount) { // do stuff when all have loaded grayscale(gry('.akkord_slideri img')); gry(".akkord_slideri img").hover( function () { grayscale.reset(gry(this)); }, function () { grayscale(gry(this)); } ); } }).each(function () { if (this.complete) { // manually trigger load event in // event of a cache pull gry(this).trigger("load"); } }); }});