Js实现天女散花_突显四处飞散的广告文字

2024-09-05 12:21:37

字体：大中小

来源：转载

供稿：网友

JS实现天女散花文字特效，四处飞散的广告文字效果，打开网页后看到文字四处飘散，逐渐消失，其实网页上不是太常见，不知有没有需要此效果的，在此分享给大家。

<HTML><HEAD><TITLE>突显四处飞散的广告文字</TITLE><STYLE type=text/css>BODY {	MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋体"}A {	FONT-WEIGHT: 400; FONT-SIZE: 9pt; COLOR: black; TEXT-DECORATION: none}A:hover {	FONT-WEIGHT: 400; FONT-SIZE: 9pt; COLOR: red; TEXT-DECORATION: underline}A:active {	FONT: 9pt "宋体"; CURSOR: hand; COLOR: #ff0033}.p10 {	FONT: 12pt "宋体"; CURSOR: hand}.STYLE2 {	font-family: "华文彩云";	color: #0000FF;	font-size: 40pt;}.STYLE3 {	font-family: "隶书";	font-weight: bold;	font-size: 35px;	color: #FF00FF;}.STYLE4 {font-size: 20pt}.STYLE5 {font-size: 20pt; color: #FF0000; }.STYLE6 {font-size: 20pt; color: #FFFF00; }.STYLE7 {font-size: 20pt; color: #0000FF; }</STYLE><META http-equiv=Content-Type content="text/html; charset=gb2312"></HEAD><BODY bgColor=#fef4d9><CENTER><TABLE borderColor=#00FF00 border=5 borderlight="green">  <TBODY>  <TR>    <TD align=left>      <SCRIPT language=JavaScript1.2>var intervals=2000var sparksOn     = true;var speed        = 100;var power        = 3;var documentWidth=documentHeight=randomx=randomy=leftcorner=topcorner=0var ns=(document.layers);var ie=(document.all);var sparksAflyin = false;var allDivs      = new Array(10);var totalSparks  = 0;function initAll(){if(!ns && !ie){sparksOn = false;return;}setInterval("firework()",intervals)if (ns)	document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);	for(dNum=0; dNum<7; ++dNum){		if(ie)			allDivs[dNum]=eval('document.all.sDiv'+dNum+'.style');		else			allDivs[dNum]=eval('document.layers["sDiv'+dNum+'"]');	}}function firework(){if (ie){documentWidth=document.body.clientWidthdocumentHeight=document.body.clientHeightleftcorner=document.body.scrollLefttopcorner=document.body.scrollTop}else if (ns){documentWidth=window.innerWidthdocumentHeight=window.innerHeightleftcorner=pageXOffsettopcorner=pageYOffset}randomx=leftcorner+Math.floor(Math.random()*documentWidth)randomy=topcorner+Math.floor(Math.random()*documentHeight)	if(sparksOn){		if(!sparksAflyin){			sparksAflyin=true;			totalSparks=0;			for(var spark=0;spark<=6;spark++){				dx=Math.round(Math.random()*50);				dy=Math.round(Math.random()*50);				moveTo(spark,randomx,randomy,dx,dy);			}		}	}}function moveTo(i,tempx,tempy,dx,dy){	if(ie){		if(tempy+80>(document.body.offsetHeight+document.body.scrollTop))			tempy=document.body.offsetHeight+document.body.scrollTop-80;		if(tempx+80>(document.body.offsetWidth+document.body.scrollLeft))			tempx=document.body.offsetWidth+document.body.scrollLeft-80;	}	if(tempx>-50&&tempy>-50){		tempx+=dx;tempy+=dy;			allDivs[i].left=tempx;		allDivs[i].top=tempy;		dx-=power;dy-=power;		setTimeout("moveTo("+i+","+tempx+","+tempy+","+dx+","+dy+")",speed)	}	else		++totalSparks	if(totalSparks==7){		sparksAflyin=false;		totalSparks=0;	}}window.onload=initAll</SCRIPT><STYLE>#sDiv0 {	FONT-SIZE: 15px; WIDTH: 1px; COLOR: green; FONT-FAMILY: arial black; POSITION: absolute; HEIGHT: 1px}#sDiv1 {	FONT-SIZE: 15px; WIDTH: 1px; COLOR: red; FONT-FAMILY: arial black; POSITION: absolute; HEIGHT: 1px}#sDiv2 {	FONT-SIZE: 15px; WIDTH: 1px; COLOR: blue; FONT-FAMILY: arial black; POSITION: absolute; HEIGHT: 1px}#sDiv3 {	FONT-SIZE: 15px; WIDTH: 1px; COLOR: orange; FONT-FAMILY: arial black; POSITION: absolute; HEIGHT: 1px}#sDiv4 {	FONT-SIZE: 15px; WIDTH: 1px; COLOR: red; FONT-FAMILY: arial black; POSITION: absolute; HEIGHT: 1px}#sDiv5 {	FONT-SIZE: 15px; WIDTH: 1px; COLOR: lightgreen; FONT-FAMILY: arial black; POSITION: absolute; HEIGHT: 1px}#sDiv6 {	FONT-SIZE: 15px; WIDTH: 1px; COLOR: pink; FONT-FAMILY: arial black; POSITION: absolute; HEIGHT: 1px}</STYLE>      <DIV class="STYLE4" id=sDiv0>欢</DIV>      <DIV class="STYLE4" id=sDiv6>迎</DIV>      <DIV class="STYLE4" id=sDiv1>进</DIV>      <DIV class="STYLE4" id=sDiv2>入</DIV>      <DIV class="STYLE4" id=sDiv3>小</DIV>      <DIV class="STYLE4" id=sDiv4>站</DIV>      <DIV class="STYLE5" id=sDiv5>★</DIV><DIV class="STYLE6" id=sDiv6>★</DIV><DIV class="STYLE7" id=sDiv7>★</DIV></TD></TR></TBODY></TABLE></CENTER></BODY></HTML>

上一篇：上下滚动的文字(Javascript)

下一篇：闪烁消隐的文字特效