第9章 CSS滤镜与程序语言
渐隐图像交换
过滤器里的菜单还有“BlendTrans”“RevealTrans”“light”三个，这三个与前面讲的一些滤镜比较复杂。这三个滤镜是需要程序辅助才能显示出效果的，一些人称做“高级滤镜”，不会编程的是有好多人不会用的。编程序似乎不是大家要学的东西，不过“套”程序吗，从Flash学习看，还是能成功的。
图片渐隐变换滤镜：BlendTrans(Duration=?)
该项只有一个可设置参数“Duration=?”设置渐隐时间。但你给图片加上这个样式表后，你会发现图片并不会有任何变化，因为还得有程序辅助运行。
程序中要用图片“名字”。选中图片，打开属性面板，给图片输入名字“tp”。
选择代码视图，光标放在</head>前面按回车键，使产生一空行，把下面代码插入到空行处。
<script language="javascript" >
<!--
function img(x)
{
this.length=x;
}
iname=new img(3);
iname[0]="img/img0.jpg";
iname[1]="img/img1.jpg";
iname[2]="img/img2.jpg";
iname[3]="img/img3.jpg";
var i=1;
function play()
{
if (i==3)
{ i=0 ;}
else
{ i++; }
tp.filters[0].apply();
tp.src=iname[i];
tp.filters[0].play();
mytimeout=setTimeout("play()",6000);
}
-->
</script >
找到<body>标签，添加 onload="play()" 一句。添好后是：
<body onload="play()">
下一步，你找4幅图片，分别命名为“img0.jpg”“img1.jpg”“img2.jpg”“img3.jpg”，放到“img”目录里就完成任务了。浏览一下看，别人还以为你是用Flash制作的动画呢。
如果你有更多图片，那就依次给他们起更多名字，同时把“iname=new img(3);”和“if (i==3)”中的“3”改成需要的数字就行了。
切入图像交换
切入图像交换：RevealTrans(Duration=?, Transition=?)
切入也是图片变换滤镜，只是变换方式不同。参数“Duration=?”设置变换时间；“ Transition=?”设置变换方式，变换方式(0～23)有24种可供选择。
上面的渐隐渐变制作成功了吗，如果已经成功，用DW打开文件，修改样式表，把“BlendTrans”换成“RevealTrans”滤镜，参数输入“Duration=4, Transition=3”，看看是什么变换效果。
再修改样式表，把滤镜参数改成“RevealTrans(Duration=4, Transition=9)看看百页窗效果。
把滤镜参数改成“Transition=12”看看溶解式变换效果。
其他变换方式只用改最后一个数字，你自己试吧。
矩形从大至小 0
矩形从小至大 1
圆形从大至小 2
圆形从小至大 3
向上推开 4
向下推开 5
向右推开 6
向左推开 7
垂直形百叶窗 8
水平形百叶窗 9
水平棋盘 10
垂直棋盘 11
随机溶解 12
垂直向内裂开 13
垂直向外裂开 14
水平向内裂开 15
水平向外裂开 16
向左下剥开 17
向左上剥开 18
向右下剥开 19
向右上剥开 20
随机水平细纹 21
随机垂直细纹 22
随机选取一种特效 23
灯光照射效果
灯光滤镜：light
灯光滤镜也不用任何参数。建立样式表中，名称输入“dg”，过滤器选择“light”就完了。可是你把样式表加载给图片，就这样保存文件，用浏览器打开看，整个图片是一片漆黑——灯光在哪里！
下面给灯光加“程序”。选中图片，打开属性面板，给图片输入名字“tp”。
选择代码视图，看看你的<img 标签里有没有 name="tp" id="tp" 这样的标记，有就行了，在<img 标签的下一行打回车，使产生一个空行，把下面代码粘贴到这个空行。
<script language="Javascript">
<!--
window.onload=dg;
function dg(){
tp.filters[0].addcone(275,-30,0,200,160,240,230,180,90,30); }
-->
</script>
保存文件后，用浏览器打开这个网页看，这个灯光还可以吗！
可能不太理想，因为你的图片大小、颜色、主题位置等都不一样，看到哪些不太合适，再修改一下括号内的数字吧。括号内共有10项，第1、2、3项是光源x、y、z轴坐标位置，上例中我的灯放在图片上方30像素高处，y值为负数；第4、5项为目标中心位置的x、y坐标，这是我要突出的图片主题所在；第6、7、8项分别为红、绿、蓝三基色的值，以十进制表示(0～255)；第9项为光照亮度(0～100)；第10项是灯光夹角。
好了，知道了这些数字都干什么用的，你自己看着修改吧。
能再添一个灯吗？不过原来的得先改一下，亮度减少些，原来的90改成50吧，再添一个灯也设置成50，不然两个灯同时照岂不太亮了。改后代码如下：
<script language="Javascript">
<!--
window.onload=dg;
function dg(){
tp.filters[0].addcone(275,-30,0,200,160,160,200,230,50,30);
tp.filters[0].addcone(-20,30,10,180,160,240,140,180,50,24);
}
-->
</script>
看看两外灯怎么样。
看出窍门了吗，你也可以再添加灯光的。
再玩一下，反正是复制粘贴程序，代码复杂与简单操作方法都一样，再给你添加一个鼠标函数，看看用鼠标控制灯光是否更有趣。当然下面这两例也没有多少实用价值，网页中有时可见到前两种效果，下面只是看一下这“梦幻”软件的功能。
<script language="Javascript">
<!--
window.onload=dg;
function dg(){
tp.filters[0].addcone(275,-30,0,200,160,240,230,180,90,30); }
tp.onmousemove=sb;
function sb()
{
x=(window.event.x);
y=(window.event.y);
tp.filters[0].movelight(0,x,y,0,1);
}
-->
</script>
两个灯能用鼠标控制吗，那就用下面程序：
<script language="Javascript">
<!--
window.onload=dg;
function dg(){
tp.filters[0].addcone(275,-30,0,200,160,160,200,220,50,30);
tp.filters[0].addcone(-10,30,0,180,160,240,140,180,50,24);
}
tp.onmousemove=sb;
function sb()
{
x=(window.event.x);
y=(window.event.y);
tp.filters[0].movelight(0,x,y,0,1);
tp.filters[0].movelight(1,x,y,0,1);
}
-->
</script>
轻轻松松学网页——怎么一点也不轻松啊！好啦，滤镜告一段落，大家轻松一下吧。
有说学得迷迷糊糊的，不要急，迷糊了就睡一会儿。当你一觉醒来，揉揉眼，到网上看一看，啊，诺大的互联网，无以计数的网站网页，再转转，啊，他们这些页面的制作方法我会了，呵，我还会一些别人不会的功能，我做出来效果还没有多少人会，我还做出来了编程者们才能实现的效果，心中不会有一种不可名状的自豪感呀——这点“不轻松”也显得有点值呢！