Picture of the Searchlight effect

1. Overview

Use JavaScript to write a picture searchlight effect, when the page is loaded, the effects of the searchlight will be repeated on the diagram left and right scan, the part of the display as a bright state and the rest of the display as a gray state.

2. Technical Highlights

Using the light attribute in CSS filter technology, the Addpoint () and Movelight () methods are called through the Lights property to set the size of the lighting on the image and move the light.

3. Concrete implementation

(1) To achieve the searchlight effect in the picture scan, the JavaScript code is as follows:

<script language= "JavaScript" >if(document.all &&window.imagelight) {var x=NewArray (); var heading=NewArray (); var y=NewArray (); 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) write the CSS style in the page and mark a picture code as follows:

<style type=text/css>#imagelight {      filter:light}</style><center></center>

Picture of the Searchlight effect