2012-10-21 来源:网络
【实例名称】
荧光效果的文本
【实例描述】
本例的主要目的是增添网页的视觉效果,学习制作具有荧光效果的文本。
【实例代码】
<script language="JavaScript"> function SymError() { return true; } window.onerror = SymError; var from = 1; var to = 4; var delay = 55; //闪的速度 var glowColor = "#FFCC00";//颜色 var i = to; var j = 0; textPulseDown(); //向上跳动的方法 function textPulseUp() { if (!document.all) return if (i < to) { theText.style.filter = "Glow(Color=" + glowColor + ", Strength=" + i + ")"; i++; theTimeout = setTimeout('textPulseUp()',delay); return 0; } if (i = to) { theTimeout = setTimeout('textPulseDown()',delay); return 0; } } //向下跳动的方法 function textPulseDown() { if (!document.all) return if (i > from) { theText.style.filter = "Glow(Color=" + glowColor + ", Strength=" + i + ")";//设置文本的滤镜效果 i--; theTimeout = setTimeout('textPulseDown()',delay); //设置定时器 return 0; } if (i = from) { theTimeout = setTimeout('textPulseUp()',delay); return 0; } } </script>
需要在body中添加一个ID为“theText”的文本,可参考随书光盘。
【运行效果】
【难点剖析】
本例的重点是JavaSeript对象的“filter”滤镜样式,其对应了CSS中的“Glow”滤镜。对一个对象使用“Glow”属性后,这个对象的边缘就会产生类似发光效果。
【源码下载】