支持多浏览器的网站变灰方法

目录 互联网, 社会, 编程

这篇文章中给出了针对 IE 浏览器的使网站变灰的方法,具体做法是在 CSS 文件的开头添加这样一行:

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

但是很遗憾这种方法并不能支持 Firefox 和 Chrome。这篇博客介绍一种支持各种浏览器的网站变灰方法,试验其支持 Firefox、Chrome 和 IE,据说可以支持 Opera(未测试),方法比较简单,就直接介绍步骤了。

1. 到这里下载 grayscale.js 文件到你网站的根目录(或者也可以不下载,直接引入该 js,未测试)。

2. 在网站的 footer 或者 header 等全局的文件中插入以下代码(注意,$() 和 .load handler需要 jquery.js 的支持,不使用 jquery 的同学可以自行搜索解决标签查找和 window onload 事件处理问题,例如这里这里):

<script type="text/javascript" src="/grayscale.js"></script>
<script type="text/javascript">
$(window).load(function () {
  grayscale( $('body') );
});
</script>

该方法的缺点是:

1. 页面加载完后才对整个页面进行变灰操作;
2. 在非 IE 浏览器中不支持来自其它域名的网站图片的变灰;
3. 造成非 IE 浏览器在加载完页面后进行大量 js 计算,该计算负担可以通过仅变灰 img, a 等标签而不是 body 来优化。

长按识别二维码关注《边际效应》
长按识别二维码关注《边际效应》

2 条评论

  • 蛋蛋
    2010-04-21

    刚刚用2个浏览器看了看,新华网,人民网,土豆,优酷,大洋网都应该是用比较简单的CSS变黑方法,而新浪和搜狐网易的变黑方法就貌似比较复杂高技术~~囧,验证码打了2次才打对

  • Iron_Feet
    2010-04-21

    没有 jQuery 的可以这么写

    function onLoadHandler()
    {
    grayscale( document.body );
    }
    window.onload = onLoadHandler;

发表评论

电子邮件地址不会被公开。 必填项已用*标注