网站调整为黑白的方法

Posted 2023-02-28 wangmj518

当举行哀悼活动时，有时会要求将网站调整为黑白色，确保展现效果肃穆凝重

通过以下方法可快速将网站调整为黑白

首先，先下载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>

可以使用下面的兼容性写法，达到兼容更多浏览器的作用。

以下适用于主流浏览器（除IE外），放置在网站公共头部或者底部文件里

如果需要对IE浏览器进行兼容

还需要使用到一个JS，两者搭配可以达到较好的兼容性

引入到页面中并指定变黑白的部分即可，如果指定全部，使用body就可以了

grayscale(document.body); //整站变成灰色
grayscale(document.getElementById("main"));//指定元素变灰色
grayscale.reset(document.getElementById("main"));//指定元素还原