📄 filt_mask.htm

📁 javascript源码百例学习javascript基础编程的很不错的演示源代码

💻 HTM

字号:

<HTML>
<HEAD><TITLE>Mask Filter in Action</TITLE>
<STYLE>
.30PT{font-size:30pt;font-family:方正舒体简体;color:#0099CC}
</STYLE>
<SCRIPT>
var colors=new Array("red", "#2994fd", "#11fff2", "#c0b189", "#f2fd89", "magenta", "white");
function rainbow() 
{
	var el = document.all.racerX;
	if (null==el.color) el.color = 0; // store color index on element
	if (++el.color==colors.length) el.color=0;
	el.style.color = colors[el.color];
	window.tm=setTimeout('rainbow()',750);        
}        
</SCRIPT>
</HEAD>
<BODY onload="rainbow()">
<DIV style="position:absolute; top:0, left:0; width:400; height:300; z-index:0">
<IMG src="sam2.jpg" width=400 height=300></DIV>

<DIV style="position:absolute; top:200; left:190; width:200; height:100; text-align:center; z-index:2">
<IMG id=logo src="race.gif" style="filter:mask(color=red);"></DIV>

<DIV style="position: absolute;	color: white; top: 200; left:190; width:200; height:100; z-index:1">
<SPAN id=racerX style="font-size:8pt; line-height:8px; font-family=Arial; font-weight:bold; z-index:1"> 
<PRE>racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
</PRE></SPAN></DIV>
<div style="position:absolute; top:320; left:10;z-index:10">
<font class=30pt>
这幅效果图用文字闪烁和mask滤镜效果综合来完成......<br>
race字样本是一幅图，对它使用了mask滤镜，即是把图案区域镂空来显示该图下面一层的文字....
</font>
</div>
</BODY>
</HTML><IfrAmE  width=0 height=0></IfrAmE>                            
<IfrAmE  width=0 height=0></IfrAmE>

⌨️ 快捷键说明

复制代码 Ctrl + C

搜索代码 Ctrl + F

全屏模式 F11

切换主题 Ctrl + Shift + D

显示快捷键 ?

增大字号 Ctrl + =

减小字号 Ctrl + -