随鼠标的彩色字符 - 中国WEB开发者网络 (http://www.webasp.net) -- 网页特效 (http://www.webasp.net/javascript/) --- 随鼠标的彩色字符 (http://www.webasp.net/javascript/1/667.htm) |
| -- 发布日期: 2005-06-27 |
| <!-- 网页特效代码由[中国WEB开发者网络:http://www.ChinaWebDev.com]提供! --> <!-- 要实现此效果需要 3 个步骤: --> <!-- 第 1 步: --> <!-- 把下面的代码加到<HEAD></HEAD>区域中: --> <STYLE>.spanstyle { COLOR: #0066ff; FONT-FAMILY: 隶书; FONT-SIZE: 14pt; FONT-WEIGHT: normal; POSITION: absolute; TOP: -50px; VISIBILITY: visible } </STYLE> <!-- 第 2 步: --> <!-- 把<BODY>中的属性代码改为: --> <BODY bgcolor="#fef4d9" onload=javascript:pageonload()> <!-- 第 3 步: --> <!-- 把下面的代码加到<BODY></BODY>区域中: --> <SCRIPT language=javascript> var message="欢 迎 光 临 javascript 精 彩 世 界 !"; var x,y; var step=12; var flag=0; message=message.split(""); var xpos=new Array(); for (i=0;i<=message.length-1;i++) { xpos[i]=-50; } var ypos=new Array(); for (i=0;i<=message.length-1;i++) { ypos[i]=-50; } function handlerMM(e) { x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX+10; y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY; flag=1; } function makesnake() { if (flag==1 && document.all) { 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("span"+(i)+".style"); thisspan.posLeft=xpos[i]; thisspan.posTop=ypos[i]; thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255; } } 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]; thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255; } } } </SCRIPT> <SCRIPT language=javascript> for (i=0;i<=message.length-1;i++) { document.write("<span id='span"+i+"' class='spanstyle'>"); document.write(message[i]); document.write("</span>"); } if (document.layers) { document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = handlerMM; </SCRIPT> <SCRIPT language=javascript> function pageonload() { makesnake(); window.setTimeout("pageonload();", 2); } </SCRIPT> |
| webasp.net |