Macro Da

每天学一点,成长多一点!

CSS + JS 网站变灰(变黑白),兼容所有浏览器。

有的网站可能需要用到全站黑白功能(一般常用于悼念日) ,最方便就是增加css代码,但经测试不兼容IE10、11浏览器,所以配合grayscale.js这个插件,可以完美兼容所有浏览器,这里我制作了个一键变黑白的按钮, 按钮代码用到了JQ,需引用,可点击下面看效果:

点击这里页面变黑白

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="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>


grayscale.js下载:

点赞

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注