📄 4.12 跟随鼠标的旋转背景.htm
字号:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
</head>
<body>
看见那个旋转的椭圆了吗？
<div id="starsDiv" style="position:absolute;top:0px;left:0px">
<div style="position:relative;width:1px;height:1px;background:#ffffff;font-size:1px;visibility:visible"></div>
<div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px;visibility:visible"></div>
<div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px;visibility:visible"></div>
<div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px;visibility:visible"></div>
<div style="position:relative;width:1px;height:1px;background:#00ff00;font-size:1px;visibility:visible"></div>
<div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px;visibility:visible"></div>
<div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#fff000;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#ffa000;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#ff00ff;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#00ff00;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#0000ff;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:3px;height:3px;background:#FF0000;font-size:3px;visibility:visible"></div>
</div>
<SCRIPT LANGUAGE="JavaScript">
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;
var currStep = 0;
var Xpos = 1; //横坐标变量
var Ypos = 1; //纵坐标变量
if (document.all) {
function MoveHandler()
{
Xpos = document.body.scrollLeft+event.x; //设置横坐标
Ypos = document.body.scrollTop+event.y; //设置纵坐标
}
document.onmousemove = MoveHandler; //绑定鼠标的移动事件
}
function Comet()
{
if (document.all) {
yBase = window.document.body.offsetHeight / 4;
xBase = window.document.body.offsetWidth / 4;
}
if (document.all) {
for ( i = 0 ; i < starsDiv.all.length ; i++ ) { //循环设置每个div的显示位置
step = 3;
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]; //动态设置div的背景色
}
}
currStep += step;
setTimeout("Comet()", 5); //设置定时器-实现旋转效果
}
Comet();
</script>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -