鼠标是现在电脑的基本配置之一，也是最常用的输入命令的工具之一。本文将将一些与鼠标有关系的特效。
1、跟随鼠标移动的彩色星星
如题，会根据鼠标的移动而移动，并在鼠标周围随机来回移动，让人感觉在放大缩小。根据书上的代码做了一些修改。比如，如果用户不移动鼠标，是不会显示星星效果的：其次就是将源代码中的亮度调节等去掉了，因为效果并不是很明显。截了三幅图，黑点近似代表鼠标的位置。效果图如下：
源代码：
<html>
<head>
<title>
Twinkle stars
</title>
<style>
.iestars{
position:absolute;
top:00px; left:00px;
height:50px;
width:50px;
padding-top:15px;
text-align:center;
display:none;
}
</style>
</head>
<body>
<script language = "JavaScript">
//数组保存星星的颜色，也可以设置为其它颜色，也可以增加或减少颜色数量
var colours=new Array(‘ff0000‘,‘00ff00‘,‘0000ff‘,‘ff00ff‘,‘00ffff‘,‘ffff00‘);
var amount=colours.length;
//初始化参数
var Ydelay=0,Xdelay=0; //圆环中心的位置
var step=0.2;
var currStep=0;
var my=0,mx=0; //记录鼠标当前位置
var flag=0;
//在容器中写入"."字符，闪烁的星星即是从"."变化而来的
for (i=0; i < amount; i++){
document.write(‘<div class = "iestars" >...</div>‘);
}
//处理鼠标事件
function iMouse(){
my = event.y;
mx = event.x;
//第一次初始化，只运行一次
if (flag==0){
delay();
flag=1;
}
}
document.onmousemove = iMouse;
var iestars=document.getElementsByClassName("iestars");
function stars(){
for(i = 0;i < amount;i++){
var style = iestars[i].style; //访问每个容器的style属性
style.color=colours[i];
style.display="block";
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);
}
</script>
</body>
</html>
时间： 2024-11-11 03:55:57