分享

网页中的七彩文字

 雪落无声 2006-10-28
把下面的代码复制到网页源文件中即可产生彩色文字跟随鼠标的效果
<STYLE>
.spanstyle
{
 COLOR: #0066ff; FONT-FAMILY: 隶书; FONT-SIZE: 14pt; FONT-WEIGHT: normal; POSITION: absolute; TOP: -50px; VISIBILITY: visible
}
</STYLE>
</head>


<SCRIPT language=javascript>
 var message="欢  迎  光  临  我  的  主  页  !";
 var x,y;
 var step=12;
 var flag=0;  //标记鼠标是否正在移动的全局变量
 
 message=message.split(""); //将字符串以空格为间隔分解
 for (i=0;i<=message.length-1;i++)
 {
  //向页面中加入拆散后的字符
     document.write("<span id=‘span"+i+"‘ class=‘spanstyle‘>");
  document.write(message[i]);
     document.write("</span>");
 }
 
 //创建记录各字符位置的数组并赋初值
 var xpos=new Array();
 var ypos=new Array();
 for (i=0;i<=message.length-1;i++)
 {
  xpos[i]=-50;
  ypos[i]=-50;
 };
 
 function recPoint(e) //根据鼠标位置确定字串起始位置
 {
  x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX+10;
  y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY;
  flag=1;
 }
 
 function followMe()  //制造字串跟随鼠标的效果
 {
  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];
    thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;
      }
  }
  else
   if (flag==1 && document.layers)  //针对NN
   {
       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];
     thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;
    }
   }
 }

 function pageOnload() //页面初始化时运行
 {
  followMe();
  window.setTimeout("pageOnload();", 2);
 }
 
 //设置鼠标事件的处理函数
 if (document.layers) {
  document.captureEvents(Event.MOUSEMOVE);
 }
 document.onmousemove = recPoint;
</SCRIPT>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多