| |
CSS滤镜制作Dhtml实例(4)
记得以前也有一个关于CSS滤镜的教程,其中的几个Dhtml也很不错,我们来其中一个,实际的图是右边的那张:
源代码如下,下面的代码是放在<head></head>之间的:
<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>
修改<body>语句为<BODY
onload="go()">
以下代码是放在<body>之后需要的位置:
<img src="radar.jpg" id="body1"
style="filter:light()" width="200"
height="200">
在radar.jpg这张图片上使用了"Light"滤镜,定义一个锥形的光源,前面关于"Light"滤镜没有过多的说明,在这里你可以看到它的效果,如果还不够理解的话,在看下面的一个例子.
上一页 返回目录 下一页
|
