javascript 中使用filter（滤镜）控制文本的淡入淡出效果

来源：互联网发布：深圳软件开发公司编辑：程序博客网时间：2024/05/20 02:27

“滤镜”对很多人来说是一个不是一个很陌生的词语，你可能在图片制作的时候使用Photoshop时接触过它，也可能学习css时接触过他，但是真让你说说它的用法，你可能就不知道其所以然了。

在这里我们要明确的一个问题是滤镜的一些样式。主要用以下几个：

alpha：设置图片或文字的不透明度
参数：opacity、finishOpacity、style、startX、startY、finishX、finishY、add、direction、strength

blur：在指定的方向和位置上产生动感模糊效果
参数：add、direction、strength

chroma：对所选择的颜色进行透明处理
参数：color

dropShadow：在指定的方向和位置上产生阴影
参数：color、offX、offY、positive

flipH：沿水平方向翻转对象
　

flipV：沿垂直方向翻转对象
　

glow：在对象周围上发光
参数：color、strength

gray：将对象以灰度处理
　

invert：逆转对象颜色
　

light：对对象进行模拟光照
　

mask：对对象生成掩膜
参数：color

shadow：沿对象边缘产生阴影
参数：color、direction

wave：在垂直方向产生正弦波形
参数：add、freq、lightStrength、phase、strength

xray：改变对象颜色深度，并绘制黑白图象

知道了这么多的滤镜样式，那么我们如何使用这些filter样式呢？

filter样式的使用的语法为：STYLE("filter：滤镜样式名(滤镜样式参数=参数值........)")在这里解释下，如何没有参数的可以不写，如果参数比较多，那么可以放入多个参数（.....代表的含义）。

下面就来看个例子吧：

<div style="filter:alpha(opacity=10,finishOpacity=10,style=10,startX=10,startY=10,finishX=20,finishY=30,add=0,direction=45,strength=10)">
this is alpha.
<img src=filter_test.jpg>
</div>

上面讲的是对于filter静态的使用方法，动态的才是我们要说的重点。

在这里我用的是JavaScript语言来写的一个小程序，所以就拿JavaScript来讲了。JavaScript使用滤镜的格式是怎么样的呢？

对象名.filters(滤镜数值).Apply()
对象名.filters(滤镜数值).Play()
对象名.filters(滤镜数值).Stop()

参数讲解：

1：对象名：就是你要把滤镜施加的对象，比如div标签

2：对于滤镜状态的判断可以通过“对象名.filters(滤镜数值).status”判断，该值为0时，表示滤镜未执行，为1时，表示滤镜已经完成，为2时表示滤镜在执行中。
3：Apply Play Stop

先看一个实例：

function Disappear(){
//ie中执行
    if (document.all) {
        content.filters[0].apply()
        content.innerHTML = "<span style='color:"+MColor[IMessages]+";font-size:"+MSize[IMessages]+";filter: revealTrans(Transition=12, Duration=3)'>"+MA[IMessages]+"</span>"
        content.filters[0].play()
        if (IMessages >= MA.length-1) {    IMessages = 0    }
  else {   IMessages++      }
    }

//firefox中执行
    if (document.layers) {
       document.content.document.write("<span style='color:"+MColor[IMessages]+"'>"+MA[IMessages]+"</span>")
        if (IMessages >= MA.length-1) { IMessages = 0 }
        else {   IMessages++      }
    }
    timer = setTimeout("Disappear()",4000)
}
首先，在开始一个动态效果之前，先需要进行装备（Apply），然后播放（Play）动态效果，在动态效果进行中还可以中断动态效果（Stop）。

那黄色部分又有什么含义呢？

在定义filter时，可以有混合（“filter:blendTrans(duration=时间数值)”，duration表示滤镜执行需要的时间，单位为秒）和显示（“filter:revealTrans(duration=时间数值,transition=过渡类型)”，过渡类型为从0－23的数值）。

看完下面一个完整的实例你可能会对filter有个更深的了解

<html><head></head><body><div style="position:absolute;left:200;top:50;width:400;height:220;background-color:yellow;color:blue;font-size:20px;border:solid black;"id="main"><div id="Inner1" style="position:relative;left:20%;top:35%;width:60%;height:30%; filter:blendTrans(duration=3);"><p align=center>演示区域</p></div><div id="control" style="position:absolute;left:180;top:180"><input type=button value="开始" onclick="toggleMultimedia();"></div></div><mce:script language="JavaScript"></mce:script></body></html>

在此例中你当你按下按钮后将看到三条信息循环在屏幕上渐渐出现，又渐渐消失，同
样你可以用图象代替文本，看看是什么效果？