📄 bubble.htm
字号:
<html>
<head>
<title>
Water Bubbles
</title>
</head>
<body>
<script language="JavaScript">
//<!-- Begin
image = new Image(); //引入图像b.gif
image.src = "1.gif";
Amount = 20;
my = -50; //初始化气泡涌出的位置y
mx = -50; //初始化气泡涌出的位置x
Ypos = new Array(); //y轴坐标
Xpos = new Array(); //x轴坐标
Speed = new Array(); //竖直速度
size = new Array(); //尺寸
sizegrow = new Array(); //每次尺寸增大的值
angle = new Array(); //余弦曲线的角度
anglegrow = new Array(); //每次余弦曲线角度变化
//鼠标移动事件
document.onmousemove=MouseMove;
function MouseMove()
{
my = event.y-20;
mx = event.x;
}
for (i = 0; i < Amount; i++)
{
Ypos[i] = my;
Xpos[i] = mx;
Speed[i] = Math.random()*4+1; //[1,5) 速度
angle[i] = 0; //余弦曲线的角度
anglegrow[i] = Math.random()*0.4+0.2; //[0.2,0.6)
size[i] = 8;
sizegrow[i] = Math.random()*0.1+0.1; //[0.5,0.6)尺寸增大的速度
}
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="' + image.src + '" style="position:absolute;top:0px;left:0px;filter:alpha(opacity=50)">');
//alpha滤镜：调整对象内容的透明度
//参数opacity由来设置起始的透明度等级
document.write('</div></div>');
function MouseBubbles()
{
//得到页面最顶端与页面可视部分最顶端的距离
var hscrll = document.body.scrollTop;
//得到页面最左端与页面可视部分最左端的距离
var wscrll = document.body.scrollLeft;
for (i = 0; i < Amount; i++)
{
Ypos[i] += Speed[i] * (-1) //竖直方向匀速
Xpos[i] += Speed[i] * Math.cos(angle[i]); ; //水平方向余弦运动
if (Ypos[i] < -40)
{
Ypos[i] = my;
Xpos[i] = mx;
Speed[i] = Math.random() * 6 + 4; //[4，10) 速度
size[i] = 8; //尺寸
}
si[i].style.pixelLeft = Xpos[i] + wscrll; //位置
si[i].style.pixelTop = Ypos[i] + hscrll;
si[i].style.width = size[i]; //尺寸
si[i].style.height = size[i];
size[i] += sizegrow[i]; //sizegrow[i]为[0.5,0.6)区间
angle[i] += anglegrow[i]; //余弦曲线的角度
if (size[i] > 24) size[i] = 25; //尺寸，上限25
}
setTimeout('MouseBubbles()', 15);
}
MouseBubbles();
// End -->
</script>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -