亲品藏
^
JavaScript教程之Blendtrans滤镜的使用

  JavaScript里面可以是用滤镜的功能,这样就能实现图片幻灯片的效果,下面小编给大家讲解下Blendtrans滤镜可以使图片产生淡入淡出的幻灯效果。

JavaScript教程之Blendtrans滤镜的使用
JavaScript教程之Blendtrans滤镜的使用

  制作过程:

  一、准备图片10张,文件名为0.jpg至9.jpg。

  二、建立一个CSS样式作为图片边框。

  《style》

  body img{border:3 gold ridge}

  《/style》

  三、将下列代码放到《head》间。

  《script language=“JavaScript”》《BR》  function ImgArray(len)《BR》  {《BR》   this.length=len;《BR》   }《BR》  ImgName=new ImgArray(10);《BR》  ImgName[0]=“0.jpg”;《BR》  ImgName[1]=“18.jpg”;《BR》  ImgName[2]=“28.jpg”;《BR》ImgName[3]=“3.jpg”;《BR》  ImgName[4]=“4.jpg”;《BR》  ImgName[5]=“5.jpg”;《BR》ImgName[6]=“6.jpg”;《BR》  ImgName[7]=“7.jpg”;《BR》  ImgName[8]=“8.jpg”;《BR》ImgName[9]=“9.jpg”;《BR》  var t=0;《BR》  function playImg()《BR》  {《BR》if (t==9)《BR》   {t=0;}《BR》   else《BR》   {t++;}《BR》img.style.filter=“blendTrans(Duration=3)”;《BR》  img.filters[0].apply();《BR》  img.src=ImgName[t];《BR》  img.filters[0].play();《BR》  mytimeout=setTimeout(“playImg()”,5000);《BR》   }《BR》《/script》《BR》

  四、将下列代码放到《body》里。

  《body bgcolor=“#FFFFFF” text=“#000000” onload=“playImg()”》

  《img src=“0.jpg” width=“96” height=“120” name=“img” 》

相关阅读

CopyRight 亲品藏移动版(m.qinpinchang.com)