]]>
庆祝甛_成功 发表?2006-5-13 16:50:46
|
RSS是目前流行的|络信息发布标准,有了标准后数据传播和׃n变的更加Ҏ。常见的RSS信息如博客、新闅R技术文档等。本人编写了javascriptdRSS数据的代码?br /> <html> </head> |
]]>
׃是动态{换，上面只是我抓的三张图片，只能帮助你了解其转换q程Q真正的效果只有待你按我下面讲的Ҏ动手做出来才能看到。用BlendTrans滤镜也和Revealtrans滤镜一P需要借助于Javascript来调用它的方法来实现Q我们现在就以实C面这U效果ؓ例来看看如何使用 BlendTrans滤镜Q首先你必须准备几张同样大小的图片?br />
制作ҎQ?br />1、用老办法（前面的文章已介绍了多ơ）制作一个BlendTrans滤镜Q取名ؓ“myblen"QDuration讄为?"Q即转换旉?U）Qo镜设|好后，在网|代码?lt; head >?lt; /head >之间有下面q样的代码：
< style type="text/css" >
< !--
.myblen { filter:blendTrans(Duration=3)}
-- >
< /style >
2、插入第一张图片，在图片的属性面板上l图片加个名UͼmyimgQ?br />3、把BlendTrans滤镜加蝲到图片上Q这时图片的“img"标记的代码是q样的：< img src="image/cssp1.jpg" width="200" height="134" class="mybend" name="myimg">Q?br />4、在|页的源代码< head >?lt; /head >之间插入下面q段JavascriptE序Q?br />< script language="JavaScript" >
< !--
// 获取数组记录?br />function ImgArray(len)
{
this.length=len;
}
// x数组q给数组元素赋|也就是把囄的相对\径保存v来，若是囄较多Q可增加数组元素的个敎ͼ
// 我在q个例子中只用了三张囄Q所以数l元素个Cؓ?"?br />ImgName=new ImgArray(3);
ImgName[0]="image/cssp2.jpg";
// 你在制作时要把这里的"image/cssp2.jpg"换成你的囄所在的路径和图片文件名Q?br />ImgName[1]="image/cssp3.jpg";
// 你在制作时要把这里的"image/cssp3.jpg"换成你的囄所在的路径和图片文件名Q?br />ImgName[2]="image/cssp1.jpg";
// 你在制作时要把这里的"image/cssp1.jpg"换成你的囄所在的路径和图片文件名Q?br />var i=1;
// 演示变换效果
function playImg()
{
if (i==2)
{ i=0 ;}
else
{ i++; }
myimg.filters[0].apply(); // q里的“myimg”是你在|页中插入的那张囄的代P
myimg.src=ImgName[i]; // 当你改变了插入的囄代号Ӟq里也一定要改变Q?br />myimg.filters[0].play(); // 否则Q程序在变换时可找不着北了?
// 讄演示旉Q这里是以毫Uؓ单位的，所以?000"是指每张囄的演C时间是6U钟Q这个时间D在于
// 滤镜中设|的转换旉|q样当{换结束后q停留一D|_让h看清楚图片?br />mytimeout=setTimeout("playImg()",6000);
}
-- >
< /script >
5、在|页源代码的< body >加入q样的一句代码：onload="playImg()"?br />好了Q快按F12ƣ赏你的C吧?
若是惛_囄上获得上一介l的RevealTrans滤镜效果Q只要把本例中的滤镜代码换一换就行了Q动手试试吧Q?img src ="http://www.aygfsteel.com/zhhp1314520/aggbug/78108.html" width = "1" height = "1" />
]]>
因此Q你只要改变RevealTrans滤镜的“Transition"的|p获得不同的网切换效果，是不是太方便了点Q但很遗憾，要把 RevealTrans滤镜用于|页中的某个对象没有这么简单了Q它必须借助于Javascript来调用其ҎQ才能实玎ͼq就是说要动手编E序了。但也不是太难，下面我将通过一个制作动态字q变换的例子来说明其使用Ҏ?br />
渐E字幕变换效果
q个例子演示了利用JavascriptE序控制Revealtrans滤镜来实现字q逐渐淡出和渐q的效果Q请看下面的效果图：
上面的效果看h好象不好Q是吗？实际效果看v来比q漂亮多了。由于是动态{换，上面只是我抓的三张图片，只能帮助你了解其转换q程Q真正的效果只有待你按我下面讲的Ҏ动手做出来才能看到。请看制作方法：
1、制作一个Revealtrans滤镜Q取名ؓ“mytrans"Q其制作Ҏ与前面介l的静态o镜相同，参数gؓTransition=12, Duration=2。设|好后，在网|代码?lt; head >?lt; /head >之间有下面q样的代码：
< style type="text/css" >
< !--
.mytrans { filter:revealTrans(Transition=12,Duration=2)}
-- >
< /style >
2、插入一个层Q我们把层的“Layer ID”改为“div1”（可直接在层的属性面板上加入卛_Q，q设|好层的背景和调整好层的大小Qƈ把Revealtrans滤镜加蝲到到层上Q这时你看到的层的标C码是q样的：< div id="div1" style="position:absolute; width:680px; height:30px; z-index:37; background: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000" class="mytrans" >< /div >
3、在|页源代码的< head >?lt; /head >之间插入下面q段JavascriptE序Q?br />< script language="JavaScript" >
< !--
function HelpArray(len)
{
this.length=len;
}
// 建立一个数l，存放转换的内宏V?br />HelpText=new HelpArray(5);
HelpText[0]="在一个文档用动态{换的滤镜QRevealtransQ其实是很容易的?;
HelpText[1]="首先Qؓ对象的样式表单徏立一个需要{换的“Revaltrans"滤镜Q?;
HelpText[2]="然后Q用“apply()"Ҏ防止错误Q?;
HelpText[3]="现在Q你可以改变M你想改变的东西，";
HelpText[4]="最后，“play()"Ҏ开始进行{换?;
ScriptText=new HelpArray(5);
var i= -1;
// 昄转换效果
function playHelp()
{
if (i==4)
{ i=0 ;}
else
{ i++; }
div1.filters[0].apply();
div1.innerText=HelpText[i];
div1.filters[0].play();
// 讄每段字幕演示的时_以毫U计。这里的旉要长于o镜中的时_以保证在转换l束后能停留一D|间?br />// 以方便看清楚字幕内容。在本例中字q演C的旉?U，滤镜中设|的转换旉?U?br />mytimeout=setTimeout("playHelp()",6000);
}
-- >
< /script >
4、在|页的源代码?lt; body >中加入这样一句代码：onload="playHelp()"?br />到此Q可以按F12看效果了Q好象也不是太难。你若是想看看其它的转换效果Q只要改变一下Revealtrans滤镜中的Transition参数值就行了Q其它什么也不用改动Q你瞧多方便Q用它来作广告条我想效果不会差。比起动L可瘦多了?br />当然Revealtrans滤镜同样也可以用于图片，效果也不错，但要改动一下JavascriptE序。由于CSSq有一个动态o镜是 BlendTrans滤镜Q用它做囄的E入E出效果相当不错，且这两个滤镜的用方法有许多cM的地方，所以关于怎样在图片上用Revealtrans 滤镜来生变换效果，我就一q放C一赯了?img src ="http://www.aygfsteel.com/zhhp1314520/aggbug/78101.html" width = "1" height = "1" />
]]>