JavaScript程序设计基础教程实训指导-10-1 实训案例名称：实现焦点图片滤镜效果

实训案例名称实现焦点图片滤镜效果本实例使用JavaScript制作一个实例，该实例能够展示焦点图片滤镜效果涉及JavaScript语法如下setTimeout方法setTimeout有两种形式，分别是setTimeoutcode,interval和setTimeoutfunc,interval,args,其中code是一个字符串；func是一个函数；interval表示时间，可以是延迟时间或者交互时间，以毫秒为单位延迟时间是在载入后延迟指定时间后，去执行一次表达式，仅执行一次；交互时间是从载入后，每隔指定的时间就执行一次表达式主要代码如下script type=text/javascriptvar colors=new Array”red“，#2994fd，“#11fff2，“#c0b189“，#f2fd89，“magenta，“white”；function rainbowvarel=document.all.racerX;if null==el.color el.color=0;if++el.color==colors.length el.color=0;el.style.color=colors[el.color];window.tm=setTimeoutrainbow,,750;/script脚本10-1中使用文字闪烁和mask滤镜实现焦点图片滤镜效果，其中race字样是一张图片，对它使用了mask滤镜，即是把图案区域镂空来显示图片下面一层的文字!DOCTYPE htmlhtmlvhead〈tiUeJs实现图片滤镜特效〈/title〉style.30PT{font-s泛e:30pt;font・family:微软雅黑;color:#0099CC}/stylescriptvar colors=new Array”red“，#2994fd“，“#11”#c0b189”，“#f2fd89，“magenta“，wZte“;function rainbowvarel=document.all.racerX;if null==el.color el.color=0;if++el.color==colors.length el.color=0;el.style.color=colors[el.color];,window.tm=setTimeoutrainbow,750;/script/head,Hbody onload=rainbow divstyle=position:absolute;top:0,left:O;width:400;height:300;z-index:0,,IMG src=.net/2015/5/

965.jpg width=400height=300/divdiv style=position:absolute;top:200;left:190;width:200;height:100;text-align:center;z-index:2IMG id=logo src=http:〃www.codefans.net/jscss/demoimg/201307/race.gif style=filter:maskcolor=red;,*/divdiv style=position:absolute;color:white;top:200;left:190;width:200;height:100;z-index:1span id=racerX style=font-size:8pt;line-height:8px;font-family=Arial;font-weight:bold;z-index:1preracerXracerXracerXracerXracerracerXracerXracerXracerXracerracerXracerXracerXracerXracerracerXracerXracerXracerXracerracerXracerXracerXracerXracerracerXracerXracerXracerXracerracerXracerXracerXracerXracerracerXracerXracerXracerXracerracerXracerXracerXracerXracerracerXracerXracerXracerXracerracerXracerXracerXracerXracerracerXracerXracerXracerXracer/pre/span/div/body/html网页显示效果如图

10.1所示图

10.1焦点图片滤镜效果。