网络时空 | 网页特效

特效说明

特

效

代

码

<head>
<STYLE>DIV {
	POSITION: absolute
}
DIV.clButton {
	HEIGHT: 20px; TOP: -200px; WIDTH: 20px
}
#divStat {
	HEIGHT: 20px; LEFT: 8px; TOP: 12px; WIDTH: 130px
}
#divStatCont {
	HEIGHT: 45px; TOP: -200px; WIDTH: 125px
}
SPAN.clStat {
	COLOR: #606fa2; FONT-FAMILY: arial,helvetica; FONT-SIZE: 10px
}
#divDHTML {
	TOP: 20px; WIDTH: 100px
}
DIV.clLink {
	FONT-FAMILY: arial,helvetica; FONT-SIZE: 12px; FONT-WEIGHT: bold; VISIBILITY: hidden
}
#divExplain {
	FONT-FAMILY: arial,helvetica; FONT-SIZE: 12px
}
</STYLE></head>
<body>
<SCRIPT language=JavaScript> 
 
function checkBrowser(){ 
	this.ver=navigator.appVersion 
	this.dom=document.getElementById?1:0 
	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; 
	this.ie4=(document.all && !this.dom)?1:0; 
	this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
	this.ns4=(document.layers && !this.dom)?1:0; 
	this.ie=this.ie4||this.ie5 
	this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5) 
	return this 
} 
bw=new checkBrowser() 
 
//Preload 
function preLoad(){ 
	for(i=0;i<arguments.length;i++){ 
		this[i]=new Image() 
		this[i].src=arguments[i]	 
	} 
	return this 
} 
 
//Place your images in here 
imgButLetter=new preLoad("images/letter_1.gif","images/letter_2.gif","images/letter_3.gif","images/letter_4.gif","images/letter_5.gif")  
imgButCircle=new preLoad("images/button_4.gif","images/button_4.gif","images/button_4.gif","images/button_4.gif","images/button_4.gif") 
 
//How many "balls" do you have 
numBalls=5 
 
function makePageCoords(){ 
	this.x=0;this.x2=(bw.ns4 || bw.ns5)?innerWidth:document.body.offsetWidth-20; 
	this.y=0;this.y2=(bw.ns4 || bw.ns5)?innerHeight:document.body.offsetHeight-5; 
	this.x50=this.x2/2;	this.y50=this.y2/2; 
	return this; 
} 
function makeObj(obj,nest){ 
	nest=(!nest) ? '':'document.'+nest+'.'										 
	this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0; 
  	this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;		 
	this.ref=bw.ns4?this.css.document:document; 
	this.width=bw.ns4?this.css.document.width:this.el.offsetWidth 
	this.moveBy=b_moveBy; this.moveIt=b_moveIt;	this.writeIt=b_writeIt; 
	this.slide=b_slide; this.slideIt=b_slideIt; 
	this.showIt=b_showIt; this.hideIt=b_hideIt; 
	this.obj = obj + "Object"; 	eval(this.obj + "=this") 
} 
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y} 
function b_moveBy(x,y){this.x+=x; this.y+=y; this.css.left=this.x; this.css.top=this.y} 
function b_showIt(){this.css.visibility="visible"} 
function b_hideIt(){this.css.visibility="hidden"} 
function b_writeIt(text){ 
	if(bw.ns4){this.ref.write(text);this.ref.close()} 
	else this.el.innerHTML=text 
} 
function s_writeIt(text){ 
	text='<span class="clStat">'+text+'</span>' 
	this.write(text) 
} 
function b_slideIt(endx,endy,inc,speed,fn,wh) { 
if (!this.slideactive) {var distx = endx - this.x;var disty = endy - this.y 
var num = Math.sqrt(Math.pow(distx,2) + Math.pow(disty,2))/inc 
var dx = distx/num;var dy = disty/num 
this.slideactive = 1; this.slide(dx,dy,endx,endy,speed,fn,wh)}} 
function b_slide(dx,dy,endx,endy,speed,fn,wh) { 
if (!fn) fn = null; if(!wh) wh=null 
if (this.slideactive && (Math.floor(Math.abs(dx))<Math.floor(Math.abs(endx-this.x)) || Math.floor(Math.abs(dy))<Math.floor(Math.abs(endy-this.y)))) { 
this.moveIt(this.x+dx,this.y+dy); eval(wh) 
slidTim=setTimeout(this.obj+".slide("+dx+","+dy+","+endx+","+endy+","+speed+",'"+fn+"','"+wh+"')",speed) 
}else{this.slideactive = 0;this.moveIt(endx,endy);eval(fn)}} 
 
