css+js整站变灰（兼容IE7+）

历年大型地震等自然灾害来临过后，各大网站整站都变成灰色以悼念逝去的生命，那么这种整站变灰的效果是怎么做到的？

重写一套css？NO，即便你有这个时间重写，那网站内的图片怎么办？难道重做一遍？很明显工作量巨大不符合实际。

火狐和chrome浏览器比较简单，直接用css3搞定：

<style type="text/css">

.demo{color: red;}

body {

    filter: grayscale(100%);/*火狐*/

    -webkit-filter:grayscale(100%);/*chrome*/

}

</style>

<h1 class="demo">周星星</h1>

<img src="zxx.jpg">

对于IE7-IE9浏览器，可以使用IE自带的滤镜，在页面头部内加入样式：

body{ filter:gray; }/*IE7-IE9，必须加在body元素上*/

前后效果对比：

效果杠杠的，可是切换到IE10或IE11就傻了，IE10/11需要用grayscale.js来解决：

<script type="text/javascript" src="grayscale.js"></script>

<script type="text/javascript">

grayscale(document.body);

</script>

刷新页面，效果和IE7-IE9下一致了，可是现在切换回IE7、IE8、IE9，又傻眼了，css不起作用了，页面在IE7-9下依然是彩色的！so，我们需要判断IE浏览器版本分别用css、js的方式处理，IE7-9下用css自带的滤镜，IE10-11用grayscale.js处理，那么全兼容的写法是：

<style type="text/css">

.demo{color: red;}

body{

    filter: grayscale(100%);/*火狐*/

    -webkit-filter:grayscale(100%);/*chrome*/

    filter:gray; /*IE7-9*/

}

</style>

<h1 class="demo">周星星</h1>

<img src="zxx.jpg">

<script type="text/javascript" src="grayscale.js"></script>

<script type="text/javascript">

var navStr = navigator.userAgent.toLowerCase();

if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判断是IE10或者IE11

    grayscale(document.body);

}

</script>

对于跨域的图片变灰暂时还无解，有知道的同学请不腻赐教！

 

本文地址：http://www.cnblogs.com/wangmeijian/p/4324693.html转载请保留出处！