📄 twinklestars.htm
字号:
<html>
<head>
<title>
Twinkle stars
</title>
</head>
<body>
<script language = "JavaScript">
<!--
//数组保存星星的颜色，也可以设置为其它颜色，也可以增加或减少颜色数量
colours=new Array('ff0000','00ff00','0000ff','ff00ff','00ffff','ffff00');
amount=colours.length;
//初始化参数
Ydelay=0,Xdelay=0; //圆环中心的位置
step=0.2;
currStep=0;
my=0,mx=0; //记录鼠标当前位置
//像网页中加入容器
//这里使用document.write而不是直接写在html中，使得容器的个数可以改变
document.write('<div id="ie" style="position:absolute;top:0;left:0;"><div style="position:relative">');
//在容器中写入"."字符，闪烁的星星即是从"."变化而来的
for (i=0; i < amount; i++)
document.write('<div id = "iestars" style = "position:absolute; top:0px; left:0px; height:50px; width:50px; color:' + colours[i] + ';padding-top:15px;text-align:center">.</div>');
brightness = 1; //亮度
gstep = 1; //每次亮度变化的值
//////////////////////////////////////////////////
//处理鼠标事件
function iMouse()
{
my = event.y;
mx = event.x;
}
document.onmousemove = iMouse;
//////////////////////////////////////////////////
//使星星变暗
function dim()
{
brightness -= gstep;
dt=setTimeout('dim()',10);
if (brightness < 2)
{
clearTimeout(dt);
glow();
}
}
//使星星变亮
function glow()
{
brightness += gstep;
gt=setTimeout('glow()',10);
if (brightness > 14)
{
clearTimeout(gt);
dim();
}
}
//////////////////////////////////////////////////
//控制鼠标位置和明亮程度
function stars()
{
ie.style.top = document.body.scrollTop;
for(i = 0;i < amount;i++)
{
var style = iestars[i].style; //访问每个容器的style属性
//glow过滤器的作用是在物体周围加入闪耀边缘，使物体呈现发光的效果
//color用来设置闪烁边缘的颜色，strength用来设置上说边缘的宽度，以pixel为单位
style.filter = 'glow(color=' + colours[i] + ',strength='+brightness + ')';
style.top = Ydelay+80*Math.sin(currStep/2+i*3.1416/3)*Math.sin((currStep)/10); //竖直位置
style.left = Xdelay+80*Math.cos(currStep/2+i*3.1416/3)*Math.sin((currStep)/10); //水平位置
}
currStep += step;
}
//////////////////////////////////////////////////
//计算圆环中心的位置，为当前圆环中心位置和鼠标位置的加权平均
function delay()
{
Ydelay += (my-Ydelay)*1/20;
Xdelay += (mx-Xdelay)*1/20;
stars();
setTimeout('delay()',10);
}
delay();
glow();
//-->
</script>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -