表格的特殊效果,表格的边框不停的闪烁

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

有什么问题请到<a href='/bbs/forums.php?fid=21'>论坛</a>中发表<br>

<!--# 特效来源:http://www.webjx.com/js -->

<!-- 要完成此效果把如下代码加入到<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>

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航