CSS滤镜效果之雷达屏幕_div+css教程_H5之家 - 中国HTML5教程资源分享第一站

CSS滤镜效果之雷达屏幕

下面这个程序是用light滤镜模拟雷达屏幕，并且有一架飞机被发现。当然编这个程序要对script 比较熟悉，还要知道lighy滤镜的属性和方法。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>css demo</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE>DIV {
FILTER: blur(add=ture,direction=135,strength=10); WIDTH: 800px
}
</STYLE>
<SCRIPT>
var light_x=20
var light_y=20
var light_z=40
var xinc=10;
var yinc=10;
var r=100;
var deg=0;
var deg1;
var rad;
var pointangle;
var planelight_x=20
var planelight_y=120
var planelight_z=3
var conversion=(2*3.14159)/360
function movefilt()
{
light_x=r+r*Math.cos(deg*conversion);
light_y=r+r*Math.sin(deg*conversion);
deg+=10;
if(deg==360)
deg=0;
body1.filters[0].movelight(0,light_x,light_y,light_z,1);
pointangle=Math.atan((planelight_y-r)/(planelight_x-r))/conversion;
if((planelight_x<r)&&(planelight_y<r))
pointangle+=180;
if((planelight_x>r)&&(planelight_y>r))
pointangle+=360;
if((planelight_x<r)&&(planelight_y>r))
pointangle+=180;
if((deg-10<=pointangle)&&(pointangle<=deg))
body1.filters[0].movelight(2,planelight_x,planelight_y,planelight_z,1);
mytimeout=setTimeout('movefilt()',100);
}
function moveplanes()
{
planelight_x++;
planelight_y++;
if(planelight_y>200) planelight_y=0;
if(planelight_x>200) planelight_x=0;
timeout2=setTimeout('moveplanes()',500);
}
function go(){
body1.filters.light.addcone(100,100,0,light_x,light_y,0,225,0,150,10);
body1.filters.light.addambient(0,225,0,20)
body1.filters.light.addpoint(planelight_x,planelight_y,3,0,225,0,100);
var x=0;
movefilt();
moveplanes();
}
function zap()
{
if(myimg.filters.glow.enabled==1)
{myimg.filters.glow.enabled=0;
}
if (myimg.filters.blendTrans.status==0)
{
myimg.filters.blendTrans.apply();
myimg.filters.glow.enabled=1;
myimg.filters.blendTrans.play();
}
}
</SCRIPT>
<META content="MSHTML 5.00.2614.3500" name=GENERATOR></HEAD>
<BODY onload=go()>
<TABLE border=0 width="89%">
<TBODY>
<TR>
<TD> <IMG
src="" name="body1"
width=200 height=200 hspace=300 id=body1 style="FILTER: light()"></TD>
</TR>
</TBODY>
</TABLE>
<P> </P>
</BODY></HTML>