?? nebula.htm
字號:
<html>
<head>
<title>
鼠標星云
</title>
</head>
<body bgcolor="000000">
<div id=starsDiv style="LEFT: 0px; POSITION: absolute; TOP: 0px">
<DIV style="BACKGROUND: #ffffff; FONT-SIZE: 1px; HEIGHT: 1px;POSITION: relative; VISIBILITY: visible; WIDTH: 1px">
</DIV>
<DIV style="BACKGROUND: #fff000; FONT-SIZE: 1px; HEIGHT: 1px;POSITION: relative; VISIBILITY: visible; WIDTH: 1px">
</DIV>
<DIV style="BACKGROUND: #ffa000; FONT-SIZE: 1px; HEIGHT: 1px;POSITION: relative; VISIBILITY: visible; WIDTH: 1px">
</DIV>
<DIV style="BACKGROUND: #ff00ff; FONT-SIZE: 1px; HEIGHT: 1px;POSITION: relative; VISIBILITY: visible; WIDTH: 1px">
</DIV>
<DIV style="BACKGROUND: #00ff00; FONT-SIZE: 1px; HEIGHT: 1px;POSITION: relative; VISIBILITY: visible; WIDTH: 1px">
</DIV>
<DIV style="BACKGROUND: #0000ff; FONT-SIZE: 1px; HEIGHT: 1px;POSITION: relative; VISIBILITY: visible; WIDTH: 1px">
</DIV>
<DIV style="BACKGROUND: #ff0000; FONT-SIZE: 1px; HEIGHT: 1px;POSITION: relative; VISIBILITY: visible; WIDTH: 1px">
</DIV>
<DIV style="BACKGROUND: #ffffff; FONT-SIZE: 2px; HEIGHT: 2px;POSITION: relative; VISIBILITY: visible; WIDTH: 2px">
</DIV>
<DIV style="BACKGROUND: #fff000; FONT-SIZE: 2px; HEIGHT: 2px;POSITION: relative; VISIBILITY: visible; WIDTH: 2px">
</DIV>
<DIV style="BACKGROUND: #ffa000; FONT-SIZE: 2px; HEIGHT: 2px;POSITION: relative; VISIBILITY: visible; WIDTH: 2px">
</DIV>
</div>
<script language=JavaScript>
<!-- Begin
var Clrs = new Array(6);//設置構成星云的點的顏色
Clrs[0] = 'ff0000';
Clrs[1] = '00ff00';
Clrs[2] = '000aff';
Clrs[3] = 'ff00ff';
Clrs[4] = 'fff000';
Clrs[5] = 'fffff0';
var yBase = 200;//設置星云高度極限，這里是作為一個基數來計算真實的高度
var xBase = 200;//設置星云寬度極限，這里是作為一個基數來計算真實的寬度
var step;//此參數用來作為下面的currStep的一個基數值
var currStep = 0;//上面的step參數的累計值，用來做計算點的位置的參數
var Xpos = 1;//鼠標橫坐標位置
var Ypos = 1;//鼠標縱坐標位置
if(document.layers)//NetScape瀏覽器
{
window.captureEvents(Event.MOUSEMOVE);
}
if(document.all) //IE瀏覽器
{
function MoveHandler()
{
Xpos = document.body.scrollLeft+event.x;//找到對象真正的左邊界
Ypos = document.body.scrollTop+event.y;//找到對象的真正上邊界
}
document.onmousemove = MoveHandler;//設置onmousemove事件的處理函數為自定義的MoveHandler函數
}
else if(document.layers) //netscape瀏覽器
{
//以下功能和上述IE情況下的代碼一樣
function xMoveHandler(evnt)
{
Xpos = evnt.pageX;
Ypos = evnt.pageY;
}
window.onMouseMove = xMoveHandler;
}
//鼠標星云效果處理函數
function Nebula()
{
if(document.all) //IE瀏覽器
{
yBase = window.document.body.offsetHeight / 4;//計算合適的縱坐標基數值
xBase = window.document.body.offsetWidth / 4;//計算合適的橫坐標基數值
}
else if(document.layers) //Netscape瀏覽器
{
yBase = window.innerHeight / 4;
xBase = window.innerWidth / 4;
}
if(document.all) //IE
{
//以下為處理各個效果點
for(i = 0 ; i < starsDiv.all.length ; i++)
{
step = 3;
//以下是設置第i個點的位置，造成類似橢圓的形狀，呈現星云效果
starsDiv.all[i].style.top = Ypos + yBase*Math.cos((currStep + i*4)/12)*Math.cos(0.7+currStep/200);
starsDiv.all[i].style.left = Xpos + xBase*Math.sin((currStep + i*3)/10)*Math.sin(8.2+currStep/400);
for (ai = 0; ai < Clrs.length; ai++)
{
var c=Math.round(Math.random()*[ai]);//隨機挑選顏色
}
starsDiv.all[i].style.background = Clrs[c];//設置第i個點的顏色
}
}
else if(document.layers) //Netscape瀏覽器
{
//以下代碼和IE瀏覽器的情況相似
for(j = 0 ; j < 14 ; j++)
{
//number of NS layers!
step = 6;
var templayer = "a"+j;
document.layers[templayer].top = Ypos + yBase*Math.cos((currStep + j*4)/12)*Math.cos(0.7+currStep/200);
document.layers[templayer].left = Xpos + xBase*Math.sin((currStep + j*3)/10)*Math.sin(8.2+currStep/400);
for(aj=0; aj < Clrs.length; aj++)
{
var c=Math.round(Math.random()*[aj]);
}
document.layers[templayer].bgColor = Clrs[c];
}
}
currStep += step;
setTimeout("Nebula()", 5);
}
Nebula();
// End -->
</script>
</body>
</html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -