答疑时间：周二 1 、 2 节及下午答疑地点：信息技术系（图 515 ）李智敏

JavaScript补充 答疑时间：周二1、2节及下午答疑地点：信息技术系（图515）李智敏

循环输出16*16颜色渐变的“*”号

循环输出16*16颜色渐变的“*”号 参考代码： <html> <head> <title>for语句</title> </head> <body> <script language="javascript"> for(var i=0;i<256;i++){ j = 255-i; //j值递减 document.write("<font style='color:rgb("+j+","+i+","+i+");'><b>*</b> <font>"); //调整*号颜色 if(i%16==15){ document.write("<br>"); //每输出16个则换行 } } </script> </body> </html>

动态修改文字颜色 设置3个文本框，分别让用户输入颜色的红绿蓝3个分量，然后通过JavaScript调用ChangeColor()函数。

动态修改文字颜色 参考代码： <html><head><title>文字颜色</title> <style type="text/css"> </style>

动态修改文字颜色 <script language="javascript"> function ChangeColor(){ var red = document.colorform.red.value; //获得各个输入框的值 var green = document.colorform.green.value; var blue = document.colorform.blue.value; var obj = document.getElementById("text"); obj.style.color="#"+red+green+blue; } //修改文字颜色 </script> </head> <body><form name="colorform"> R:<input name="red" maxlength="2"> G:<input name="green" maxlength="2"> B:<input name="blue" maxlength="2"> <input type="button" onClick="ChangeColor()" value="换颜色" class="btn"> </form> <br> <span id="text">CSS层样式</span></body></html>

输入时高亮显示的Excel表格（选做）

输入时高亮显示的Excel表格（选做） 参考代码：

输入时高亮显示的Excel表格（选做）

由远及近的文字 该特效的关键在于利用for循环，反复地往网页上输出文字“CSS”，但同时不断地变化文字的位置、大小和颜色。在执行完JavaScript代码后，还用HTML的方式在页面上输出一个新的<div>块文字，它的位置就是JavaScript输出的最出一个位置，而颜色进行了修改。

由远及近的文字 参考代码： <html> <head><title>由远到近的文字</title> <style type="text/css"> </style> </head> <body><script language="javascript"> for(var i=0;i<128;i++){//不断的变化位置、文字大小、颜色的CSS属性 document.write('<div style="left:'+(200-i)+'px;top:'+(10+i/2)+'px; font-size:'+(i*2)+'px; color:rgb('+(256-i)+','+(256-i*2)+','+(i*2)+');">CSS</div>');} </script>  <div style="left:72px;top:74px; font-size:256px; color:#FFFF44;">CSS</div> </body> </html>

跑马灯特效 本案例是通过改变<input>来实现的。页面背景设置为黑色，文本框的背景设置为透明，边框进行隐藏。

跑马灯特效 参考代码： <html><head><title>跑马灯</title> <style type="text/css"> </style> <script language="javascript"> var msg="这是跑马灯，我跑啊跑啊跑"; //跑马灯的文字 var interval = 400; //跑动的速度 var seq=0;

跑马灯特效 function LenScroll() { document.nextForm.lenText.value = msg.substring(seq, msg.length) + " " + msg; seq++; if ( seq > msg.length ) seq = 0;a window.setTimeout("LenScroll();", interval);} </script> </head> <body onLoad="LenScroll()"> <center> <form name="nextForm"> <input type="text" name="lenText"> </form></center> </body> </html>

CSS实现PPT幻灯片效果 语法格式：filter:RevealTrans(Transition=变换方式, duration=秒数)。Transition取值0-23，共24种方式。本案例采用的随机切换方式，只要不断刷新，就能看到各种切换效果。

CSS实现PPT幻灯片效果 参考代码： <html> <head><title>CSS实现PPT幻灯片</title> <style type="text/css"> </style> </head> <body> <script language="javascript"> function img2(x){this.length=x;} jname=new img2(5); jname[0]="photo/06.jpg"; jname[1]="photo/07.jpg"; jname[2]="photo/08.jpg";

CSS实现PPT幻灯片效果 jname[3]="photo/09.jpg"; jname[4]="photo/10.jpg"; var j=0; function play2(){ if (j==4){ j=0; } else{ j++; } tp2.filters[0].apply(); tp2.src=jname[j]; tp2.filters[0].play(); mytimeout=setTimeout("play2()",4000); } </script> <p><img src="photo/06.jpg" border="0" name="tp2"></p> <script language="javascript">play2();</script> </body>

光源函数 在JavaScript中常配合Light滤镜使用的函数有如下几种： AddAmbien：加入包围的光源 AddCone：加入锥形光源 AddPoint：加入点光源 Changcolor：改变光的颜色 Changstrength：改变光源的强度 Clear：清除所有的光源 MoveLight：移动光源

灯光效果 本例采用addcone函数为已经设置了Light镜的图片添加了一个锥形光源，该函数的表达式： Addcone(iX1,iY1,iZ1,iX2,iY2,iRed,iGreen,iBlue,iStrength,iSpread);其中iX1、iY1分别为光源的x坐标和y坐标，这个坐标是以图片左上角为原点，以水平向右为x正方向，竖直向下为y轴正方向，可以为负数。iZ1为光源的高低，只能为正。iX2、iY2为光源的方向，光源为三维坐标（iX1,iY1,iZ1）射向(iX2,iY2,0)。,iRed、iGreen和iBlue为光颜色的RGB值，范围0-255。,iStrength表示光的强度，0-100，iSpread为光照射的角度，是一个立体角的概念，0-90°，例如设置为30°，光张开的全角为30°×2=60°。

灯光效果 参考代码： <html><head><title>灯光效果</title> <style type="text/css">  </style> </head> <body> <script language="javascript"> // 调用设置光源函数 window.onload=setlights1; // 调用Light滤镜方法 function setlights1(){ var iX2=lightsy.offsetWidth; //获得图片宽度 var iY2=lightsy.offsetHeight; //获得图片高度 lightsy.filters[0].addCone(0,0,5,iX2,iY2,60,130,255,50,20); lightsy.filters[0].addCone(0,iY2,5,iX2,0,60,130,255,50,20); //lightsy.filters[0].addcone(430,120,10,100,100,255,255,0,70,55);} </script> <img src="fish.jpg"> <img id=“lightsy” src=“fish.jpg” class=“light”> </body> </html>

舞台灯光 原始图片灯光效果本例主要利用了JzvaScript中的onclick以及onmousemove两个函数，当鼠标单击时触发函数keyhandler，增加新的灯光。当鼠标移动时调用函数mousehandler，利用movelight函数移动灯光。 Movelight(iLightNumber,iX,iY,iZ,fAbsolute); 其中iLightNumber表示灯光的代号，iX、iY和iZ为灯光焦点移动到的位置，若是锥形光，只有iX和iY起作用，分别对应addcone()函数中iX2和iY2移动到的位置。当光源为点光源时iZ才起作用。fAbsolute表示绝对移动还是相对移动，通常跟随鼠标的效果都需要使用绝对移动，因此将该值设置为1。

舞台灯光 参考代码： <html> <head> <title>舞台灯光</title><style type="text/css"> </style> </head> <body> <table> <tr><td id="flttgt"><img src="mm.jpg"></td></tr> </table> <script language="javascript"> var g_numlights=0; flttgt.onclick=keyhandler; //点击鼠标 flttgt.onmousemove=mousehandler; //鼠标移动时 function setlights(){ flttgt.filters[0].clear(); //先清空所有光源 flttgt.filters[0].addcone(-10,- 10,5,275,370,0,0,150,60,10); //添加蓝色光源

舞台灯光 if (g_numlights>0){ flttgt.filters[0].addcone (285,-10,5,0,370,150,0,0,60,10); //添加红色光源 if (g_numlights>1) flttgt.filters[0].addcone (138,380,5,138,0,0,150,0,60,15);} }//添加绿色光 function keyhandler(){g_numlights= (g_numlights+=1)%3; 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); }}//移动绿光 setlights();</script></body>

探照灯 选择一幅图片，将它加入到页面的<div>块中，然后用函数addpoint()为其添加点光源。利用movelight()函数移动该光源，从而得到页面的最终效果。设置包含图片的<div>时，必须指定<div>块的宽度，如果这两个参数都不指定，灯光会认为那是一个空的块，从而不起任何作用。 addPoint(iX,iY,iZ,iRed,iGreen,iBlur,iStrength)

探照灯 参考代码： <html> <head> <title>探照灯</title> <style type="text/css"> </style> </head> <body> <script language="javascript"> function MouseMove(){ //移动点光源 point.filters[0].MoveLight(0,window.event.x-10,window.event.y-20,70,1); } </script> <div onmousemove="javascript:MouseMove()" id="point"> <img src="building.jpg"></div> <script language="javascript"> //添加点光源 point.filters.light(0).addPoint(0,0,70,240,240,0,100); //point.filters.light(0).addPoint(0,0,100,0,150,255,100); </script> </body>

鼠标文字跟随

鼠标文字跟随 参考代码： <html> <head> <title>文字跟随鼠标</title> <style type="text/css"> </style> <script language="javascript"> var x,y; //鼠标当前在页面上的位置 var step=10; //字符显示间距，为了好看，step=0则字符显示没有间距 var flag=0; var message="Cascading Style Sheet"; //跟随鼠标要显示的字符串

鼠标文字跟随 message=message.split(""); //将字符串分割为字符数组 var xpos=new Array() //存储每个字符的x位置的数组 for (i=0;i<message.length;i++) { xpos[i]=-50; } var ypos=new Array() //存储每个字符的y位置的数组 for (i=0;i<message.length;i++) { ypos[i]=-50;} for (i=0;i<message.length;i++) { //动态生成显示每个字符span标记, //使用span来标记字符，是为了方便使用CSS，并可以自由的绝对定位 document.write("<span id='span"+i+"' class='spanstyle'>"); document.write(message[i]); document.write("</span>");} if (document.layers){document.captureEvents(Event.MOUSEMOVE);} function handlerMM(e){ //从事件得到鼠标光标在页面上的位置 x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX; y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY; flag=1; }

鼠标文字跟随 function makesnake() { //重定位每个字符的位置 if (flag==1 && document.all) { //如果是IE for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+step; //从尾向头确定字符的位置，每个字符为前一个字符“历史”水平坐标+step间隔， //这样随着光标移动事件，就能得到一个动态的波浪状的显示效果 ypos[i]=ypos[i-1]; } //垂直坐标为前一字符的历史“垂直”坐标，后一个字符跟踪前一个字符运动 xpos[0]=x+step //第一个字符的坐标位置紧跟鼠标光标 ypos[0]=y //上面的算法将保证，如果鼠标光标移动到新位置，则连续调用makenake将会使这些字符一个接一个的移动的新位置 // 该算法显示字符串就有点象人类的游行队伍一样， for (i=0; i<=message.length-1; i++) { var thisspan = eval("span"+(i)+".style"); //妙用eval根据字符串得到该字符串表示的对象

鼠标文字跟随 thisspan.posLeft=xpos[i]; thisspan.posTop=ypos[i]; }} else if (flag==1 && document.layers) { for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+step; ypos[i]=ypos[i-1]; } xpos[0]=x+step; ypos[0]=y; for (i=0; i<=message.length-1; i++) { var thisspan = eval("document.span"+i); thisspan.left=xpos[i]; thisspan.top=ypos[i]; } } var timer=setTimeout("makesnake()",10) } //设置10毫秒的定时器来连续调用makesnake(),时刻刷新显示字符串的位置。 document.onmousemove = handlerMM; </script> </head><body onLoad="makesnake();"></body> </html>

鼠标经过变色表格

鼠标经过变色表格 <html><head><title>Member List</title> <style> <!— .datalist{border:1px solid #0058a3; /* 表格边框 */ font-family:Arial; border-collapse:collapse; /* 边框重叠 */ background-color:#eaf5ff; /* 表格背景色 */ font-size:14px; } .datalist caption{padding-bottom:5px; font:bold 1.4em; text-align:left; } .datalist th{ border:1px solid #0058a3; /* 行名称边框 */ background-color:#4bacff; /* 行名称背景色 */ color:#FFFFFF; /* 行名称颜色 */ font-weight:bold; padding-top:4px; padding-bottom:4px; padding-left:12px; padding-right:12px; text-align:center; } .datalist td{ border:1px solid #0058a3; /* 单元格边框 */ text-align:left; padding-top:4px; padding-bottom:4px; padding-left:10px; padding-right:10px; } .datalist tr:hover, .datalist tr.altrow{ background-color:#c4e4ff; } /* 动态变色 */ --></style> </head>

鼠标经过变色表格 <body> <table class="datalist" > <table> …… </table> <script language="javascript"> var rows = document.getElementsByTagName('tr'); for (var i=0;i<rows.length;i++){ rows[i].onmouseover = function(){ //鼠标在行上面的时候 this.className += 'altrow'; } rows[i].onmouseout = function(){ //鼠标离开时 this.className = this.className.replace('altrow',''); } } </script> </body> </html>

答疑时间：周二 1 、 2 节及下午 答疑地点：信息技术系（图 515 ） 李智敏