网页变灰代码兼容IE7以上及所有浏览器

发布时间:2020-04-03 19:08:44 作者:admin 来源:本站 浏览量(62) 点赞(21)
摘要:一般在清明节,全国哀悼日,大地震的日子,以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者的悼念。那么今天就说说,通过几行简单的代码,来实现这个功能。网页变灰代码兼容IE7以上及所有浏览器.rar

    一般在清明节,全国哀悼日,大地震的日子,以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者的悼念。那么今天就说说,通过几行简单的代码,来实现这个功能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页变黑白</title>
<style type="text/css">
.demo{color: red;}
body{
    filter: grayscale(100%);/*火狐*/
    -webkit-filter:grayscale(100%);/*chrome*/
    filter:gray; /*IE7-9*/
}
</style>
</head>

<body>

<h1 class="demo">周星星</h1>
<img src="1.png">
<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>

</body>
</html>

网页变灰代码兼容IE7以上及所有浏览器.rar


二维码

扫一扫,关注我们

声明:本文由【达扬网络】编辑上传发布,转载此文章须经作者同意,并请附上出处【达扬网络】及本页链接。如内容、图片有任何版权问题,请联系我们进行处理。

现在,非常期待与您的一次邂逅

青海达扬网络传媒有限责任公司努力让每一次邂逅总能超越期待!

您身边的【互联网信息化建设专家】

搜索千万次不如咨询1次

主营项目:网站建设,手机网站,软件开发,政府网站建设,信息系统开发,网络安全维护,app开发等

立即咨询 0971-6275815
在线客服
嘿,我来帮您!