0731-55587844
其他(360、58、霸屏、搜狗、小程序)等代理合作请发邮箱254596208@qq.com
站内公告:  如果您有其它业务联系,请发邮件至yaner@y1web.com邮箱,谢谢您的配合!
营销型网站建设第一品牌——优度网络
现在的位置:首页 > 发布营销型网站建设 > 新闻资讯 > 文字跟随鼠标
文字跟随鼠标
信息来源:优度网络  发布日期:2009/4/2 浏览数量:960
文章导读:

<html>
<head>
<title>文字跟随鼠标</title>
<style type="text/css">
<!--
body{
 background-color:#FFFFFF;
}
.spanstyle{
 color:#2244FF;
 font-family:"Courier New";
 font-size:18px;
 text-decoration:overline underline;
 font-weight:bold;
 position:absolute;  /* 绝对定位 */
 top:-50px;
}
-->
</style>
<script language="javascript">
var x,y;  //鼠标当前在页面上的位置
var step=10; //字符显示间距,为了好看,step=0则字符显示没有间距
var flag=0;
var message="Cascading Style Sheet";  //跟随鼠标要显示的字符串
message=message.split(""); //将字符串分割为字符数组

var xpos=new Array()  //存储每个字符的x位置的数组
for (i=0;i<message.length;i++) {
 xpos[i]=-50;
}
var ypos=new Array()  //存储每个字符的y位置的数组
for (i=0;i<message.length;i++) {
 ypos[i]=-50;
}

for (i=0;i<message.length;i++) {  //动态生成显示每个字符span标记,
 //使用span来标记字符,是为了方便使用CSS,并可以自由的绝对定位
 document.write("<span id='span"+i+"' class='spanstyle'>");
 document.write(message[i]);
 document.write("</span>");
}

if (document.layers){
 document.captureEvents(Event.MOUSEMOVE);
}

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;  //从尾向头确定字符的位置,每个字符为前一个字符“历史”水平坐标+step间隔,
            //这样随着光标移动事件,就能得到一个动态的波浪状的显示效果
   ypos[i]=ypos[i-1];  //垂直坐标为前一字符的历史“垂直”坐标,后一个字符跟踪前一个字符运动
  }
  xpos[0]=x+step //第一个字符的坐标位置紧跟鼠标光标
  ypos[0]=y
  //上面的算法将保证,如果鼠标光标移动到新位置,则连续调用makenake将会使这些字符一个接一个的移动的新位置
  // 该算法显示字符串就有点象人类的游行队伍一样,
 
  for (i=0; i<=message.length-1; i++) {
   var thisspan = eval("span"+(i)+".style");  //妙用eval根据字符串得到该字符串表示的对象
   thisspan.posLeft=xpos[i];
   thisspan.posTop=ypos[i];
  }
 }
 else if (flag==1 && document.layers) {
  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("document.span"+i);
   thisspan.left=xpos[i];
   thisspan.top=ypos[i];
  }
 }
 var timer=setTimeout("makesnake()",10)  //设置10毫秒的定时器来连续调用makesnake(),时刻刷新显示字符串的位置。
}
document.onmousemove = handlerMM;
</script>
   </head>
<body onLoad="makesnake();">
</body>
</html>

相关信息
  • 网络营销培训
  • 微网站
  • 扫二维码
  • 1
  • 2
  • 3
  • 最新上传
  • 精品案例
  • 自动流水线嘉
  • 湖南省湘江重
  • 湘潭家居\建
  • 湘潭学校微网
0731-55587844
传真:0731-55587844
邮箱:254596208@qq.com
地址:湖南省湘潭市岳塘区霞光东路58号(维也纳酒店6楼)
优度官方微信扫一扫关注官方微信

关注优度

官方微信
官方微博
官网首页