兼容所有浏览器的一键变灰(变黑白)

有的网站可能需要用到全站黑白功能(一般常用于悼念日) ,最方便就是增加css代码,但经测试不兼容IE10、11浏览器,所以配合grayscale.js这个插件,可以完美兼容所有浏览器,使用JS缺点是如网站图片多的话,在变黑白时会卡住几秒钟,为了兼容性也就牺牲了体验度了。效果演示GIF如下:

我们先添加定义好CSS样式,如下:

  1. /* 特殊日子 全站灰色 */
  2. .site-gray, .site-gray *{
  3.     filter: gray !important;
  4.     filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  5.     filter: grayscale(100%);
  6.     -webkit-filter: grayscale(100%);
  7.     -moz-filter: grayscale(100%);
  8.     -ms-filter: grayscale(100%);
  9.     -o-filter: grayscale(100%);
  10. }

HTML添加个a链接用于点击变灰:

  1. <a class=“site-gray” data-gray=“0” href=“nojavascript…;”>网站变灰</a>

引用Jq和grayscale.js插件:

  1. <script src=“js/jquery.js”></script>
  2. <script src=“js/grayscale.js”></script>

先判断网站是否已变黑白,然后判断浏览器,是IE10、11的话则加载JS插件,否则使用CSS即可,给<html>添加Class,JS代码如下:

  1. var navStr = navigator.userAgent.toLowerCase();
  2. $(“.site-gray”).click(function(){
  3.     var gray = $(this).attr(“data-gray”);
  4.     if( gray == 0 )
  5.     {
  6.         if(navStr.indexOf(“msie 10.0”)!==-1||navStr.indexOf(“rv:11.0”)!==-1){ // 判断是IE10或者IE11
  7.             grayscale(document.body);
  8.             grayscale(document.getElementsByTagName(“img”));
  9.         }
  10.         $(“html”).addClass(“site-gray”);
  11.         $(this).attr(“data-gray”, 1);
  12.     }
  13.     else
  14.     {
  15.         if(navStr.indexOf(“msie 10.0”)!==-1||navStr.indexOf(“rv:11.0”)!==-1){ // 判断是IE10或者IE11
  16.             grayscale.reset(document.body);
  17.             grayscale.reset(document.getElementsByTagName(“img”));
  18.         }
  19.         $(“html”).removeClass(“site-gray”);
  20.         $(this).attr(“data-gray”, 0);
  21.     }
  22. });