文字跟随鼠标代码实例

最新推荐文章于 2022-11-19 11:49:11 发布

一米阳光_

最新推荐文章于 2022-11-19 11:49:11 发布

阅读量622

点赞数

分类专栏： Javascript_study 文章标签： function javascript scroll 浏览器 timer class

本文链接：https://blog.csdn.net/xiaohongyangOK/article/details/5903957

版权

Javascript_study 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文字跟随鼠标代码实例

共2个文件:1:followMouse.html; 2:followMouse.js
1.followMouse.html代码如下：
<html>
<head>
<title>肖红阳,文字跟随鼠标</title>
<style>
.spanstyle
{
position:absolute;
visibility:visible;
top:-50px;
font-size:10pt;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:red;
}
</style>
<script language="javascript" src="js/mouseFolow.js"></script>

</head>
<BODY onLoad="makesnake()" overflow-x:hidden;overflow-y:scroll; >
</BODY>
</HTML>

followMouse.js代码如下:
   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 timer2=setTimeout("makesnake()",30);
}
function print_mouse_contain()
{
   for(i=0;i<=message.length-1;i++)
   {
    document.write("<span id='span"+i+"' class='spanstyle' style='z-index:999999999'>");
    document.write(message[i]);
    document.write("</span>");
   }
   if (document.layers)
   {
    document.captureEvens(Event.MOUSEMOVE);
   }
   document.onmousemove = handlerMM;
}
print_mouse_contain();