JS filter滤镜，实现追光灯等光照效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<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=//ku.shouce.ren/files/images/201601/56a34a17e7e03.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>

​x
 
<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=//ku.shouce.ren/files/images/201601/56a34a17e7e03.jpg></td>
<td width=50></td>
<td width=400 height=200><center><span id=holder class="30pt">很棒的光效。请在图上单击鼠标。</span></center></td>
</tr>
</table>

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...xxxxxxxxxx
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

JS filter滤镜，实现追光灯等光照效果

分类

网站常用

描述

CSS滤镜大家都知道了，但JS也有滤镜功能，你知道不？其实JS的滤镜更好用，功能也更强大，在加入鼠标的功能，可实现许多的网页光照效果。在本JS特效中，可实现追光灯效果，每次在图片上单击鼠标,就会加一种光效，移动鼠标，光柱还能跟随变...