蛇形文字

最新推荐文章于 2022-02-04 13:24:43 发布

successful_lb

最新推荐文章于 2022-02-04 13:24:43 发布

阅读量1.8k

点赞数 1

文章标签： div function 存储 hex 浏览器 html

本文链接：https://blog.csdn.net/successful_lb/article/details/2083962

版权

下面是蛇形文字的源码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

</HEAD>
<style type="text/css">
.laystyle{position:absolute;
font-size:12pt;
font-weight:bold;
</style>

<SCRIPT LANGUAGE="JavaScript">
<!--

var theX=0;theY=0;//分别表示鼠标当前的X坐标和Y坐标
var space1=15;
var space2=15;
var flag=0;
var n=0;
var message="Welcome To Our Station!";

function   Hex(Decimal) //十进制转十六进制
{
var   hexChars   =   "0123456789ABCDEF";
var   a   =   Decimal   %   16;
var   b   =   (Decimal   -   a)/16;
hex   =   ""   +   hexChars.charAt(b)   +   hexChars.charAt(a);
L   =   hexChars.charAt(a);
H   =   hexChars.charAt(b);
   return   hex;
}

messageArray=message.split("");
//将字符串中字符提取出来组成一个数组messageArray
var xpos=new Array();
//数组xpos用于存储每个字符所在层的left 属性值
for(i=0;i<=messageArray.length-1;i++)
{
xpos[i]=50;
}
var ypos=new Array();
//数组ypos用于存储每个字符所在层的top属性值
for(i=0;i<=messageArray.length-1;i++)
{
ypos[i]=50;
}
var Apos=new Array();
//数组ypos用于存储每个字符所在层的Alpha属性值
for(i=messageArray.length;i>0;i--)
{
Apos[messageArray.length-i]=i*4;//+(100-messageArray.length*2);
}
var Color_pos=new Array();//数组Color_pos用于存储每个字符所在层的颜色属性值
Color_pos[0]="#FFE6E6";
Color_pos[1]="#FF9D9D";
Color_pos[2]="#FF5959";
Color_pos[3]="#FF2626";
Color_pos[4]="#FF0E0E";
Color_pos[5]="#FF0000";
Color_pos[6]="#FF1B00";
Color_pos[7]="#FF3F00";
Color_pos[8]="#FF6800";
Color_pos[9]="#FF9100";
Color_pos[10]="#FFB500";
Color_pos[11]="#FFDD00";
Color_pos[12]="#FFF500";
Color_pos[13]="#F6FC02";
Color_pos[14]="#D9FC05";
Color_pos[15]="#B6F70A";
Color_pos[16]="#87E70F";
Color_pos[17]="#5BD516";
Color_pos[18]="#39C71E";
Color_pos[19]="#29C023";
Color_pos[20]="#06B434";
Color_pos[21]="#00B647";
Color_pos[22]="#00BC60";
Color_pos[23]="#00C679";
Color_pos[24]="#00D59D";
Color_pos[25]="#00E6C9";
Color_pos[26]="#00E9EB";
Color_pos[27]="#00EAFE";
Color_pos[28]="#00D1FC";
Color_pos[29]="#0096E0";
Color_pos[30]="#0068C6";
Color_pos[31]="#004BB5";
Color_pos[32]="#002BA3";
Color_pos[33]="#001497";
Color_pos[34]="#030190";
Color_pos[35]="#1D0090";
Color_pos[36]="#420095";
Color_pos[37]="#69009E";
Color_pos[38]="#9A00AB";
Color_pos[39]="#DA00BC";
Color_pos[40]="#FF01C6";
Color_pos[41]="#FF16CB";
Color_pos[42]="#FF2FD1";
Color_pos[43]="#FF5FDB";
Color_pos[44]="#FFAFED";
Color_pos[45]="#FFC8EB";
Color_pos[46]="#FFE1F5";
Color_pos[47]="#FFFFFF";
var Color_pos2=new Array();//数组Color_pos2用于存储每个字符阴影的颜色属性值
Color_pos2[0]="#FF0000";
Color_pos2[1]="#FF1B00";
Color_pos2[2]="#FF3F00";
Color_pos2[3]="#FF6800";
Color_pos2[4]="#FF9100";
Color_pos2[5]="#FFB500";
Color_pos2[6]="#FFDD00";
Color_pos2[7]="#FFF500";
Color_pos2[8]="#F6FC02";
Color_pos2[9]="#D9FC05";
Color_pos2[10]="#B6F70A";
Color_pos2[11]="#87E70F";
Color_pos2[12]="#5BD516";
Color_pos2[13]="#39C71E";
Color_pos2[14]="#29C023";
Color_pos2[15]="#06B434";
Color_pos2[16]="#00B647";
Color_pos2[17]="#00BC60";
Color_pos2[18]="#00C679";
Color_pos2[19]="#00D59D";
Color_pos2[20]="#00E6C9";
Color_pos2[21]="#00E9EB";
Color_pos2[22]="#00EAFE";
Color_pos2[23]="#00D1FC";
Color_pos2[24]="#0096E0";
Color_pos2[25]="#0068C6";
Color_pos2[26]="#004BB5";
Color_pos2[27]="#002BA3";
Color_pos2[28]="#001497";
Color_pos2[29]="#030190";
Color_pos2[30]="#1D0090";
Color_pos2[31]="#420095";
Color_pos2[32]="#69009E";
Color_pos2[33]="#9A00AB";
Color_pos2[34]="#DA00BC";
Color_pos2[35]="#FF01C6";
Color_pos2[36]="#FF16CB";
Color_pos2[37]="#FF2FD1";
Color_pos2[38]="#FF5FDB";
Color_pos2[39]="#FFAFED";
Color_pos2[40]="#FFC8EB";
Color_pos2[41]="#FFE1F5";
Color_pos2[42]="#FFFFFF";
Color_pos2[43]="#FFE6E6";
Color_pos2[44]="#FF9D9D";
Color_pos2[45]="#FF5959";
Color_pos2[46]="#FF2626";
Color_pos2[47]="#FF0E0E";
ifNN4=(navigator.appName=="Netscape" && parseInt(navigator.appVersion)==4);
ifNN6=(navigator.appName=="Netscape" && parseInt(navigator.appVersion)==5);
function getMousePos(e)
{
if(ifNN4 || ifNN6)
//当为NN4 和NN6浏览器时,将event对象作为参数传递给getPos(e)函数
{
  theX=e.pageX;
  theY=e.pageY;
}
else
{
  theX=document.body.scrollLeft+event.clientX;
  theY=document.body.scrollTop+event.clientY;
}

  flag=1;
}
function makesnake()
{

if(flag==1)
{
  if(ifNN4)
  {
   xpos[0]=theX;
   ypos[0]=theY+10;
   for(i=messageArray.length-1;i>0;i--)
   {
    xpos[i]=xpos[i-1]+space1;
    ypos[i]=ypos[i-1];
   }

   for(i=0;i<messageArray.length-1;i++)
   {
    document.getElementById('div'+i).left=xpos[i];
    eval("document.div"+i).top=ypos[i];
   }
   for(i=messageArray.length-1;i>0;i--)
   {
    xpos[i]=xpos[i-1]+space1;
    ypos[i]=ypos[i-1];
   }
  }
  else
  {
   xpos[0]=theX+15;
   ypos[0]=theY;

   temp=Color_pos[47];
   temp2=Color_pos2[47];
   for(i=47;i>0;i--)
   {
    Color_pos[i]=Color_pos[i-1];
    Color_pos2[i]=Color_pos2[i-1];
   }

   Color_pos[0]=temp;
   Color_pos2[0]=temp2;

   for(i=0;i<messageArray.length;i++)
   {

    document.getElementById("div"+i).style.left=xpos[i];    document.getElementById("div"+i).style.top=ypos[i];
    document.getElementById("f"+i).color=Color_pos[i];//字体颜色
    document.getElementById("div"+i).style.filter=
    "progid:DXImageTransform.Microsoft.Alpha(opacity="+Apos[i]+")";
    document.getElementById("div"+i).style.filter= "progid:DXImageTransform.Microsoft.Shadow(color="+Color_pos2[i]+",direction=45)";//阴影效果
   }
   for(i=messageArray.length-1;i>0;i--)
   {
    xpos[i]=xpos[i-1]+space1;
    ypos[i]=ypos[i-1];
   }
  }

}
setTimeout("makesnake()",50);
}
for(i=0;i<=messageArray.length-1;i++)
{
document.write("<div id='div"+i+"' class='laystyle'>");
document.write("<font id='f"+i+"'>");
document.write(messageArray[i]);
document.write("</font>");
document.write("</div>");
}
if(ifNN4 || ifNN6)
//对NN4浏览器和NN6浏览器使用事件捕获
document.captureEvents(Event.MOUSEMOVE);
document.οnmοusemοve=getMousePos;
//-->
</SCRIPT>
<BODY onLoad="makesnake()" style="background-color:#0060bb">