Javascript_ex_文字跟随鼠标移动
来源：互联网 发布：郑和下西洋目的知乎 编辑：程序博客网 时间：2024/05/18 12:01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.spanstyle{
position:absolute;
visibility:visible;
top:-50px;
font-size:10pt;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:black;
}
</style>
<script language="javascript">
<!--
var x,y;
var step=15;
var flag=0;
//记得在字符串后面增加一个空格
var message="肖 红 阳 , 加 油 ! ";
message=message.split(" ");
var xpos=new Array();
for(i=0;i<=message.length-1;i++){xpos[i]=-50;};
var ypos=new Array();
for(i=0;i<=message.length-1;i++){ypos[i]=-50;};
function handlerMM(e)
{
x=(document.layers)?e.pageX:document.body.scrollLeft+event.clientX;
y=(document.layers)?e.pageY:document.body.scrollTop+event.clientY;
flag=1;
}
function makesnake()
{
if(flag==1 && document.all) //对于IE浏览器
{
for (i=message.length-1; i >=1;i--){
xpos[i]=xpos[i-1]+step;
ypos[i]=ypos[i-1];
}
xpos[0]=x+step;
ypos[0]=y;
for(i=0;i<message.length-1;i++) //设置每个文字的显示位置
{
var thisspan = eval("span"+(i)+".style");
thisspan.posLeft=xpos[i];
thisspan.posTop=ypos[i];
}
}
else if(flag==1 && document.layers) //对Netscape浏览器
{
for(i=message.length-1;i>=1;i--)
{
xpos[i]=xpos[i-1]+step;
ypos[i]=ypos[i-1];
}
xpos[0]=y+step;
ypos[0]=y;
for(i=0;i<message.length-1;i++) //设置每个文字的显示位置
{
var thisspan=eval("document.span"+i);
thisspan.left=xpos[i];
thisspan.top=ypos[i];
}
}
var timer=setTimeout("makesnake()",30);
}
//-->
</script>
</head>
<body onLoad="makesnake()" style="width:100%;overflow-x:hidden;overflow-y:scroll; background-color: rgb(252 255 255);">
<center><h1>文字跟随鼠标</h1></center>
<script language="javascript">
<!--Beginning of JavaScript-
for(i=0;i<=message.length-1;i++)
{
document.write("<span id='span"+i+"' class='spanstyle'>");
document.write(message[i]);
document.write("</span>");
}
if (document.layers)
{
document.captureEvens(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
//-->
</script>
</body>
</html>
- Javascript_ex_文字跟随鼠标移动
- 个性文字跟随鼠标移动
- C#文字跟随鼠标移动
- 层 ，文字跟随鼠标移动效果
- qt中文字图片跟随鼠标移动
- JavaScript实现跟随鼠标移动而移动的文字
- 鼠标跟随文字
- 跟随鼠标的文字
- 鼠标文字跟随效果
- 飘浮文字跟随鼠标
- 鼠标文字跟随
- 层跟随鼠标移动
- 人物跟随鼠标移动
- 跟随鼠标移动div
- 图片跟随鼠标移动
- 跟随鼠标移动
- 文字或图片跟随鼠标移动或键盘控制图片移动实例（javascript实现）
- 跟随鼠标的发光文字
- 关于IE 9.0 测试
- JBPM 与 tomcat 6 的冲突
- 求HTML 5的高手帮忙
- NoSQL的Spring
- Ubuntu10.04下安装JDK6
- Javascript_ex_文字跟随鼠标移动
- CSA: 软件的架构与设计模式之什么是架构
- Freescale i.MX515中文介绍与飞思卡尔imx515 应用领域
- 一些有趣的国外优秀产品设计原型图
- Freescale 飞思卡尔imx515 应用领域如移动互联网设备
- vb 16进制 转 unicode
- Plot——Filling
- 转：SQL Server 2008 R2数据挖掘即学即用
