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

1

答疑时间：周二答疑时间：周二 11 、、 22节及下午节及下午

答疑地点：信息技术系（图答疑地点：信息技术系（图 515515））

李智敏李智敏

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

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

参考代码：<html><html><head><head><title>for<title>for 语句语句 </title></title> </head></head><body><body><script language="javascript"><script language="javascript">for(var i=0;i<256;i++){for(var i=0;i<256;i++){

j = 255-i;j = 255-i; //j//j 值递减值递减document.write("<font document.write("<font

style='color:rgb("+j+","+i+","+i+");'><b>*</b> <font>");style='color:rgb("+j+","+i+","+i+");'><b>*</b> <font>"); //// 调整调整 ** 号颜色号颜色

if(i%16==15){if(i%16==15){document.write("<br>"); document.write("<br>"); //// 每输出每输出 1616 个则换行个则换行

}}}}</script></script></body></body></html></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表格（选做）参考代码：





由远及近的文字

该特效的关键在于利用 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;awindow.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>

21

在 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) { // 如果是 IEfor (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>

鼠标经过变色表格鼠标经过变色表格

34

鼠标经过变色表格鼠标经过变色表格<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>35

鼠标经过变色表格鼠标经过变色表格<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> 36

Documents

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

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