Alpha 过滤器及其动态效果播放器
语法:
| HTML: | <ELEMENT STYLE="filter:Alpha(sProperties)" ... > |
| 脚本: | object.style.filter="Alpha(sProperties)" |
可能的值:
| sProperties | 用于指定指定过滤器提供一个或多个属性的串,如"style=1 ,startX=100,startY=100"。 |
对象属性/特性说明:
| 属性 | 特征 | 描述 |
| enabled | Enabled | 设置/返回当前的Alpha过滤器可否允许。 |
| finishOpacity | FinishOpacity | 设置/返回结束时不透明梯度值,该值可从0(完全透明)到100(完全不透明),默认值为0 |
| finishX | FinishX | 设置/返回不透明梯度结束点的X坐标,没有默认值 |
| finishY | FinishY | 设置/返回不透明梯度结束点的Y坐标 |
| opacity | Opacity | 设置/返回不透明梯度值可,从0(完全透明)到100(完全不透明),默认值为0 |
| startX | StartX | 设置/返回不透明梯度起始点的X坐标 |
| startY | StartY | 设置/返回不透明梯度结束点的Y坐标 |
| style | Style | 设置/返回不透明梯度的形状待征。可以取值为0 - 统一的 ,1 -线性的 ,2 -放射性的 ,3 - 矩形的。 |
使用说明:
您在使用Aphla过滤器时,可以通过设置Style属性来设置不透明梯度的形状待征(可以是0 - 均衡的 ,1 -线性的 ,2 -放射性的 ,3 - 矩形的),下表显示了Style与其它属性的关系(Y:有效;N :无效)
| Style | 0—Uniform (统一的) | 1—Linear (线性的) | 2—Radial (放射性的) | 3—Rectangular (矩形的) |
| opacity | Y | Y | Y | Y |
| finishOpacity | N | Y | Y | Y |
| finishX,finishY | N | Y | Y | Y |
| startX,startY | N | Y | Y | Y |
为了在网页中使用脚本设置它们,您可以将需要过滤的对象设置一个ID值,如下:
<div ID=ID名 style="width:层宽度;height:层高度;
Alpha(style=1,startx=100,startY=100,opacity=50)">
在此放入您需要的过渡的内容
</div>
用Javascript可以设置它们的相关属性,如想将Opacity更改为60, 则代码如下:
ID名.filters.item("Alpha").opacity=60;
以下即是一个效果演示程序:
![]() |
|
右边为可选择的属性列表,我们将这些元素名(name)和ID号均定义特性名,如类别style,其元素名便为"style", 一旦这些属性的值发生了改变OnChange,则可调用以下函数来完成:
function ChangeProperty(Obj) '入口参数:Obj对象名
{
var name=Obj.name; //对象名即中属性名
var value=Obj.value; //对象的值即中属性值
//利用eval来执行相关的Alpha命令
eval('filterDIV.filters.item("Alpha").'+name='"+value+'"');
if(name= = "style")//为改变类别
{ t=(value=="1") //只有当类别为1 -linear时,StartX,StartY,finishX,finishY才有效
startX.disabled=t;
startY.disabled=t;
finishX.disabled=t;
finishY.disabled=t;
//只有当Style=0 - Uniform 时,FinishOpacity才无效
finishOpacity.disabled=(value=="0");
}
} 动态效果演示
利用上述介绍的一些参数说明,我们可以完成一些特技功能,如:若将filterDIV.filters.item("Alpha").Style设置为0(均衡的),将opacity值从0逐加到100,则可实现淡出效果,相反,将opacity从100到0,则可淡入效果。
当然,若在图片完全淡出后,此时将图片更换成另一张图片,再淡入它,则可以实现多张图片的淡入淡出技术,此时其代码需要做一些小的改变:function Fade(Type,First) //淡入淡出:Type=0 淡入 否则 淡出 //First=1 第一次调用否则表示后来调用。 { var obj=AlphaDIV.filterDIV.filters.item("Alpha"); if(typeof(First)=="undefined" || First) First=1;else First=0; obj.Style=0; if(First==1) //第一次调用 { if(Type==0) //类别为淡入 opacity=0; //则开始透明度为0 else opacity=100;//开始透明度为100 isEnd=false; } else if(Type==0) { opacity++; obj.opacity=opacity; if(opacity==100) isEnd=true; else isEnd=false; } else { opacity--; obj.opacity=opacity; if(opacity==0) isEnd=true; else isEnd=false; } if(!isEnd) window.setTimeout("Fade("+Type+",0)",500);}
var iList=new Array("images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg");//图片列表文件 var cn=0; //当前显示的是第几个(从0开始) var isExit=false;//是否中断退出function mFade(Type,First) //淡入淡出:Type=0 淡入 否则 淡出 //First=1 第一次调用否则表示后来调用。 { var obj=AlphaDIVExp.filters.item("Alpha"); var n; if(typeof(First)=="undefined" || First) First=1;else First=0; if (isExit && First==0) return; if(First==1) //第一次调用 { isExit=false; if(Type==0) n=100; //类别为淡出则开始不透明度为100 else n=0;//开始不透明度为0 isEnd=false; } else { n=obj.opacity; if(Type==1) //淡入 { n++;if(n>=100) isEnd=true; else isEnd=false;} else //淡出 { n--;if(n<=0) isEnd=true; else isEnd=false;} } obj.opacity=n; if(!isEnd) //没有完成,继续进行 window.setTimeout("mFade("+Type+",0)",5); else { if(Type==0) //当前是淡出结束 {cn++;Type=1; if(cn>=iList.length) cn=0; ShowImageID.src =iList[cn]; //显示下一张图片 } else Type=0; //转换当前的显示类别 window.setTimeout("mFade("+Type+",1)",5); }TypeDIV.innerText=Type + ":"+ cn +":"+isEnd}
如果想中断演示,可以调用以下函数: function Stop(){isExit=true;}。
以下即是演示这种这种迷人的效果示例,请点击这里开始多图淡入淡出。想停止时,点击停止演示。![]() |
Alpha动态效果播放器
毕竟,仅有几种效果不会吸引人的注意,而制作每种效果又需要编写相关的代码,这的确让让人不可接收,而且很费时间。如果我们编写一个能播放命令的Player,改变相关的播放命令即可完成动态效果的播放,它的确会是另一种味道了。
想先偿偿鲜的话, 你可以在下面的Player中一试身手,上面的列表中预设了几种效果。
![]() | 效果演示: 以下是一个非常Cool的动态Alpha效果播放器,它的命令格式为"属性名11=属性值11,...,属性名1n=属性值1n;...;属性名n1=属性值n1,...,属性名nn=属性值nn"。其中属性名可以取值为s,x,y,fx,fy,o,fo六种,属性值为0-100之间。比如,您想将当前的效果设置为淡入效果,则命令串为"s=0,o=0;o=100"(它表示首先将显示模式为o,不透明度为0,然后透明度一直达到100)。 |
试用后,您有什么感觉!想自己动手做一个吗?跟我来吧!
Alpha动态效果播放器实现方法
以下我将以如下的格式命令作为播放命令串:
属性名11=属性值11,...,属性名1n=属性值1n; 属性名n1=属性值n1,...,属性名2n=属性值2n; ........ 属性名n1=属性值n1,...,属性名nn=属性值nn
说明:
1)属性名可以取值为s(style),x(startx),y(starty),fx(finishX),fy(finishY),o(opacity),fo(finishOpactiy)六种,属性值为0-100之间;如果属性名为s(style),则属性值只能是(0-3)之间。
2)每一种效果之间用分号(;)分开,前面表示初始时的效果,后一项则表示转换后的效果。如您实现淡入效果,则命令串为"s=0,o=0;o=100"(它表示首先将显示模式为o,不透明度为0,然后透明度一直达到100)。
以下先讲解相关的函数说明
1)PlayAlpha(ObjectName) //用于迎创PlayAlpha ,其中ObjectName表示您的使用的对象的ID号。
2)一旦对象建立,则可以使用该对象进行相关的操作
方法:
Object.SetSpeed(n); //改变播放的速度 n=0-1000之间,n越大速度越慢
Object.Play(s); //开始播放命令
Object.Stop(); //停止当前的播放
属性:
Object.Status //返回当前播放器的状态,若Status不是1, 表示出错
Object.Error //返回当前播放器的状态字符串
以下即是相关的函数说明
function PlayAlpha(ObjectName) //Filter对象名ID值
{
this.pName=new Array("s","x","y","fx","fy","o","fo");
this.SrcName=new Array("style","startx","starty","finishx","finishy","opacity","finishopacity");
this.Object=ObjectName; this.MaxStep=0;
this.Speed=5; this.x=0;this.y=0;
this.fx=0;this.fy=0;
this.o=100; this.fo=100;
this.ex=0; this.ey=0;
this.efx=0; this.efy=0;
this.eo=0; this.efo=0;
this.Cmd=new Array();
this.CmdCount=0;
this.CurNo=0; this.Step=0; this.MaxStep=0;
this.Status=0; // 0 保留 1 正在播放 -1 中断,或者播放完成 -2 分析命令出错
this.Error=""; //当前的错误信息串
this.Init=PlayAlpha_Init;
this.SetSpeed=PlayAlpha_SetSpeed;
this.SetValue=PlayAlpha_SetValue;
this.GetValue=PlayAlpha_GetValue;
this.GetName=PlayAlpha_GetName;
this.Play=PlayAlpha_Play;
this.Stop=PlayAlpha_Stop;
this.SetInitValue=PlayAlpha_SetInitValue;
this.Analyze=PlayAlpha_Analyze;
return(this);
} function PlayAlpha_GetName(s)
{
s=s.toLowerCase();
for(i=0;i<this.pName.length;i++)
if(s==this.pName[i]) return(this.SrcName[i]);
return("");
} function PlayAlpha_GetValue(name)
{ //取得对象的相关属性值
name=this.GetName(name);
if(name!="")
return(eval(this.Object+'.filters.item("Alpha").'+name))
else
return("");
}
function PlayAlpha_SetValue(name,value)
{ //设置对象的相关属性
name=this.GetName(name);
if(name!="" && !isNaN(value))
{ value=parseInt(value,10);
if(value>=0 && value<=100 && name!="style" || name=="style" && value<=3 && value>=0)
eval(this.Object+'.filters.item("Alpha").'+name+'='+value);
}
}
function PlayAlpha_SetSpeed(n)
{ //设置对象的播放速度
if(n>=0 && n<=1000) this.Speed=n;
}
function PlayAlpha_Stop() //停止播放
{
if(this.Status==1) this.Status=-1;
}
function PlayAlpha_Init()
{ //对象初始化
var m;
this.x=this.GetValue("x"); this.y=this.GetValue("y");
this.fx=this.GetValue("fx"); this.fy=this.GetValue("fy");
this.o=this.GetValue("o"); this.fo=this.GetValue("fo");
this.s=this.GetValue("s"); this.ex=this.x;
this.ey=this.y; this.efx=this.fx;
this.efy=this.fy; this.eo=this.o;
this.efo=this.fo;
if(this.CmdCount>1 && this.CurCmdNo<=this.CmdCount && this.CurCmdNo>=1)
{ this.SetInitValue(this.Cmd[this.CurCmdNo-1],true);
this.SetInitValue(this.Cmd[this.CurCmdNo],false);
this.Step=0;
//以下计算转换的最大步长
m=Math.abs(this.o-this.eo);
m=Math.max(m,Math.abs(this.x-this.ex));
m=Math.max(m,Math.abs(this.y-this.ey));
m=Math.max(m,Math.abs(this.fo-this.efo));
m=Math.max(m,Math.abs(this.fx-this.efx));
m=Math.max(m,Math.abs(this.fy-this.efy));
this.MaxStep=m;
}
else
this.MaxStep=0;
}
function PlayAlpha_Play(s) //需要Play的命令串,返回是否有错
{ var m1 ,m2;
if(this.Status==1) //当前有对象正在播放,返回
{ this.Error="正在播放中,不能接收另一种播放方式!,";return(true);}
this.Cmd=s.split(";"); this.CmdCount=this.Cmd.length;
if(this.CmdCount>1) //需要设置两个或两个变换以下才能Play
{ this.Status=0;
for(i=0;i<this.CmdCount && this.Status!=0;i++)
{ this.Analyze(this.Cmd[i]); //分析命令串
if(this.Status!=0)//没能过,则返回
{this.CmdCount=0;this.CurCmdNo=0;
return(true);
}
}
//通过,则开始Play
this.CurCmdNo=1;//当前播放的是第一个转换
this.Status=1 ;//正在播放
this.Init(); this.Error="正在播放"; StartPlay();
return(false)
}
else
{ this.Status=-2; this.Error="没有可播放的命令串!"; return(true); }
}
function PlayAlpha_Analyze(s) //分析命令串是否合法
{
s=s.toLowerCase();
var nvl=s.split(",");
for(var j=0;j<nvl.length;j++)
{if(nvl[j]!="")
{ var nv=nvl[i].split("=");
if(nv.length==2 && !isNaN(nv[1]))
{ n=parseInt(nv[1]);
if(n<0 || n>100 || nv[0]=="style" && n>3)
{ this.Status=-2;
this.Error="设置的值必须在0-100之间,并且s取值为0-100之间";
return(false);
}
if(this.GetName(nv[0])=="") //是否有该属性
{ this.Status=-2;
this.Error="不能识别的属性:"+nv[0];
return(false);
}
}
else
{ this.Status=-2;
this.Error="命令格式必需为\"属性名[s,x,y,fx,fy,o,fo]=属性值[0-100,0-3]\"";
return(false);
}
}
else
{ this.Status=-2; this.Error="命令串不能为空值!"; return(false); }
}
if(nvl.length>0)
{this.Status=0; return(true); }
else
{this.Status=-2; this.Error="命令串不能为空值!"; return(false); }
}
function PlayAlpha_SetInitValue(s,isInit)
{
var n,nvl=s.split(",");
for(var j=0;j<nvl.length;j++)
{ nv=nvl[j].split("="); n=parseInt(nv[1]);
switch(nv[0])
{case "x":if(isInit) {this.x=n;this.SetValue("x",n);} this.ex=n; break;
case "y":if(isInit) {this.y=n;this.SetValue("y",n);} this.ey=n; break;
case "o":if(isInit) {this.o=n;this.SetValue("o",n);} this.eo=n; break;
case "fx":if(isInit) {this.fx=n;this.SetValue("fx",n);} this.efx=n; break;
case "fo":if(isInit) {this.fo=n;this.SetValue("fo",n);} this.efo=n; break;
case "fy":if(isInit) {this.fy=n;this.SetValue("fy",n);} this.efy=n; break;
case "s": if(isInit) this.SetValue("s",n);break;
}
}
}
function StartPlay()
{
var c=0,t;
if(Obj.Status==-1) //中断则退出
return;
if(Obj.Step>Obj.MaxStep) //当前的命令串Play完成
{ Obj.CurCmdNo++;
if(Obj.CurCmdNo>=Obj.CmdCount) //已播放完成
{ Obj.Status=-1; Obj.Error="播放完成"; return; }
Obj.Init();//对象初如化;
}
t=(Obj.Step/Obj.MaxStep);
c=(Obj.ex-Obj.x)*t+Obj.x+0.5;Obj.SetValue("x",c);
c=(Obj.ey-Obj.y)*t+Obj.y+0.5;Obj.SetValue("y",c);
c=(Obj.eo-Obj.o)*t+Obj.o+0.5; Obj.SetValue("o",c);
c=(Obj.efo-Obj.fo)*t+Obj.fo+0.5; Obj.SetValue("fo",c);
c=(Obj.efx-Obj.fx)*t+Obj.fx+0.5; Obj.SetValue("fx",c);
c=(Obj.efy-Obj.fy)*t+Obj.fy+0.5;Obj.SetValue("fy",c);
Obj.Step=Obj.Step+1;
window.setTimeout("StartPlay()",Obj.Speed); //继续进行下一步的播放
}
|
比如,如果您将过渡的效果层定义为AlphaDIVExp, 那么我们可以这样建立这个动态效果播放器
var Obj=new PlayAlpha("AlphaDIVExp"); 若要播放它,调用如下的命令即可
function Play(s)
{ if(Obj.Play(s))
alert(Obj.Error);
} 以下是一些常见动态效果的播放命令,聪明的读者会写出更多: