CSS + JS 网站变灰(变黑白)


CSS

/* 特殊日子 全站灰色 */
.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%); 
}

HTML及JS

<a href="javascript:;" class="site-gray" data-gray="0">网站变灰</a>
<!-- 特殊日子IE10及其以上浏览器 全站灰色 -->
<script src="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>

相关文件

grayscale.js


文章作者: 技术潘
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 技术潘 !
  目录