網站調整為黑白的方法

當舉行哀悼活動時，有時會要求將網站調整為黑白色，確保展現效果肅穆凝重

通過以下方法可快速將網站調整為黑白

 

首先，先下載grayscale.js文件，需要使用這個插件實現效果

鏈接: https://pan.baidu.com/s/1KWbWDWHclvjPcZfMIJljxA 提取碼: uw9e

 

修改首頁

在html文件中加入以下代碼（自行更換grayscale.js的路徑）

<!-- 特殊日子IE10及其以上瀏覽器 全站灰色 -->
<script type="text/javascript" src="js/grayscale.js" ></script>
<style>
html, html *{
    filter: gray !important;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%); 
}
</style>
<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);
        grayscale(document.getElementsByTagName("img"));
    }
</script>

 

修改全站

要將全站都變成黑白的話，需要在全站公用的js文件中加入代碼，如果沒有公用js的話，就只能在每個頁面加個js文件了

公用js文件內容（自行更換grayscale.js的路徑）：

//特殊日子IE10及其以上瀏覽器 全站灰色
document.write('<script type="text/javascript" src="js/grayscale.js" ></script>');
document.write('<style>');
document.write('html, html *{');
document.write('    filter: gray !important;');
document.write('    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);');
document.write('    filter: grayscale(100%);');
document.write('    -webkit-filter: grayscale(100%);');
document.write('    -moz-filter: grayscale(100%);');
document.write('    -ms-filter: grayscale(100%);');
document.write('    -o-filter: grayscale(100%); ');
document.write('}');
document.write('</style>');
document.write('<script type="text/javascript">');
document.write('    var navStr = navigator.userAgent.toLowerCase();');
document.write('    if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){');
document.write('        grayscale(document.body);');
document.write('        grayscale(document.getElementsByTagName("img"));');
document.write('    }');
document.write('</script>');

 

點擊可切換黑白

如果需要點擊一下變成黑白，再點擊一下變回原樣，需要在html文件中加入以下代碼（自行更換grayscale.js的路徑）

<style>
  /* 特殊日子 全站灰色 */
.site-gray, .site-gray *{
    filter: gray !important;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%); 
}
</style>

<a href="javascript:;" class="site-gray" data-gray="0">網站變灰</a>

<!-- 特殊日子IE10及其以上瀏覽器 全站灰色 -->
<script src="js/grayscale.js"></script>
<script>
    var navStr = navigator.userAgent.toLowerCase();
    $(".site-gray").click(function(){
        var gray = $(this).attr("data-gray");
        if( gray == 0 )
        {
            if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判斷是IE10或者IE11
                grayscale(document.body);
                grayscale(document.getElementsByTagName("img"));
            }
            $("html").addClass("site-gray");
            $(this).attr("data-gray", 1);
        }
        else
        {
            if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判斷是IE10或者IE11
                grayscale.reset(document.body);
                grayscale.reset(document.getElementsByTagName("img"));
            }
            $("html").removeClass("site-gray");
            $(this).attr("data-gray", 0);
        }
    });
</script>