网站快速变黑白（置灰）解决方案-兼容ie

2024-11-28 Umming css3+html5 评论(0) 浏览(26)

前端解决网站置灰的方案不考虑兼容性的话，只需要使用css3的filter: grayscale(100%)这个属性即可，但是如果要考虑兼容性，那就得判断客户端给出不同的兼容方案，ie10、ie11可以引入grayscale.js插件解决（使用grayscale插件的原理是利用js把页面所有图片转换成base64格式的url并且改成黑白图片，所以如果页面图片很多，使用该插件会消耗大量资源，首次转换会出现卡顿），但是ie9及以下版本，可以使用filter:gray;属性给图片设置黑白滤镜。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>网站黑白（置灰）解决方案-兼容ie</title>
<meta name="description" content="网站黑白（置灰）解决方案兼容ie"/>
<meta name="keywords" content="网站黑白（置灰）解决方案兼容ie"/>
<script type="text/javascript" src="js/jquery.js"></script>
<!-- ie9以下插入低版本ie -->
<!--[if lte IE 9]>
<script type="text/javascript" src="js/jqie.js"></script>
<![endif]-->

</head>
<body >

<style type="text/css">
body{-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  _filter:none;}
img{filter:gray;};
</style>

<div><img src="images/demo.jpg" alt="网站黑白测试图片"></div>

<script type="text/javascript">
// 动态插入script标签
  function createScript(url, callback) {
      var oScript = document.createElement('script')
      oScript.type = 'text/javascript'
      oScript.async = true
      oScript.defer = true
      oScript.charset = 'utf-8'
      oScript.src = url
      var isIE = !-[1]
      if (isIE) {
          oScript.onreadystatechange = function () {
              if (this.readyState == 'loaded' || this.readyState == 'complete') {
                  callback()
              }
          }
      } else {
          // IE9及以上浏览器，Firefox，Chrome，Opera
          oScript.onload = function () {
              callback()
          }
      }
      document.body.appendChild(oScript)
  }
  var userAgent = navigator.userAgent
  var isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 
  var isEdge = userAgent.indexOf('Edge') > -1 && !isIE 
  var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1
  if (isIE || isEdge || isIE11) {
      createScript('js/grayscale.js', function () {
         grayscale($("body"));
        $('.logo').attr('src','images/public/logogr.jpg')

      })

  }
</script>


</body>
</html>

grayscale.js.zip