📄 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 + -