注册 | 登陆

您的位置：阿里西西 > 网页特效 > 实例特效 > 详细内容

闪亮边框的表格

稿源：互联网 2022-06-01 09:19:06 点击： 304 撤稿纠错

闪亮边框的表格，非常漂亮，想让您的网站更具魅力吗？来试试这个吧。

以下讨论的是和js 特效相关的闪亮边框的表格教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

要完成此效果把如下代码加入到<body>区域中

<script language="javascript">
  var line=new Array();
  var w=35;     // 一条边框的小格的个数（所以是个正方形啦）
  var left=280;  // 这个是边框在页面中的位置的左上角的X坐标
  var top=10;   // 自然就是纵坐啦
  var width=4;  // 边框中一小格的象素宽
  var height=3;  // 边框的高度，设为1的话就是一条细线了
  line[0]="ff"+Number(25).toString(16)+Number(25).toString(16);
  line[1]="ff"+Number(50).toString(16)+Number(50).toString(16);
  line[2]="ff"+Number(75).toString(16)+Number(75).toString(16);
  line[3]="ff"+Number(100).toString(16)+Number(100).toString(16);
  line[4]="ff"+Number(125).toString(16)+Number(125).toString(16);
  line[5]="ff"+Number(150).toString(16)+Number(150).toString(16);
  line[6]="ff"+Number(175).toString(16)+Number(175).toString(16);
  line[7]="ff"+Number(200).toString(16)+Number(200).toString(16);
  line[8]="ff"+Number(225).toString(16)+Number(225).toString(16);
  line[9]="ff"+Number(225).toString(16)+Number(225).toString(16);
  line[10]="ff"+Number(225).toString(16)+Number(225).toString(16);
  line[11]="ff"+Number(225).toString(16)+Number(225).toString(16);
  line[12]="ff"+Number(200).toString(16)+Number(200).toString(16);
  line[13]="ff"+Number(175).toString(16)+Number(175).toString(16);
  line[14]="ff"+Number(150).toString(16)+Number(150).toString(16);
  line[15]="ff"+Number(125).toString(16)+Number(125).toString(16);
  line[16]="ff"+Number(100).toString(16)+Number(100).toString(16);
  line[17]="ff"+Number(75).toString(16)+Number(75).toString(16);
  line[18]="ff"+Number(50).toString(16)+Number(50).toString(16);
  line[19]="ff"+Number(25).toString(16)+Number(25).toString(16);

function writes(num)
  {
    var temp;
    var s;
    var tl,tt;
    var tw,th;
    temp=num+1;
    if(num==0)
    {
      tl = left;
      tt = top;
      tw = w*width;
      th = height;
      s="<table style='position: absolute; left: "+tl+"px; top: "+tt+"px; width: "+tw+"px; height: "+th+"px;' cellspacing='0' cellpadding='0'><tr>";
      for(r=0;r<w;r++)
      {
        temp=r+w*num;
        s+="<td id=tab"+temp+" bgcolor=red></td>";
      }
      s+="</tr></table>";
    }
    if(num==1)
    {
      tl = left+w*width;
      tt = top;
      tw = height;
      th = w*width;
      s="<table style='position: absolute; left: "+tl+"px; top: "+tt+"px; width: "+tw+"px; height: "+th+"px;' cellspacing='0' cellpadding='0'>";
      for(r=0;r<w;r++)
      {
        temp=r+w*num;
        s+="<tr><td id=tab"+temp+" bgcolor=red></td></tr>";
      }
      s+="</table>";
    }
    if(num==2)
    {
      tl = left+height;
      tt = top+w*width;
      tw = w*width;
      th = height;
      s="<table style='position: absolute; left: "+tl+"px; top: "+tt+"px; width: "+tw+"px; height: "+th+"px;' cellspacing='0' cellpadding='0'><tr>";
      for(r=w;r>0;r--)
      {
        temp=r-1+w*num;
        s+="<td id=tab"+temp+" bgcolor=red></td>";
      }
      s+="</tr></table>";
    }
    if(num==3)
    {
      tl = left;
      tt = top+height;
      tw = height;
      th = w*width;
      s="<table style='position: absolute; left: "+tl+"px; top: "+tt+"px; width: "+tw+"px; height: "+th+"px;' cellspacing='0' cellpadding='0'>";
      for(r=w;r>0;r--)
      {
        temp=r-1+w*num;
        s+="<tr><td id=tab"+temp+" bgcolor=red></td></tr>";
      }
      s+="</table>";
    }
    return s;
  }
  function count()
  {
    var i;
    var temp;
    var total;
    total = w*4;
    for(i=0; i<line.length; i++)
    {
      temp=pos+i-line.length/2;
      temp=temp<0?(total+temp):temp;
      temp=temp>(total-1)?(temp-total):temp;
      document.all["tab"+temp].style.backgroundColor=line[line.length-i];
    }
    pos=(pos+1)>total?0:(pos+1);
  }

for(i=0;i<=3;i++)
  {
    document.write(writes(i));
  }
  var pos=0;
  setInterval("count()", 1);
</script>

<a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a>

关于闪亮边框的表格的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200807153301.shtml方便下次再访问哦。

·上一篇： 模拟的电梯
·下一篇： 将当前的URL发到自定邮箱

相关阅读

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

最新游戏

最新新闻