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轉載請保留出處！