zoukankan      html  css  js  c++  java
  • css+js整站变灰(兼容IE7+)

    历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命,那么这种整站变灰的效果是怎么做到的?

    重写一套css?NO,即便你有这个时间重写,那网站内的图片怎么办?难道重做一遍?很明显工作量巨大不符合实际。

    火狐和chrome浏览器比较简单,直接用css3搞定:

    <style type="text/css">
    .demo{color: red;}
    body {
        filter: grayscale(100%);/*火狐*/
        -webkit-filter:grayscale(100%);/*chrome*/
    }
    </style>
    <h1 class="demo">周星星</h1>
    <img src="zxx.jpg">

    对于IE7-IE9浏览器,可以使用IE自带的滤镜,在页面头部内加入样式:

    body{ filter:gray; }/*IE7-IE9,必须加在body元素上*/

    前后效果对比:

    效果杠杠的,可是切换到IE10或IE11就傻了,IE10/11需要用grayscale.js来解决:

    <script type="text/javascript" src="grayscale.js"></script>
    <script type="text/javascript">
    grayscale(document.body);
    </script>

    刷新页面,效果和IE7-IE9下一致了,可是现在切换回IE7、IE8、IE9,又傻眼了,css不起作用了,页面在IE7-9下依然是彩色的!so,我们需要判断IE浏览器版本分别用css、js的方式处理,IE7-9下用css自带的滤镜,IE10-11用grayscale.js处理,那么全兼容的写法是:

    <style type="text/css">
    .demo{color: red;}
    body{
        filter: grayscale(100%);/*火狐*/
        -webkit-filter:grayscale(100%);/*chrome*/
        filter:gray; /*IE7-9*/
    }
    </style>
    <h1 class="demo">周星星</h1>
    <img src="zxx.jpg">
    <script type="text/javascript" src="grayscale.js"></script>
    <script type="text/javascript">
    var navStr = navigator.userAgent.toLowerCase();
    if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判断是IE10或者IE11
        grayscale(document.body);
    }
    </script>

    对于跨域的图片变灰暂时还无解,有知道的同学请不腻赐教!

    本文地址:http://www.cnblogs.com/wangmeijian/p/4324693.html转载请保留出处!

  • 相关阅读:
    this指针是什么?
    C++多态实现原理
    面试题2:实现Singleton模式
    面试题1:赋值运算符函数
    1.Two Sum
    朴素贝叶斯
    K近邻法
    感知机
    数据类型、用户交互、赋值运算
    蓝牙技术概述
  • 原文地址:https://www.cnblogs.com/wangmeijian/p/4324693.html
Copyright © 2011-2022 走看看