Website adjust black and white approach

When the mourning activities, you may be asked to adjust the site to black and white, make sure to show the effect of solemn dignified

The site can be quickly adjusted to black and white in the following ways

 

First of all, first download grayscale.js file, you need to use this plugin to achieve the effect

Links: https://pan.baidu.com/s/1KWbWDWHclvjPcZfMIJljxA extraction code: uw9e

 

Modify Home

Adding the following code in an html file (replacement path grayscale.js self)

<-! Special day IE10 browser and above the station's gray -> 
< Script of the 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%) ; 
    filter--ms : 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>

 

Modify Full Station

To the whole station, then turned into black and white, adding a tag to the station's public js file, if there is no public js, then it can only add a js file for each page of the

Public js file content (self-replacement grayscale.js path):

//特殊日子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>');

 

Click to switch black and white

If you need to click black and white, and then click back to normal, you need to add the following code in the html file (replacing the path grayscale.js self)

<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" the Data-Gray = "0" > website grayed </ A > 

<-! special day IE10 browser and above the station's gray -> 
< Script the src = "JS / grayscale.js" > </ Script > 
< Script > 
    var navStr = navigator.userAgent.toLowerCase (); 
    $ ( " .site-Gray " ) .click ( function () {
         var Gray = $ ( the 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>