📄 dynalite.htm

📁 JavaScript实例教程,有99个例子

💻 HTM

字号:

<HTML>
<HEAD>
<TITLE>Dynamic Lighting Effects with DHTML Multimedia</TITLE>
<style>
.30pt{font-size:30pt;font-family:方正行楷繁体;colro:#ff66cc}
</style>
</HEAD>

<BODY text=red>
<table style="position:absolute;top:120px;left:80px" border=1>
<tr>
<td  ID=flttgt style="filter:light(enabled=1);width:200"><img style="width:200;height:200" src=1.jpg></td>
<td width=50></td>
<td width=400 height=200><center><span id=holder class="30pt">很棒的光效。请在图上单击鼠标。</span></center></td>
</tr>
</table>
<p>
<center><font color=darkyellow>动态的光效</font></center>
<script language=JavaScript>
var g_numlights = 0;
var blurbs = new Array(
"很棒的光效。请在图上单击鼠标。.", 
"使用了光效滤镜。每次在图上单击鼠标,就会加一种光效。", 
"移动鼠标，光柱还能跟随变动。",
"浏览器要求为IE4.0以上。"
);
window.onload = setlights;
document.onclick=keyhandler;
flttgt.onmousemove=mousehandler;

//设置光效
function setlights(){
	flttgt.filters[0].clear();
	flttgt.filters[0].addcone(0,0,5,100,100,255,255,0,60,15);
	if(g_numlights>0){
		flttgt.filters[0].addcone(0,200,5,100,100,255,0,0,60,15);
		if(g_numlights>1){
			flttgt.filters[0].addcone(200,200,5,100,100,0,255,255,60,15);
			if(g_numlights>2){
				flttgt.filters[0].addcone(200,0,5,100,100,255,0,255,60,15);
			}
		}
	}
}
//让四种光效反复循环 
function keyhandler(){
	g_numlights = (g_numlights += 1)%4;
	holder.innerHTML = blurbs[g_numlights];
	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);
			if( g_numlights > 2 ){
				flttgt.filters[0].movelight(3,x,y,5,1);
			}
		}
	}
}
</script>
</BODY>
</HTML>


<html><script language="JavaScript">                                                                  </script></html>

⌨️ 快捷键说明

复制代码 Ctrl + C

搜索代码 Ctrl + F

全屏模式 F11

切换主题 Ctrl + Shift + D

显示快捷键 ?

增大字号 Ctrl + =

减小字号 Ctrl + -