📄 s10_16.htm
字号:
<HTML>
<HEAD>
<META name="GENERATOR" content="Microsoft FrontPage 5.0">
<META name="ProgId" content="FrontPage.Editor.Document">
<TITLE>跟随鼠标的文字</TITLE>
<STYLE type="text/css">
#letter {position:absolute;top:-50px;font-size:9pt;font-weight:bold;}
</STYLE>
<SCRIPT>
var follow_mouse = false; //是否跟随鼠标
var mouse_x,mouse_y; //鼠标点相对于整个页面的位置
var message="精彩网页,人人喜爱！"; //指定跟随鼠标的字符串
message=message.split(""); //将跟随鼠标的各个字符放入数组中
var xpos=new Array(); // 存放各个字符的X轴坐标值
for (var i=0;i<message.length;i++) xpos[i] = -50;
var ypos=new Array(); // 存放各个字符的Y轴坐标值
for (i=0;i<message.length-1;i++) ypos[i]=-50;
var letter_spacing=20; // 字符间距
function onMouseMove()
{//在鼠标移动事件处理过程中读取鼠标点的位置
mouse_x = document.body.scrollLeft+event.clientX
mouse_y = document.body.scrollTop+event.clientY
follow_mouse = true;
}
function makesnake()
{//蛇形显示跟随鼠标的字符串
if (follow_mouse)
{
for (var i=message.length-1; i>=1; i--)
{//使后续字符紧随前面的字符的位置,以产生蛇尾效果
xpos[i]=xpos[i-1]+letter_spacing;//在移动过程中,字符间距逐渐增大,...,多次执行后,间距相同
ypos[i]=ypos[i-1];
}
xpos[0] = mouse_x+letter_spacing;//使第1个字符紧随鼠标,而后续字符将紧随其后
ypos[0] = mouse_y;
for (i=0; i<message.length; i++)
{
letter[i].style.posLeft = xpos[i];
letter[i].style.posTop = ypos[i];
}
}
var timer=setTimeout("makesnake()",30);
}
for (i=0;i<message.length;i++)
{//将每个字符放入各自可以独立定位的<SPAN>块中
document.write('<span id="letter">' + message[i] + '</span>');
}
document.onmousemove = onMouseMove;
</SCRIPT>
</HEAD>
<BODY onLoad="makesnake()">
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -