第9章-JavaScript网页特效.pptVIP

第9章 JavaScript网页特效 JavaScript技术可以实现各种网页特效，本章将综合之前介绍的JavaScript的基本知识，通过综合案例详解介绍JavaScript各种网页特效的核心技巧和实现过程。 跑马灯效果 代码说明： var msg=m1+m2;在文本框中跑的文字字符串； document.isnform.banner.value=msg.substring(position,position+160);该语句提取字符串中从position到position＋160之间的字符串。position＋160中这个160你可以任意设置，只要超过字符串的长度即可，表示提取从position位置到字符串结尾所用的字符。 if(position++==msg.length) {position=0;}如果position的位置到了字符串结尾出，则重新将position设置为0，重新呈现跑马灯效果。 id=setTimeout(banner(),2000/speed);表示隔2000/speed时间后重新调用banner（）函数，这样就呈现文字在文本框中跑的效果。 打字效果 代码说明： function textlist() {max=textlist.arguments.length;for (i=0; imax; i++)this[i]=textlist.arguments[i]; }textlist()函数是一个通用的设置字符串数组的函数。将文本框中要呈现的字符串赋予数组，这样可以任意改变字符串中的内容来呈现打字效果。 var x = 0; pos = 0; x表示字符串数组的下标，pos每个字表示在字符串中的位置。 function textticker() {……}函数为打字效果函数。 document.tickform.tickfield.value = tl[x].substring(0, pos) + _;该语句完成将字符串中的第一位字符到第pos为字符赋予多行文本框，并且在结尾处加上_。 setTimeout(textticker(), 400);设置打印的速度，值越小速度越慢。 if(++x == max) x = 0; l = tl[x].length;} else setTimeout(textticker(), 200);}利用x进行循环打印下一个字符串。++x，x自加后的值如果为字符串数组的最大长度，则重新赋予x等于0，重新打印。如果x自加后的值小于为字符串数组的最大长度，则l = tl[x].length语句提取下一个字符串的长度，进行循环打印文字。 文字大小变化效果 代码说明： var speed = 100;speed为字体变化的速度。 var cycledelay = 2000；cycledelay指字体循环变化的速度，也就是字体从小变大到从大变小之间的循环速度。 var maxsize = 28;为设置的最大字体的象素数。 document.write(span id=wds/spanbr);建立一个span标签，用于放置文字变化的。 function upwords()为位置变大函数。x表示字号大小，如果字号小于最大值，则调用upwords()函数，将字体变大，反之调用downwordas()字体变小。 wds.innerHTML = center+themessage+/center;将themessage的文字放在wds层上。 wds.style.fontSize=x+px设置字体的样式fontSize的属性值为x象素。 升降文字效果 代码说明： var step = 4表示字体上下移动的速度。 document.all[shengjiang].style.top=yp;设置放置文字的层shengjiang的顶端（top）位置。 function anim(yp,yk){……}函数是用于处理升降过程的，yp表示文字移动位置高度的最上端，yk表示文字移动位置的最下端。 if(yp20) step = 4;如果yp小于20，说明文字已经运动到最上端，要进行向下运动，设置step为正值。 if(ypyk) step = -4;如果yp的值大于yk，说明文字已经运动到最下端，要进行向上运动，设置step为负值。 function start(){……}函数用于设置文字运动的初始状态，anim(20,100)设置文字运动的范围。 shengjiang.style.left=11;设置放置文字的shengjiang层距离窗口左边距离为11象素。 改变页面中图片的位置 代码说明： #moveobj {position: relative; top: 0; left: 0;z-index: -1