css+js整站变灰(兼容IE7+)

简介: 原文:css+js整站变灰(兼容IE7+)历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命,那么这种整站变灰的效果是怎么做到的? 重写一套css?NO,即便你有这个时间重写,那网站内的图片怎么办?难道重做一遍?很明显工作量巨大不符合实际。
原文: 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转载请保留出处!

目录
相关文章
|
21天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
22天前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
29 2
|
23天前
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
19 1
|
24天前
|
前端开发 C++
CSS【详解】 标准盒模型 VS IE 盒模型
CSS【详解】 标准盒模型 VS IE 盒模型
15 0
|
23天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】3d-boxes-background
【HTML+CSS+JavaScript】3d-boxes-background
8 0
|
23天前
|
前端开发 JavaScript
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
19 0
|
24天前
|
JavaScript 前端开发 Java
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
|
24天前
|
前端开发 数据安全/隐私保护
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
|
2月前
|
JavaScript
JS+CSS3点击粒子烟花动画js特效
JS+CSS3点击粒子烟花动画js特效
29 0
JS+CSS3点击粒子烟花动画js特效
|
前端开发 JavaScript
js css 悬浮动画字体
js css 悬浮动画字体