CSS滤镜-技术开发专区

CSS滤镜

作者：ITPUB论坛编辑： nancy 2008-05-23 00:00

【IT168技术文档】

这几天，几乎所有的网站都变成了灰色。
有的是修改了很多东西变灰的，有的只是在CSS里简单加了个CSS滤镜，如下所示。

body {}{
filter: Gray;
}

下面是一个CSS滤镜的小例子（应该只能在IE里看到效果）：

代码如下

<html>
<head>
<title>CSS滤镜</title>
<style type="text/css">
.white {}{color:#FFFFFF; cursor:pointer;};
</style>
<script type="text/javascript">
// Flash table Extension for Dreamwever ,by dio(diopex@sina.com)
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
if (object != "[object]"){  //do this so I can take a string too
        setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
return;
}
clearTimeout(nereidFadeTimers[object.sourceIndex]);
diff = destOp-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destOp){
direction = -1;
}
delta=Math.min(direction*diff,delta);
object.filters.alpha.opacity+=direction*delta;
if (object.filters.alpha.opacity != destOp){
nereidFadeObjects[object.sourceIndex]=object;
nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}
</script>
</head>
<body>
<table cellSpacing="1" cellPadding="1" style="height:30px;width:600px;text-align:center;background-color:#000033;">
<tbody>
<tr>
<td onmouseover="nereidFade(this,100,10,5)" onmouseout="nereidFade(this,50,10,5)" style="FILTER: alpha(opacity=70);background-color:#00ccff;" ><span class="white">导航栏一</span></td>
<td onmouseover="nereidFade(this,100,10,5)" onmouseout="nereidFade(this,50,10,5)" style="FILTER: alpha(opacity=70);background-color:#ff9900;" ><span class="white">导航栏二</span></td>
<td onmouseover="nereidFade(this,100,10,5)" onmouseout="nereidFade(this,50,10,5)" style="FILTER: alpha(opacity=70);background-color:#ff3399;" ><span class="white">导航栏三</span></td>
<td  onmouseover="nereidFade(this,100,10,5)" onmouseout="nereidFade(this,50,10,5)" style="FILTER: alpha(opacity=70);background-color:#33ff66;" ><span class="white">导航栏四</span></td>
<td  onmouseover="nereidFade(this,100,10,5)" onmouseout="nereidFade(this,50,10,5)" style="FILTER: alpha(opacity=70);background-color:#ff0000;" ><span class="white">导航栏五</span></td>
<td  onmouseover="nereidFade(this,100,10,5)" onmouseout="nereidFade(this,50,10,5)" style="FILTER: alpha(opacity=70);background-color:#ffff00;" ><span class="white">导航栏六</span></td>
</tr>
</tbody>
</table>
</body>
</html>

关注我们