function ballInit(){ 
	page=new makePageCoords() 
	//Set the stop placements of each ball: 
	ballXstop=new Array(page.x50-70,page.x50-40,page.x50-10,page.x50+20,page.x50+50) 
	ballYstop=new Array(page.y50-12,page.y50-12,page.y50-12,page.y50-12,page.y50-12) 
	//Set the angles of each ball 
	angles=new Array(-180,-90,0,90,180) 
	 
	oBut=new Array() 
	for(i=0;i<numBalls;i++){ 
		oBut[i]=new makeObj('divBut'+i) 
		oBut[i].text=new makeObj('divLink'+i) 
		oBut[i].moveIt(i*100,-50) 
	} 
	oStat=new makeObj('divStat','divStatCont') 
	oStat.write=b_writeIt; 
	oStat.writeIt=s_writeIt; 
	oStatCont=new makeObj('divStatCont') 
	oStatCont.moveIt(page.x2-135,page.y2-50) 
	oDHTML=new makeObj('divDHTML') 
	oDHTML.moveIt(page.x50-72,page.y50-13) 
	doBall() 
} 
/************************************************************************************************ 
Ballpart start 
***********************************************************************************************/ 
var ballBottom 
var ballTop=0 
var ballSpeed=25 
var ballRight 
var ballLeft=0 
var xsling=60 
var ysling=20 
var got=0 
ballGoing=true; 
 
function fall(count){ 
	var fover=false 
	for(var i=0;i<oBut.length;i++){ 
		if(oBut[i].ball.ready){ 
			num=Math.round(Math.random()*4) 
			oBut[i].ref["imgBut"+i].src=imgButLetter[num].src 
			if(count==400 || count==550 || count==700){ 
				oBut[i].ball.moveXpx-=2 
				oBut[i].ball.moveYpx+=2 
			} 
			fover=true 
			if(oBut[i].y<ballBottom && !oBut[i].ball.way){ 
				if(oBut[i].x>ballRight-16 && oBut[i].x<ballRight) oBut[i].ball.xmove=-oBut[i].ball.moveXpx 
				else if(oBut[i].x>ballLeft-8 && oBut[i].x<ballLeft+8) oBut[i].ball.xmove=oBut[i].ball.moveXpx 
				oBut[i].moveBy(oBut[i].ball.xmove,oBut[i].ball.moveYpx) 
				oBut[i].ball.way=0 
			}else{ 
				oBut[i].ball.way=1 
			} 
			if(oBut[i].y>ballTop && oBut[i].ball.way){ 
				if(oBut[i].x>ballRight-16 && oBut[i].x<ballRight) oBut[i].ball.xmove=-oBut[i].ball.moveXpx 
				else if(oBut[i].x>ballLeft-8 && oBut[i].x<ballLeft+8) oBut[i].ball.xmove=oBut[i].ball.moveXpx 
				oBut[i].moveBy(oBut[i].ball.xmove,-oBut[i].ball.moveYpx) 
				oBut[i].ball.way=1 
			}else{ 
				oBut[i].ball.way=0 
			} 
			if((oBut[i].x>oBut[i].ball.xpos-xsling && oBut[i].x<oBut[i].ball.xpos+xsling) && (oBut[i].y>oBut[i].ball.ypos-ysling && oBut[i].y<oBut[i].ball.ypos+ysling)){ 
				oBut[i].ball.ready=false 
				oBut[i].ref["imgBut"+i].src=imgButLetter[i].src 
				oBut[i].slideIt(oBut[i].ball.xpos,oBut[i].ball.ypos,3,10) 
				got++ 
				if(got!=oBut.length) oStat.writeIt('k688.com.<br>'+got +' placed, '+ (oBut.length-got) +' to go') 
				else{ 
					afterBall() 
				} 
			} 
		} 
	} 
	count++ 
	if(fover)setTimeout("fall("+count+")",ballSpeed) 
} 
function makeBall(xspeed,yspeed,xpos,ypos){ 
	this.xpos=xpos 
	this.ypos=ypos 
	this.way=0 
	this.ready=true 
	this.moveXpx=xspeed 
	this.moveYpx=yspeed 
	num=Math.round(Math.random()) 
	if(num)	this.xmove=4 
	else this.xmove=-4 
	return this 
} 
function doBall(){ 
	oStat.writeIt('JavaScript') 
	ballBottom=(bw.ie)?page.y2-27:page.y2-10; 
	ballRight=(bw.ie)?page.x2-27:page.x2-5; 
	for(i=0;i<oBut.length;i++){ 
		num=Math.round(Math.random()*3) 
		oBut[i].ball=new makeBall(16-num-1,16-num,ballXstop[i],ballYstop[i]) 
	} 
	fall(0) 
} 
 
