CSS Div 实现舞台灯光效果

最新推荐文章于 2024-05-30 10:50:01 发布

jueshiyaoxian

最新推荐文章于 2024-05-30 10:50:01 发布

阅读量3.5k

点赞数

分类专栏： WEB 前端文章标签： css javascript filter html

WEB 前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<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.ο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>

jueshiyaoxian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS Div 实现舞台灯光效果

舞台灯光body{ background-color:#000000;}td{ filter:light;}--> var g_numlights=0;flttgt.onclick=keyhandler; //点击鼠标flttgt.onmousemove=mousehandler; //鼠标移动时
复制链接

扫一扫

专栏目录