网站首页 -   -  建站入门 -  建站步骤 -  视频教程 -   -   -  常用软件 -  优化网页 -  网络知识 -   -   关于模板 -   关于域名 -  FTP管理 -  ICP备案 -  邮箱管理 -  网络推广 -  销售心得 -  成功案例 -  dreamweaver知识 -  photoshop知识 -  域名绑定 -  深圳网监局备案 -
用表格做流动分割线

发布时间 2010-03-11

以前制作过这个教程:如何制作1像素的横线或者竖线(即分割线),现在,我们将表格与Javascript结合,可以做出更生动的分割线——流动的分割线。加入以下代码,你就可以看到一条分割线,颜色在不断的流动。

以下是代码片段:

   <SCRIPT>
  l=Array(6,7,8,9,'a','b','b','c','d','e','f')
  t="<table height=2 width=60% cellspacing=0 cellpadding=0><tr>"
  for(x=0;x<40;x++){t+="<td id=a_mo"+x+"></td>"}
  document.write(t+"</tr></table>")
  function f1(y){for(i=0;i<40;i++){c=(i+y)%20;if(c>10)c=20-c
  document.all["a_mo"+(i)].bgColor="'#00"+l[c]+l[c]+"00'"}y++
  setTimeout('f1('+y+')',1)}f1(1)
  </SCRIPT>
 
<TABLE height=2 cellSpacing=0 cellPadding=0 width="60%">
<TBODY>
<TR>
<TD id=a_mo0 bgColor=#006600></TD>
<TD id=a_mo1 bgColor=#007700></TD>
<TD id=a_mo2 bgColor=#008800></TD>
<TD id=a_mo3 bgColor=#009900></TD>
<TD id=a_mo4 bgColor=#00aa00></TD>
<TD id=a_mo5 bgColor=#00bb00></TD>
<TD id=a_mo6 bgColor=#00bb00></TD>
<TD id=a_mo7 bgColor=#00cc00></TD>
<TD id=a_mo8 bgColor=#00dd00></TD>
<TD id=a_mo9 bgColor=#00ee00></TD>
<TD id=a_mo10 bgColor=#00ff00></TD>
<TD id=a_mo11 bgColor=#00ee00></TD>
<TD id=a_mo12 bgColor=#00dd00></TD>
<TD id=a_mo13 bgColor=#00cc00></TD>
<TD id=a_mo14 bgColor=#00bb00></TD>
<TD id=a_mo15 bgColor=#00bb00></TD>
<TD id=a_mo16 bgColor=#00aa00></TD>
<TD id=a_mo17 bgColor=#009900></TD>
<TD id=a_mo18 bgColor=#008800></TD>
<TD id=a_mo19 bgColor=#007700></TD>
<TD id=a_mo20 bgColor=#006600></TD>
<TD id=a_mo21 bgColor=#007700></TD>
<TD id=a_mo22 bgColor=#008800></TD>
<TD id=a_mo23 bgColor=#009900></TD>
<TD id=a_mo24 bgColor=#00aa00></TD>
<TD id=a_mo25 bgColor=#00bb00></TD>
<TD id=a_mo26 bgColor=#00bb00></TD>
<TD id=a_mo27 bgColor=#00cc00></TD>
<TD id=a_mo28 bgColor=#00dd00></TD>
<TD id=a_mo29 bgColor=#00ee00></TD>
<TD id=a_mo30 bgColor=#00ff00></TD>
<TD id=a_mo31 bgColor=#00ee00></TD>
<TD id=a_mo32 bgColor=#00dd00></TD>
<TD id=a_mo33 bgColor=#00cc00></TD>
<TD id=a_mo34 bgColor=#00bb00></TD>
<TD id=a_mo35 bgColor=#00bb00></TD>
<TD id=a_mo36 bgColor=#00aa00></TD>
<TD id=a_mo37 bgColor=#009900></TD>
<TD id=a_mo38 bgColor=#008800></TD>
<TD id=a_mo39 bgColor=#007700></TD></TR></TBODY></TABLE>

  在上面的代码中,我们可以通过修改<table>标识中的height和width设置分割线的高度和长度
  把代码放在需要插入分割线的位置即可.

 效果如下:

 

 

相关内容
查无记录
 
公司地址:深圳市福田区福民路12号知本大厦706   邮编:518000        
客服热线:0755-61192828 传真:0755-82915763 
客服的服务质量投诉::service@51rich.net(如果您觉得哪位客服的服务不好或者服务得超级好,都可以发EM通知我们,并写上原因,谢谢您的监督)
网站管理