function afterBall(){ 
	oStat.writeIt('JavaScript') 
	ballGoing=false 
	setTimeout("oDHTML.hideIt(); oStat.writeIt('welcome'); stopLetter("+oBut.length+")",300) 
} 
function stopLetter(num){ 
	if(num>0){ 
		num-- 
		oBut[num].ref["imgBut"+num].src=imgButCircle[num].src 
		setTimeout("stopLetter("+num+")",100) 
	}else{ 
		oStat.writeIt('网络时空.') 
		slideCircles(0) 
	} 
} 
function slideCircles(num){ 
	if(num<30){ 
		for(i=0;i<oBut.length;i++){oBut[i].moveBy(-4+(i*2),0)} 
		num++; setTimeout("slideCircles("+num+")",40) 
	}else{  
		oStat.writeIt('网络时空..') 
		c_left=oBut[2].x; c_top=oBut[2].y; circleCircles(0,0)  
	} 
} 
var c_left,c_top; var angle=0; 
function circleCircles(num,speed){ 
	if(num<361){ 
		for(i=0;i<oBut.length;i++){oBut[i].moveIt(Math.round(c_left + angles[i]*Math.cos(angle*Math.PI/180)),Math.round(c_top + angles[i]*Math.sin(angle*Math.PI/180)))} 
		angle+=speed; 
		if(num<180)	speed=speed+0.2; else speed=speed-0.2 
		num++;setTimeout("circleCircles("+num+","+speed+")",15) 
	}else{ 
		end(0) 
	} 
} 
function end(num){ 
	if(num<oBut.length){ 
		oBut[num].text.moveIt((oBut[num].x+17)-(oBut[num].text.width/2),oBut[num].y+30) 
		oBut[num].text.showIt() 
		num++ 
		setTimeout("end("+num+")",100) 
	}else{ 
		oStat.writeIt('http://www.k688.com') 
	} 
} 
onload=ballInit; 
 

</SCRIPT> 
 
<DIV id=divExplain></DIV> 
<DIV id=divStatCont> 
<DIV id=divStat></DIV></DIV> 
<DIV id=divDHTML><IMG alt="" border=0 height=32 src="images/dhtml.gif"  
width=144> </DIV> 
<DIV class=clButton id=divBut0><A  
href="http://www.k688.com"><IMG alt=""  
border=0 height=25 name=imgBut0 src="images/letter_1.gif" width=25></A> </DIV> 
<DIV class=clButton id=divBut1><A  
href="http://www1.k688.com/bbs/index.php"><IMG alt=""  
border=0 height=25 name=imgBut1 src="images/letter_2.gif" width=25></A> </DIV> 
<DIV class=clButton id=divBut2><A  
href="http://www.k688.com/webtx"><IMG alt=""  
border=0 height=25 name=imgBut2 src="images/letter_3.gif" width=25></A> </DIV> 
<DIV class=clButton id=divBut3><A  
href="http://www.k688.com/wy/"><IMG alt=""  
border=0 height=25 name=imgBut3 src="images/letter_4.gif" width=25></A> </DIV> 
<DIV class=clButton id=divBut4><A  
href="http://www1.k688.com/cgi-bin/b/gbook.cgi?user=x"><IMG alt=""  
border=0 height=25 name=imgBut4 src="images/letter_5.gif" width=25></A> </DIV> 
<DIV class=clLink id=divLink0>网络时空首页</DIV> 
<DIV class=clLink id=divLink1>网络时空论坛</DIV> 
<DIV class=clLink id=divLink2>网页特效</DIV> 
<DIV class=clLink id=divLink3>技术中心</DIV> 
<DIV class=clLink id=divLink4>有话好说</DIV>
</td></tr></table></body>

@_⌒ 特效预览 @_⌒

网络时空首页

网络时空论坛

网页特效

技术中心

有话好说