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

这篇文章中给出了针对 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条评论

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

  2. 没有 jQuery 的可以这么写

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

发表回复

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