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="http://www.jzxue.com/System/uploads/userup/1105/010925541623.jpg" name="body1"
width=200 height=200 hspace=300 id=body1 style="FILTER: light()"></TD>
</TR>
</TBODY>
</TABLE>
<P> </P>
</BODY></HTML>
Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |