您的位置：首页 > Web前端 > CSS

CSS Div 实现舞台灯光效果

2014-12-01 13:58 691 查看

<html>

<head>

<title>舞台灯光</title>

<style type="text/css">



</style>

   </head>

<body>

<table>

<tr>

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

</tr>

</table>

<script language="javascript">

var g_numlights=0;

flttgt.onclick=keyhandler;   //点击鼠标

flttgt.onmousemove=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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css javascript filter html

相关文章推荐

新的分享

章节导航