新網頁1

HTML教學

1 . 地震視窗

請複製以下原始碼到 <HEAD></HEAD> 之中

大家可以將以下橙色改成自己喜歡的!
var time=0,max_time=5;

2 . 泡泡游標

請複製以下原始碼到 <HEAD></HEAD> 之中

<SCRIPT Language="JavaScript">
Image0=new Image();
Image0.src="black.gif";
Amount=20;

Ymouse=-50;
Xmouse=-50;
Ypos=new Array();
Xpos=new Array();
Speed=new Array();
rate=new Array();
grow=new Array();
Step=new Array();
Cstep=new Array();
nsSize=new Array();
ns=(document.layers)?1:0;
(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
Ymouse=(document.layers)?evnt.pageY-20:event.y-20;
Xmouse=(document.layers)?evnt.pageX:event.x;
}
(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
for (i=0; i < Amount; i++){ 
Ypos[i]=Ymouse;
Xpos[i]=Xmouse;
Speed[i]=Math.random()*4+1;
Cstep[i]=0;
Step[i]=Math.random()*0.1+0.05;
grow[i]=8;
nsSize[i]=Math.random()*15+5;
rate[i]=Math.random()*0.5+0.1;
}
if (ns){
for (i = 0; i < Amount; i++){
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+Image0.src+" name='N' width="+nsSize[i]+" height="+nsSize[i]+"></LAYER>");
}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
document.write('<img id="si" src="'+Image0.src+'" style="position:absolute;top:0px;left:0px;filter:alpha(opacity=90)">');
}
document.write('</div></div>');
}
function MouseBubbles(){
var hscrll=(document.layers)?window.pageYOffset:document.body.scrollTop;
var wscrll=(document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed[i]*Math.sin(270*Math.PI/180);
sx = Speed[i]*Math.cos(Cstep[i]*4);
Ypos[i]+=sy;
Xpos[i]+=sx; 
if (Ypos[i] < -40){
Ypos[i]=Ymouse;
Xpos[i]=Xmouse;
Speed[i]=Math.random()*6+4;
grow[i]=8;
nsSize[i]=Math.random()*15+5;
}
if (ns){
document.layers['sn'+i].left=Xpos[i]+wscrll;
document.layers['sn'+i].top=Ypos[i]+hscrll;
}
else{
si[i].style.pixelLeft=Xpos[i]+wscrll;
si[i].style.pixelTop=Ypos[i]+hscrll;
si[i].style.width=grow[i];
si[i].style.height=grow[i]; 
}
grow[i]+=rate[i]; 
Cstep[i]+=Step[i];
if (grow[i] > 24) grow[i]=25;
}
setTimeout('MouseBubbles()',10);
}
MouseBubbles();
</SCRIPT>

大家可以將以下紅色改成自己喜歡的!
Image0.src="black.gif";
Amount=20;

3 .邊緣目錄

請複製以下原始碼到 <HEAD></HEAD> 之中

<SCRIPT LANGUAGE="JavaScript">
var links=new Array();
links[1]=new Array( 'The Page 1 Text' , 'page1.html' );
links[2]=new Array( 'The Page 2 Text' , 'page2.html' );
links[3]=new Array( 'The Page 3 Text' , 'page3.html' );
links[4]=new Array( 'The Page 4 Text' , 'page4.html' );
links[5]=new Array( 'The Page 5 Text' , 'page5.html' );

var textfamily="sans-serif"; // FAMILY OF FONT
var textstyle="bold"; // BOLD, ITALICS, NONE
var textsize="12"; // TEXT SIZE IN PIXELS
var textcolor="black"; // TEXT COLOR OF LINKS AND THE "CLICK HERE" TEXT
var backcolor="lightgrey"; // BACKGROUND COLOR OF THE LINKS AREA
var activatecolor="teal"; // THE "CLICK HERE" *BAR* COLOR
var yoffset=10; // AMOUNT OF PIXELS FROM TOP OF PAGE
var follow=true; // true = MENU FOLLOWS SCROLLING / false = MENU STAYS PUT
var menuwidth=130; // TOTAL MENU WIDTH IN PIXELS (INCLUDING "CLICK HERE" BAR)

//***************** DO NOT EDIT BELOW THIS LINE ****************

var isShow=false;
var isNS=(navigator.appName=="Netscape");
var txt=(isNS)? '<layer name="menu" width="'+menuwidth+'" top="'+yoffset+'" left="'+(-menuwidth+20)+'" z-index="10000000">' : '<div id="menu" style="position:absolute; width:'+menuwidth+'px; left:'+(-menuwidth+20)+'px; top:'+yoffset+'px; visibility:visible;">';
txt+='<table width="'+menuwidth+'" cellpadding="0" cellspacing="0" border="0"><tr valign="middle">';
txt+='<td align="left" width="'+(menuwidth-20)+'" bgcolor="'+backcolor+'"><br>';
if(isNS)txt+= '<ilayer width="'+(menuwidth-20)+'"> ';
for(i=1;i<=links.length-1;i++){
txt+='<font style="font-size:'+textsize+'px; font-weight:'+textstyle+'; font-family:'+textfamily+';">&nbsp;<a href="'+(links[i][1])+'" ><font color="'+textcolor+'">'+(links[i][0])+'</font></a></font><br><br>';
}
if(isNS)txt+= '</ilayer>';
txt+='</td><td bgcolor="'+activatecolor+'" width="20" align="center"><font style="font-family:'+textfamily+'; color:'+textcolor+'"><b>C<br>L<br>I<br>C<br>K<br><br>H<br>E<br>R<br>E</b></font></td></tr></table>';
txt+=(isNS)? '</layer>' : '</div>';
document.write(txt);

function setposition(){
(isNS)? document.menu.top=yoffset+pageYOffset : document.all.menu.style.pixelTop=yoffset+document.body.scrollTop;
}

if(isNS) document.menu.captureEvents(Event.MOUSEDOWN);
(isNS)? document.menu.onmousedown=showmenu : document.all.menu.onclick=showmenu;

window.onload=new Function("if(follow)setInterval('setposition()' , 150)");
</SCRIPT>

大家可以將以下橙色改成自己喜歡的!

links[1]=new Array( 'The Page 1 Text' , 'page1.html' );
links[2]=new Array( 'The Page 2 Text' , 'page2.html' );
links[3]=new Array( 'The Page 3 Text' , 'page3.html' );
links[4]=new Array( 'The Page 4 Text' , 'page4.html' );
links[5]=new Array( 'The Page 5 Text' , 'page5.html' );