您的位置:首页> 日志> 前端技术 正文

      有的网站可能需要用到全站黑白功能(一般常用于悼念日) ,最方便就是增加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%);  

      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. });