1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > CSS Div 实现舞台灯光效果

CSS Div 实现舞台灯光效果

时间:2019-07-22 04:04:41

相关推荐

CSS Div 实现舞台灯光效果

<html>

<head>

<title>舞台灯光</title>

<style type="text/css">

<!--

body{

background-color:#000000;

}

td{

filter:light;

}

-->

</style>

</head>

<body>

<table>

<tr>

<td id="flttgt"><img src="mm.jpg"></td>

</tr>

</table>

<script language="javascript">

var g_numlights=0;

flttgt.οnclick=keyhandler;//点击鼠标

flttgt.οnmοusemοve=mousehandler;//鼠标移动时

function setlights(){

flttgt.filters[0].clear();//先清空所有光源

flttgt.filters[0].addcone(-10,- 10,5,275,370,0,0,150,60,10);//添加蓝色光源

if (g_numlights>0){

flttgt.filters[0].addcone (285,-10,5,0,370,150,0,0,60,10);//添加红色光源

if (g_numlights>1)

flttgt.filters[0].addcone (138,380,5,138,0,0,150,0,60,15);//添加绿色光

}

}

function keyhandler(){

g_numlights= (g_numlights+=1)%3;

setlights();

}

function mousehandler(){

x=(window.event.x-80);

y=(window.event.y-80);

flttgt.filters[0].movelight(0,x,y,5,1);//移动蓝光

if (g_numlights>0){

flttgt.filters[0].movelight(1,x,y,5,1);//移动红光

if (g_numlights>1)

flttgt.filters[0].movelight(2,x,y,5,1);//移动绿光

}

}

setlights();

</script>

</body>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。