图片的探照灯效果

1.概述

使用JavaScript编写一个图片探照灯的特效，当页面被加载时，这个探照灯的效果会在图上重复左右扫描，将其中一部分显示为光亮状态而其它部分显示为灰暗状态。

2.技术要点

使用了CSS滤镜技术中的light属性，通过light属性调用addPoint()和MoveLight()方法，来设置图片上光源的大小，并移动光源。

3.具体实现

（1）实现探照灯效果在图片扫描，javaScript代码如下：

<script language="javascript">
if (document.all && window.imagelight){
      var x=new Array();
      var heading=new Array();
      var y=new Array();
      if (imagelight.length==null){
            imagelight[0]=document.all.imagelight;
            x[0]=0;
            heading[0]="right";
            y[0]=imagelight[0].height;
            imagelight[0].filters.light.addPoint(100,50,100,255,255,255,90);
      }
      else
            for (i=0;i<imagelight.length;i++){
            x[i]=0;
            heading[i]="right";
            y[i]=imagelight[i].height;
            imagelight[i].filters.light.addPoint(100,50,100,255,255,255,90);
      }
}
function light(cur){
      imagelight[cur].filters.light.MoveLight(0,x[cur],y[cur],200,-1);
      if (x[cur]<imagelight[cur].width+200&&heading[cur]=="right")
            x[cur]+=10;
      else if (x[cur]>imagelight[cur].width+200){
            heading[cur]="left";
            x[cur]-=10;
      }
      else if (x[cur]>-200&&x[cur]<-185){
            heading[cur]="right";
            x[cur]+=10;
      }
      else{
            x[cur]-=10;
            heading[cur]="left";
      }
}
if (document.all&&window.imagelight){
      if (imagelight.length==null)
            setInterval("light(0)",imagelight[0].speed);
      else
            for (t=0;t<imagelight.length;t++){
            var temp=‘setInterval("light(‘+t+‘)",‘+imagelight[t].speed+‘)‘;
            eval(temp);
            }
}
</SCRIPT>

（2）在页面中编写css样式，并标记一幅图片代码如下：

<STYLE type=text/css>
#imagelight {
      FILTER: light
}
</STYLE>
<center>
<IMG id="imagelight" src="test.jpg" speed="20">
</center>