当前位置：网络学院首页 >> 设计教程 >> web标准 >> CSS:BlendTrans滤镜

CSS:BlendTrans滤镜 (1)

来源：中国设计秀作者：点击：532 加入收藏

BlendTrans滤镜比起上一篇介绍的Revealtrans滤镜来要简单一些，它只有一个参数：Duration 变换时间，它的功能也比较单一，就是产生一种淡入淡出的效果，不过它的这种效果比起RevealTrans滤镜的淡入淡出效果来要精细的多，你看看下面也就不言而喻了。

图1 第一幅图片

图2 转换中的图片

图3 第二幅图片

　　由于是动态转换，上面只是我抓的三张图片，只能帮助你了解其转换过程，真正的效果只有待你按我下面讲的方法动手做出来才能看到。使用 BlendTrans滤镜也和Revealtrans滤镜一样，需要借助于Javascript来调用它的方法来实现，我们现在就以实现上面这种效果为例来看看如何使用BlendTrans滤镜，首先你必须准备几张同样大小的图片。
　　制作方法：
　　1、用老办法（前面的文章已介绍了多次）制作一个BlendTrans滤镜，取名为“myblen"，Duration设置为“3"（即转换时间为3秒），滤镜设置好后，在网页源代码的< head >与< /head >之间将有下面这样的代码：
　　< style type="text/css" >
　　< !--
　　　.myblen { filter:blendTrans(Duration=3)}
　　-- >
　　< /style >
　　2、插入第一张图片，在图片的属性面板上给图片加个名称：myimg；
　　3、把BlendTrans滤镜加载到图片上；这时图片的“img"标记的代码是这样的：< img src="image/cssp1.jpg" width="200" height="134" class="mybend" name="myimg" align="left" >；
　　4、在网页的源代码< head >与< /head >之间插入下面这段Javascript程序：
　　< script language="JavaScript" >
　　< !--
　　// 获取数组记录数
　　function ImgArray(len)
　　{
　　　this.length=len;
　　}
　　// 申明数组并给数组元素赋值，也就是把图片的相对路径保存起来，若是图片较多，可增加数组元素的个数，
　　// 我在这个例子中只用了三张图片，所以数组元素个数为“3"。
　　ImgName=new ImgArray(3);
　　ImgName[0]="image/cssp2.jpg";
　　// 你在制作时要把这里的"image/cssp2.jpg"换成你的图片所在的路径和图片文件名；
　　ImgName[1]="image/cssp3.jpg";
　　// 你在制作时要把这里的"image/cssp3.jpg"换成你的图片所在的路径和图片文件名；
　　ImgName[2]="image/cssp1.jpg";
　　// 你在制作时要把这里的"image/cssp1.jpg"换成你的图片所在的路径和图片文件名；
　　var i=1;
　　// 演示变换效果
　　function playImg()
　　{
　　　if (i==2)
　　　{ i=0 ;}
　　　else
　　　{ i++; }
　　myimg.filters[0].apply(); // 这里的“myimg”是你在网页中插入的那张图片的代号，
　　myimg.src=ImgName[i]; // 当你改变了插入的图片代号时，这里也一定要改变，

顶一下

[1] [2]

2007-10-22 12:33:00 出处：

本文引用地址：http://www.cnwebshow.com/edu/html/article_1425.html

热点文章/相关文章

素材下载　矢量潮流素材背景素材模板