论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

CSS滤镜效果之雷达屏幕

文章类别:div+css | 发表日期:2011-5-2 9:09:21

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>

视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058