2008-01-30, 01:03 PM | #1 |
注册日期: 2007-07-17
住址: 火星
帖子: 5,570
现金:9873金币
资产:21334金币
|
网页的一些效果——源码
本人向大家提供一下网页效果的源码希望大家用的到! 1.跟随鼠标的光环: <!--将以下代码加入HTML的<Body></Body>之间--> <LAYER NAME="a0" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ffffff" CLIP="0,0,1,1"> </LAYER> <LAYER NAME="a1" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#fff000" CLIP="0,0,1,1"> </LAYER> <LAYER NAME="a2" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ffa000" CLIP="0,0,1,1"> </LAYER> <LAYER NAME="a3" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ff00ff" CLIP="0,0,1,1"> </LAYER> <LAYER NAME="a4" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#00ff00" CLIP="0,0,1,1"> </LAYER> <LAYER NAME="a5" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#FF00FF" CLIP="0,0,1,1"> </LAYER> <LAYER NAME="a6" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#FF0000" CLIP="0,0,1,1"> </LAYER> <LAYER NAME="a7" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ffffff" CLIP="0,0,2,2"> </LAYER> <LAYER NAME="a8" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#fff000" CLIP="0,0,2,2"> </LAYER> <LAYER NAME="a9" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ffa000" CLIP="0,0,2,2"> </LAYER> <LAYER NAME="a10" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ff00ff" CLIP="0,0,2,2"> </LAYER> <LAYER NAME="a11" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#00ff00" CLIP="0,0,2,2"> </LAYER> <LAYER NAME="a12" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#0000ff" CLIP="0,0,2,2"> </LAYER> <LAYER NAME="a13" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#FF0000" CLIP="0,0,2,2"> </LAYER> <script language="JavaScript"> if (document.all){ with (document){ write('<div id="starsDiv" style="position:absolute;top:0px;left:0px">') write('<div style="position:relative;width:1px;height:1px;background:#ffffff;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#00ff00;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#fff000;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#ffa000;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#ff00ff;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#00ff00;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#0000ff;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:3px;height:3px;background:#FF0000;font-size:3px;visibility:visible"></div>') write('</div>') } } if (document.layers) {window.captureEvents(Event.MOUSEMOVE);} var yBase = 200; var xBase = 200; var step = 1; var currStep = 0; var Xpos = 1; var Ypos = 1; if (document.all) { function MoveHandler(){ Xpos = document.body.scrollLeft+event.x; Ypos = document.body.scrollTop+event.y; } document.onmousemove = MoveHandler; } else if (document.layers) { function xMoveHandler(evnt){ Xpos = evnt.pageX; Ypos = evnt.pageY; } window.onMouseMove = xMoveHandler; } function animateLogo() { if (document.all) { yBase = window.document.body.offsetHeight/6; xBase = window.document.body.offsetWidth/6; } else if (document.layers) { yBase = window.innerHeight/8; xBase = window.innerWidth/8; } if (document.all) { for ( i = 0 ; i < starsDiv.all.length ; i++ ) { starsDiv.all.style.top = Ypos + yBase*Math.sin((currStep + i*4)/12)*Math.cos(400+currStep/200); starsDiv.all.style.left = Xpos + xBase*Math.sin((currStep + i*3)/10)*Math.sin(currStep/200); } } else if (document.layers) { for ( j = 0 ; j < 14 ; j++ ) //number of NS layers! { var templayer="a"+j document.layers[templayer].top = Ypos + yBase*Math.sin((currStep + j*4)/12)*Math.cos(400+currStep/200); document.layers[templayer].left = Xpos + xBase*Math.sin((currStep + j*3)/10)*Math.sin(currStep/200); } } currStep+= step; setTimeout("animateLogo()", 10); } animateLogo(); </script> 2.闪电效果的背景: <!--将以下代码加入HTML的<Body></Body>之间--> <script LANGUAGE="JavaScript"> function blinkOn(){ theWin.document.bgColor = "000000" nTimes++ JSCTimeOutID = window.setTimeout("blinkOff()",50); } function blinkOff(){ theWin.document.bgColor = "FFFFFF" if (nTimes < 3) JSCTimeOutID = window.setTimeout("blinkOn()",50); else theWin.history.go(0) } function blinkit(aWin) { nTimes = 0 theWin = aWin JSCTimeOutID = window.setTimeout("blinkOn()",50); } </script> <form> <div align="center"><center><p><input TYPE="BUTTON" VALUE="让暴风雨来的更猛烈些吧!" onClick="blinkit(self)"> </p> </center></div> </form> 3.黑客帝国的背景效果: <!--将以下代码加入HTML的<Body></Body>之间--> <script language="JavaScript"> <!-- if (document.all){ Cols=6; Cl=24;//Space's are included so real length is 48! Cs=10; Ts=10; Tc='#008800'; Tc1='#00ff00'; MnS=20; MxS=30; I=Cs; Sp=new Array();S=new Array();Y=new Array(); C=new Array();M=new Array();B=new Array(); RC=new Array();E=new Array();Tcc=new Array(0,1); document.write("<div id='Container' style='position:absolute;top:0;left:-"+Cs+"'>"); document.write("<div style='position:relative'>"); for(i=0; i < Cols; i++){ S=I+=Cs; document.write("<div id='A' style='position:absolute;top:0;font-family:Arial;font-size:" +Ts+"px;left:"+S+";width:"+Ts+"px;height:0px;color:"+Tc+";visibility:hidden'></div>"); } document.write("</div></div>"); for(j=0; j < Cols; j++){ RC[j]=1+Math.round(Math.random()*Cl); Y[j]=0; Sp[j]=Math.round(MnS+Math.random()*MxS); for(i=0; i < RC[j]; i++){ B=''; C=Math.round(Math.random()*1)+' '; M[j]=B[0]+=C; } } function Cycle(){ Container.style.top=window.document.body.scrollTop; for (i=0; i < Cols; i++){ var r = Math.floor(Math.random()*Tcc.length); E = '<font color='+Tc1+'>'+Tcc[r]+'</font>'; Y+=Sp; if (Y > window.document.body.clientHeight){ for(i2=0; i2 < Cols; i2++){ RC[i2]=1+Math.round(Math.random()*Cl); for(i3=0; i3 < RC[i2]; i3++){ B[i3]=''; C[i3]=Math.round(Math.random()*1)+' '; C[Math.floor(Math.random()*i2)]=' '+' '; M=B[0]+=C[i3]; Y=-Ts*M.length/1.5; A.style.visibility='visible'; } Sp=Math.round(MnS+Math.random()*MxS); } } A.style.top=Y; A.innerHTML=M+' '+E+' '; } setTimeout('Cycle()',20) } Cycle(); } // --> </script> 4.璀璨的页面效果: <!--将以下代码加入HTML的<Body></Body>之间--> <script language="JavaScript"> <!-- Space Variation by kurt.jojoo@jojoo.net if (document.all){ xL=5; xH=0; xW=0; xR=0; xE=0; xMY=0; xMX=0; xWd=0; xHd=0; xF=new Array(); xY=new Array(); xX=new Array(); xS=new Array(); xA=new Array(); xB=new Array(); ini=new Array(); cl=new Array('#fff000','#0000FF','#ff0000','#00ff00','#ff00ff','#ffa500') document.write('<div id="xouter" style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=0; i < xL; i++){ document.write('<div id="xie" style="position:absolute;top:0;left:0;width:10px;height:10px;' +'font-family:Courier New;font-size:50px;color:#ffffff">.</div>'); } document.write('</div></div>'); //Initial Placement! function Set(){ for (i=0; i < xL; i++){ xH=window.document.body.offsetHeight; xW=window.document.body.offsetWidth; xA=Math.round(Math.random()*xH); xB=Math.round(Math.random()*xW); xS=Math.random()*0.07+0.05; xR=Math.round(Math.random()*3); xE=Math.round(Math.random()*2500+50) if (xR == 3) xB=-xE; if (xR == 2) xB=xW+xE; if (xR == 1) xA=-xE; if (xR == 0) xA=xH; xF=xW/14; } } Set(); function Assign(){ xouter.style.top=document.body.scrollTop; for (i=0; i < xL; i++){ xF-=xS*25; if (xF < 4) xF=3; xie.style.top =xY; xie.style.left=xX; xie.style.fontSize=xF; xie.style.filter='glow(color='+ini+', strength='+xF/3+')'; } } function fly(){ var N=Math.floor(Math.random()*cl.length) xMY=window.document.body.clientHeight/2; xMX=window.document.body.clientWidth/2; xWd=Math.round(Math.random()*40+5); xHd=Math.round(Math.random()*30+5); for (i=0; i < xL; i++) { xY=xA+=(xMY-xA)*(xS); xX=xB+=(xMX-xB)*(xS); if ((xX > xMX-xWd) && (xX < xMX+xWd) && (xY > xMY-xHd) && (xY < xMY+xHd)){ xH=window.document.body.offsetHeight; xW=window.document.body.offsetWidth; xA=Math.round(Math.random()*xH); xB=Math.round(Math.random()*xW); xS=Math.random()*0.05+0.05; xR=Math.round(Math.random()*3); xE=Math.round(Math.random()*50+50) if (xR == 3) xB=-xE; if (xR == 2) xB=xW+xE; if (xR == 1) xA=-xE; if (xR == 0) xA=xH+xE; } if ((xX < 0) || (xX > xW) || (xY < 0) || (xY > xH)) { xF=xW/14; ini=cl[N]; } } Assign(); setTimeout('fly()',10); } fly(); } // --> </script> 5.纪念日倒计时: <!--将以下代码加入HTML的<Body></Body>之间--> <SCRIPT language=JavaScript1.2> function setcountdown(theyear,themonth,theday){ yr=theyear;mo=themonth;da=theday } setcountdown(2008,7,12) var occasion="2008北京奥运会" var message_on_occasion="盼望已久的时刻终于来到了!" var countdownwidth='480px' var countdownheight='20px' var countdownbgcolor='tan' var opentags='<font face="宋体"><small>' var closetags='</small></font>' var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec") var crosscount='' function start_countdown(){ if (document.layers) document.countdownnsmain.visibility="show" else if (document.all||document.getElementById) crosscount=document.getElementById&&!document.all?document.getElementById("countdownie") : countdownie countdown() } if (document.all||document.getElementById) document.write('<span id="countdownie" style="width:'+countdownwidth+'; background-color:'+countdownbgcolor+'"></span>') window.onload=start_countdown function countdown(){ var today=new Date() var todayy=today.getYear() if (todayy < 1000) todayy+=1900 var todaym=today.getMonth() var todayd=today.getDate() var todayh=today.getHours() var todaymin=today.getMinutes() var todaysec=today.getSeconds() var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec futurestring=montharray[mo-1]+" "+da+", "+yr dd=Date.parse(futurestring)-Date.parse(todaystring) dday=Math.floor(dd/(60*60*1000*24)*1) dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1) dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1) dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1) if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1&&todayd==da){ if (document.layers){ document.countdownnsmain.document.countdownnssub.document.write(opentags+message_on_occasion+closetags) document.countdownnsmain.document.countdownnssub.document.close() } else if (document.all||document.getElementById) crosscount.innerHTML=opentags+message_on_occasion+closetags return } else if (dday<=-1){ if (document.layers){ document.countdownnsmain.document.countdownnssub.document.write(opentags+"时间已经过了!"+closetags) document.countdownnsmain.document.countdownnssub.document.close() } else if (document.all||document.getElementById) crosscount.innerHTML=opentags+"Occasion already passed! "+closetags return } else{ if (document.layers){ document.countdownnsmain.document.countdownnssub.document.write(opentags+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left until "+occasion+closetags) document.countdownnsmain.document.countdownnssub.document.close() } else if (document.all||document.getElementById) crosscount.innerHTML=opentags+"还有 "+dday+ " 天, "+dhour+" 小时, "+dmin+" 分, "+dsec+" 秒 就是 "+occasion+closetags } setTimeout("countdown()",1000) } </SCRIPT> <ILAYER id=countdownnsmain visibility="hide" bgColor="&{countdownbgcolor};" height="&{countdownheight};" width="&{countdownwidth};"><LAYER id=countdownnssub height="&{countdownheight};" width="&{countdownwidth};" top="0" left="0"></LAYER></ILAYER> |
|