JavaScript 经典效果集收集3

锁定表列

<HTML><HEAD><TITLE>锁定表格栏位范例网页</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>BODY {
    FONT: 12px 细明体; CURSOR: default
}
TD {
    FONT: 12px 细明体; CURSOR: default
}
.title {
    BORDER-RIGHT: #555 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 4px; BACKGROUND: #ccc; PADDING-BOTTOM: 4px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; CURSOR: hand; PADDING-TOP: 4px; BORDER-BOTTOM: #555 1px solid; WHITE-SPACE: nowrap
}
.cdata {
    BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 3px; BACKGROUND: #fff; PADDING-BOTTOM: 3px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #ddd 1px solid; WHITE-SPACE: nowrap
}
</STYLE>

<SCRIPT language=JavaScript>
// 栏位标题 ( 栏位名称 # 栏位宽度 # 资料对齐 )
var DataTitles=new Array(
"歌手 / 团体#90 #left"  ,
"专辑名称   #130#left"  ,
"发行公司   #110#left"  ,
"本周排名   #58 #center",
"排名状况   #58 #center",
"上周排名   #58 #center",
"上榜周数   #58 #center",
"最高名次   #58 #center",
"销售百分比 #70 #center")
// 栏位资料 ( 二维阵列 )
var DataFields=new Array()
DataFields[0] =new Array("萧亚轩"  ,"爱的主打歌-吻"   ,"维京 Virgin"    ,"1" ,"持平"  ,"1" ,"2","1" ,"2.9 %")
DataFields[1] =new Array("张惠妹"  ,"发烧"            ,"华纳 Warner"    ,"2" ,"持平"  ,"2" ,"2","2" ,"2.1 %")
DataFields[2] =new Array("陶吉吉"  ,"黑色柳丁"        ,"全员集合 Shock" ,"3" ,"持平"  ,"3" ,"5","1" ,"1.8 %")
DataFields[3] =new Array("S.H.E"   ,"美丽新世界"      ,"华研 HIM"       ,"4" ,"持平"  ,"4" ,"6","1" ,"1.2 %")
DataFields[4] =new Array("艾薇儿"  ,"展翅高飞"        ,"博德曼 BMG"     ,"5" ,"新进榜","-" ,"1","5" ,"1.1 %")
DataFields[5] =new Array("任贤齐"  ,"一个任贤齐"      ,"滚石 Rock"      ,"6" ,"新进榜","-" ,"1","6" ,"1.0 %")
DataFields[6] =new Array("范逸臣"  ,"范逸臣第一张专辑","丰华 Forward"   ,"7" ,"持平"  ,"7" ,"2","7" ,"0.9 %")
DataFields[7] =new Array("谢霆锋"  ,"无形的他全精选"  ,"新力 Sony"      ,"8" ,"下跌"  ,"6" ,"4","4" ,"0.9 %")
DataFields[8] =new Array("周蕙"    ,"寂寞城市"        ,"福茂 Decca"     ,"9" ,"下跌"  ,"5" ,"3","5" ,"0.8 %")
DataFields[9] =new Array("周杰伦"  ,"八度空间"        ,"博德曼 BMG"     ,"10","下跌"  ,"8" ,"8","1" ,"0.8 %")
DataFields[10]=new Array("酷玩乐团","玩过头"          ,"科艺百代 EMI"   ,"11","上升"  ,"16","2","11","0.7 %")
DataFields[11]=new Array("张震岳"  ,"等我有一天"      ,"魔岩 Magicstone","12","新进榜","-" ,"1","12","0.6 %")
DataFields[12]=new Array("堂本刚"  ,"红与蓝"          ,"艾回 Avex"      ,"13","新进榜","-" ,"1","13","0.6 %")
DataFields[13]=new Array("ENERGY"  ,"COME ON"         ,"环球 Universal" ,"14","下跌"  ,"10","9","5" ,"0.6 %")
DataFields[14]=new Array("陈冠希"  ,"TRANSITION"      ,"艾回 Avex"      ,"15","下跌"  ,"9" ,"3","5" ,"0.4 %")
DataFields[15]=new Array("合辑"    ,"MTV 嘻哈大师"    ,"环球 Universal" ,"16","下跌"  ,"12","3","12","0.4 %")
</SCRIPT>

<SCRIPT language=JavaScript>
var BoxWidth = 480    // 资料表显示宽度 ( 不含卷轴 )
var ShowLine = 10    // 资料表显示列数
var RsHeight = 21    // 资料列高度
var LockCols = 1    // 要锁定的栏位数 ( 由左至右 )
function WriteTable(){    // 写入表格
var iBoxWidth=BoxWidth
var NewHTML="<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>\
<td><div style=\"width:100%;overflow-x:scroll\">\
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>"
for(i=0;i<DataTitles.length;i++){
  if(i<LockCols){
    var cTitle=DataTitles[i].split("#")
    iBoxWidth-=cTitle[1]
    var DynTip=((i+1)==LockCols)?"解除锁定":"锁定此栏位"
    NewHTML+="<td><div class=\"title\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px\" title=\""+DynTip+"\" onclick=\"ResetTable("+i+")\">"+cTitle[0]+"</div></td>"
  }
}
NewHTML+="</tr>\
<tr><td colspan=\""+LockCols+"\">\
<div id=\"DataFrame1\" style=\"position:relative;width:100%;overflow:hidden\">\
<div id=\"DataGroup1\" style=\"position:relative\"></div></div>\
</td></tr></table></div></td>\
<td valign=\"top\"><div style=\"width:"+iBoxWidth+"px;overflow-x:scroll\">\
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>"
for(i=0;i<DataTitles.length;i++){
  if(i>=LockCols){
    var cTitle=DataTitles[i].split("#")
    NewHTML+="<td><div class=\"title\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px\" title=\"锁定此栏位\" onclick=\"ResetTable("+i+")\">"+cTitle[0]+"</div></td>"
  }
}
NewHTML+="</tr>\
<tr><td colspan=\""+(DataTitles.length-LockCols)+"\">\
<div id=\"DataFrame2\" style=\"position:relative;width:100%;overflow:hidden\">\
<div id=\"DataGroup2\" style=\"position:relative\"></div>\
</div></td></tr></table>\
</div></td><td valign=\"top\">\
<div id=\"DataFrame3\" style=\"position:relative;background:#000;overflow-y:scroll\" onscroll=\"SYNC_Roll()\">\
<div id=\"DataGroup3\" style=\"position:relative;width:1px;visibility:hidden\"></div>\
</div></td></tr></table>"
DataTable.innerHTML=NewHTML
ApplyData()
}
function ApplyData(){    // 写入资料
var NewHTML="<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">"
for(i=0;i<DataFields.length;i++){
  NewHTML+="<tr>"
  for(j=0;j<DataTitles.length;j++){
    if(j<LockCols){
      var cTitle=DataTitles[j].split("#")
      NewHTML+="<td><div class=\"cdata\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px;text-align:"+cTitle[2]+"\">"+DataFields[i][j]+"</div></td>"
    }
  }
  NewHTML+="</tr>"
}
NewHTML+="</table>"
DataGroup1.innerHTML=NewHTML

<META content="MSHTML 6.00.3790.2666" name=GENERATOR></HEAD>
<BODY>
<CENTER>
<H4>锁定表格栏位范例网页</H4>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: white 2px inset; BORDER-TOP: white 2px inset; BORDER-LEFT: white 2px inset; BORDER-BOTTOM: white 2px inset; BACKGROUND-COLOR: scrollbar">
<DIV id=DataTable>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<DIV style="OVERFLOW-X: scroll; WIDTH: 100%">
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<DIV class=title title=解除锁定 style="WIDTH: 90px; HEIGHT: 21px" onclick=ResetTable(0)>歌手 / 团体</DIV></TD></TR>
<TR>
<TD>
<DIV id=DataFrame1 style="OVERFLOW: hidden; WIDTH: 100%; POSITION: relative; HEIGHT: 210px">
<DIV id=DataGroup1 style="POSITION: relative">
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">萧亚轩</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">张惠妹</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">陶吉吉</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">S.H.E</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">艾薇儿</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">任贤齐</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">范逸臣</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">谢霆锋</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">周蕙</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">周杰伦</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">酷玩乐团</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">张震岳</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">堂本刚</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">ENERGY</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">陈冠希</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">合辑</DIV></TD></TR></TBODY></TABLE></DIV></DIV></TD></TR></TBODY></TABLE></DIV></TD>
<TD vAlign=top>
<DIV style="OVERFLOW-X: scroll; WIDTH: 390px">
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 130px; HEIGHT: 21px" onclick=ResetTable(1)>专辑名称 </DIV></TD>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 110px; HEIGHT: 21px" onclick=ResetTable(2)>发行公司 </DIV></TD>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 58px; HEIGHT: 21px" onclick=ResetTable(3)>本周排名 </DIV></TD>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 58px; HEIGHT: 21px" onclick=ResetTable(4)>排名状况 </DIV></TD>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 58px; HEIGHT: 21px" onclick=ResetTable(5)>上周排名 </DIV></TD>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 58px; HEIGHT: 21px" onclick=ResetTable(6)>上榜周数 </DIV></TD>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 58px; HEIGHT: 21px" onclick=ResetTable(7)>最高名次 </DIV></TD>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 70px; HEIGHT: 21px" onclick=ResetTable(8)>销售百分比 </DIV></TD></TR>
<TR>
<TD colSpan=8>
<DIV id=DataFrame2 style="OVERFLOW: hidden; WIDTH: 100%; POSITION: relative; HEIGHT: 210px">
<DIV id=DataGroup2 style="POSITION: relative">
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">爱的主打歌-吻</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">维京 Virgin</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">持平</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">2</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">2.9 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">发烧</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">华纳 Warner</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">2</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">持平</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">2</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">2</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">2</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">2.1 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">黑色柳丁</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">全员集合 Shock</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">3</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">持平</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">3</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">5</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">1.8 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">美丽新世界</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">华研 HIM</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">4</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">持平</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">4</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">6</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">1.2 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">展翅高飞</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">博德曼 BMG</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">5</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">新进榜</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">-</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">5</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">1.1 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">一个任贤齐</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">滚石 Rock</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">6</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">新进榜</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">-</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">6</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">1.0 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">范逸臣第一张专辑</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">丰华 Forward</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">7</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">持平</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">7</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">2</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">7</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.9 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">无形的他全精选</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">新力 Sony</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">8</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">下跌</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">6</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">4</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">4</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.9 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">寂寞城市</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">福茂 Decca</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">9</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">下跌</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">5</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">3</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">5</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.8 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">八度空间</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">博德曼 BMG</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">10</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">下跌</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">8</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">8</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.8 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">玩过头</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">科艺百代 EMI</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">11</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">上升</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">16</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">2</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">11</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.7 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">等我有一天</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">魔岩 Magicstone</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">12</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">新进榜</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">-</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">12</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.6 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">红与蓝</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">艾回 Avex</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">13</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">新进榜</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">-</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">13</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.6 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">COME ON</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">环球 Universal</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">14</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">下跌</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">10</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">9</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">5</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.6 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">TRANSITION</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">艾回 Avex</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">15</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">下跌</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">9</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">3</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">5</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.4 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">MTV 嘻哈大师</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">环球 Universal</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">16</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">下跌</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">12</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">3</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">12</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.4 %</DIV></TD></TR></TBODY></TABLE></DIV></DIV></TD></TR></TBODY></TABLE></DIV></TD>
<TD vAlign=top>
<DIV id=DataFrame3 style="OVERFLOW-Y: scroll; BACKGROUND: #000; POSITION: relative; HEIGHT: 231px" onscroll=SYNC_Roll()>
<DIV id=DataGroup3 style="VISIBILITY: hidden; WIDTH: 1px; POSITION: relative; HEIGHT: 357px"></DIV></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE>
<P>点取栏位标题可重新设定或解除目前的锁定状态</P></CENTER></BODY></HTML>

提示：您可以先修改部分代码再运行

<SCRIPT language=JavaScript>
var dde_para = new Array();
var dde_aa   = new Array();
var dde_url  = document.location.href;
var dde_pp   = dde_url.split("#")[1];
var jspfile  = 1;
var para     = null;

//滚动页面的宽
var scrollwidth = 705;

//滚动页面的高
var scrollheight = 120;

if(dde_pp!=null && dde_pp.length>0){
  dde_para = dde_pp.split("&");}
  for(i=0; dde_para!=null && i<dde_para.length;i++){
  dde_aa = dde_para[i].split("=");
  eval("var "+dde_aa[0] +"='"+dde_aa[1]+"'");}
var car_num = 5;
var i=1;
//默认滚动时间10秒
var pausebetweenimages=800 * 8;
var slideimages=new Array();
//滚动页面1的URL
slideimages[0]="<iframe border=0 vspace=0 hspace=0 bgcolor=#888888 Name=union163com align=center marginwidth=0 marginheight=0 framespacing=0 frameborder=0 scrolling=no width="+scrollwidth+" height="+scrollheight+" src='http://news.qq.com/photon/08photojdlm1.htm'></iframe>";
//滚动页面2的URL
slideimages[1]="<iframe border=0 vspace=0 hspace=0 bgcolor=#888888 Name=union163com align=center marginwidth=0 marginheight=0 framespacing=0 frameborder=0 scrolling=no width="+scrollwidth+" height="+scrollheight+" src='http://news.qq.com/photon/08photojdlm2.htm'></iframe>";
function move1(whichdiv){
tdiv=eval(whichdiv)
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=car_num){
tdiv.style.pixelTop=0
setTimeout("move1(tdiv)",pausebetweenimages)
setTimeout("move2(second2)",pausebetweenimages)
return}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop-=car_num
setTimeout("move1(tdiv)",50)}
else{
tdiv.style.pixelTop=scrollheight
tdiv.innerHTML=slideimages[0]
if (i==slideimages.length-1)
i=0
else i++}}
function move2(whichdiv){
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=car_num){
tdiv2.style.pixelTop=0
setTimeout("move2(tdiv2)",pausebetweenimages)
setTimeout("move1(first2)",pausebetweenimages)
return}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=car_num
setTimeout("move2(second2)",50)}
else{
tdiv2.style.pixelTop=scrollheight
tdiv2.innerHTML=slideimages[1]
if (i==slideimages.length-1)
i=0
else i++}}
function conmouse(){car_num=0;}
function cmouseout(){car_num=5;}
function startscroll(){
if (document.all){
move1(first2)
second2.style.top=scrollheight
}
else if (document.layers){
move1(document.main.document.first)
document.main.document.second.top=scrollheight+5
document.main.document.second.visibility='show'}}
//-->
</SCRIPT>
  <ILAYER id=main height="&amp;{scrollheight};" 
      width="&amp;{scrollwidth};">
  <LAYER name="first" left="0" 
      top="1" width="&amp;{scrollwidth};" id=first>
  <SCRIPT language=JavaScript1.2>
if (document.layers)
document.write(slideimages[0])
</SCRIPT>
  </LAYER>
  <LAYER id=second width="&amp;{scrollwidth};" top="0" left="0" 
      visibility="hide">
  <SCRIPT language=JavaScript1.2>
if (document.layers)
document.write(slideimages[1])
</SCRIPT>
  </LAYER>
  </ILAYER>
  <script language=JavaScript1.2> 
if (document.all){
document.writeln('<span id="main2" style="position:relative;width:'+scrollwidth+';height:'+scrollheight+';overflow:hiden;background-color:#ffffff">')
document.writeln('<div onMouseOver="conmouse()" onMouseOut="cmouseout()" style="position:absolute;width:'+scrollwidth+';height:'+scrollheight+';clip:rect(0 '+scrollwidth+' '+scrollheight+' 0);left:0;top:0">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollwidth+';left:0;top:1;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollwidth+';left:0;top:0">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</span>')}
startscroll();
</script>

提示：您可以先修改部分代码再运行

放大镜特效

var zoomw=250;
var zoomh=220;
var defzoomamount=4;

var zoomamountstep=1.2;
var zoomsizemin=1000;
var zoomsizemax=100000;
var zoomsizestep=1.2;
var zoomamountmin=1;
var zoomamountmax=12;

function zoom_init() {
document.getElementById(zoomid+'_clip').style.width=objw*zoomamount+'px';
document.getElementById(zoomid+'_clip').style.height=objh*zoomamount+'px';
setTimeout("document.getElementById('"+zoomid+"_trigger').focus();",0);
}

w2=((xx+zoomw/2<objw)?((zoomw/2<xx)?(zoomw):(zoomw/2+xx)):(zoomw/2+objw-xx)); if(w2<0) {w2=0;} document.getElementById(zoomid+'_container').style.width=w2+'px';
h2=((yy+zoomh/2<objh)?((zoomh/2<yy)?(zoomh):(zoomh/2+yy)):(zoomh/2+objh-yy)); if(h2<0) {h2=0;} document.getElementById(zoomid+'_container').style.height=h2+'px';
return false;
}

function zoom_off() {
document.getElementById(zoomid+'_container').style.width='0px';
document.getElementById(zoomid+'_container').style.height='0px';
zoomid='';
}

var zoomamount=defzoomamount; var objw;var objh;var zoomid=''; var zoomratio=zoomw/zoomh; var ieox=0; var ieoy=0; var ffox=0; var ffoy=0;
</script><div style="float:left" onmouseover="zoom_on(event,580,435,'http://thw.029ftp.com/attachments/month_0512/85wa_1.jpg','http://thw.029ftp.com/attachments/month_0512/85wa_1.jpg');" onmousemove="zoom_move(event);" 
onmouseout="zoom_off();"><img src="http://thw.029ftp.com/attachments/month_0512/85wa_1.jpg"/></div>
<div style="clear:both;"></div>

提示：您可以先修改部分代码再运行

黑客帝国中的字符流!!!

<html>
<head>
<title>This's My Life留言簿--->观看留言</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
n=1
function n0(){if(n>1)n--}
function n1(){if(n<9)n++;if(n>9)n=1}
function s1(){if(n==1)MM_showHideLayers('Layer1','','show','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide','Layer7','','hide','Layer8','','hide','Layer9','','hide');
  if(n==2)MM_showHideLayers('Layer1','','hide','Layer2','','show','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide','Layer7','','hide','Layer8','','hide','Layer9','','hide');
  if(n==3)MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','show','Layer4','','hide','Layer5','','hide','Layer6','','hide','Layer7','','hide','Layer8','','hide','Layer9','','hide');
  if(n==4)MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','show','Layer5','','hide','Layer6','','hide','Layer7','','hide','Layer8','','hide','Layer9','','hide');
  if(n==5)MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','show','Layer6','','hide','Layer7','','hide','Layer8','','hide','Layer9','','hide');
  if(n==6)MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','show','Layer7','','hide','Layer8','','hide','Layer9','','hide');
  if(n==7)MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide','Layer7','','show','Layer8','','hide','Layer9','','hide');
  if(n==8)MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide','Layer7','','hide','Layer8','','show','Layer9','','hide');
  if(n==9)MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide','Layer7','','hide','Layer8','','hide','Layer9','','show')
}
</script>
<head>
<body  bgcolor=#000000>
<SCRIPT language=JavaScript>
<!-- 
if (document.all){
Cols=18;
Cl=24;//Space's are included so real length is 48!
Cs=12;
Ts=12;
Tc='#008800';
Tc1='#00ff00';
MnS=20;
MxS=30;
I=Cs;
Sp=new Array();S=new Array();Y=new Array();
C=new Array();M=new Array();B=new Array();
RC=new Array();E=new Array();Tcc=new Array(0,1);
document.write("<div id='Container' style='position:absolute;top:0;left:-"+Cs+"'>");
document.write("<div style='position:relative'>");
for(i=0; i < Cols; i++){
S[i]=I+=Cs;
document.write("<div id='A' style='position:absolute;top:0;font-family:Arial;font-size:"
+Ts+"px;left:"+S[i]+";width:"+Ts+"px;height:0px;color:"+Tc+";visibility:hidden'></div>");
}
document.write("</div></div>");
for(j=0; j < Cols; j++){
RC[j]=1+Math.round(Math.random()*Cl);  
Y[j]=0;
Sp[j]=Math.round(MnS+Math.random()*MxS); 
for(i=0; i < RC[j]; i++){
 B[i]='';
 C[i]=Math.round(Math.random()*1)+' ';
 M[j]=B[0]+=C[i];
 }
}
function Cycle(){
Container.style.top=window.document.body.scrollTop;
for (i=0; i < Cols; i++){
var r = Math.floor(Math.random()*Tcc.length);
E[i] = '<font color='+Tc1+'>'+Tcc[r]+'</font>';
Y[i]+=Sp[i];

if (Y[i] > window.document.body.clientHeight){
 for(i2=0; i2 < Cols; i2++){
 RC[i2]=1+Math.round(Math.random()*Cl);  
 for(i3=0; i3 < RC[i2]; i3++){
 B[i3]='';
 C[i3]=Math.round(Math.random()*1)+' ';
 C[Math.floor(Math.random()*i2)]=' '+' ';
 M[i]=B[0]+=C[i3];
 Y[i]=-Ts*M[i].length/1.5;
 A[i].style.visibility='visible';
 }
 Sp[i]=Math.round(MnS+Math.random()*MxS);
 }
}
A[i].style.top=Y[i];
A[i].innerHTML=M[i]+' '+E[i]+' ';
}
setTimeout('Cycle()',55)
}
Cycle();
}
// -->
</SCRIPT>
DEMO : <a href="http://www.sqbook.com/asp/home/sqbook/index.asp?adminuser=cnbohu">http://www.sqbook.com/asp/home/sqbook/index.asp?adminuser=cnbohu</a>

From : <a href="http://bohu.net">http://bohu.net</a>

</body>
</html>

提示：您可以先修改部分代码再运行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Phenix PanelBar</title>
<script language="javascript">
/*--------------------------------------------------|
| Phenix PanelBar | www.seu.edu.cn                  |
|---------------------------------------------------|
|                                                   |
|  I believe one day I can fly like phenix!         |
|                                                   |
| Finished: 17.11.2004                              |
|--------------------------------------------------*/

//item object
//alert("arrived here");
function PhenItem(id,pid,label,url,type,img,over,img2,over2,title,target){
	
   this.id=id;
   this.pid=pid;
   this.label=label;
   this.url=url;
   this.title=title;
   this.target=target;
   this.img=img;
   this.over=over;
   this.img2=img2;
   this.over2=over2;
   this.type=type;
   //this._ih = false;	//is it the head item?
   this._hc = false;   //has the child item?
   this._ls = false;	//has sibling item?
   this._io = false;	//whether the panelbar is open?
};

//menu object
function PhenMenu(objName) {

this.config = {

closeSameLevel	: true

};
	//alert("asdsdf");
	this.obj = objName;

this.items = [];
	
	this.root = new PhenItem(-1);
		
};

//add a new item to the item array
PhenMenu.prototype.add = function(id,pid,label,url,type,img,over,img2,over2,title,target){
	this.items[this.items.length] = new PhenItem(id,pid,label,url,type,img,over,img2,over2,title,target);
};

// Outputs the menu to the page
PhenMenu.prototype.toString = function() {
	//alert("arrived here");
	var str = '<div>\n';

if (document.getElementById) {

str += this.addItem(this.root);

} else str += 'Browser not supported.';

str += '\n</div>';
    //alert(str);
	//document.write(str);
	//alert(this.items[0]._hc);
	return str;

};

// Creates the menu structure
PhenMenu.prototype.addItem = function(pItem) {

var str = '';

//var n=0;

for (var n=0; n<this.items.length; n++) {
		
		if(this.items[n].pid == pItem.id){
			
			var ci = this.items[n];
			//alert(ci.pid);
			//alert(ci.id);
			this.setHS(ci);
			//alert("item:"+ci._hc);
			//alert(ci._ls);
			str += this.itemCreate(ci, n);
			
			if(ci._ls) break;
			
		}

}

return str;

};

// Creates the node icon, url and text
PhenMenu.prototype.itemCreate = function(pItem, itemId) {
//alert(pItem.type.toLowerCase());
	var str = '';
	
    if(pItem.type == 'header')
    	str = '<table width="100%" class="header" valign="middle" onmouseover="this.className=\'headerSelected\'" onmouseout="this.className=\'header\'" onclick="'+this.obj+'.o('+itemId+')"><tr><td>';

else
		str = '<table width="100%" class="item" valign="middle" onmouseover="this.className=\'itemOver\'" onmouseout="this.className=\'item\'" onclick="'+this.obj+'.o('+itemId+')"><tr><td>';

if (pItem.img) {

str += '&nbsp;&nbsp;<img id="i' + this.obj + itemId + '" src="' + pItem.img + '" alt="" />';

}
	if (pItem.url) {
		str += '<a id="s' + this.obj + itemId + '" class="navigation_item" href="' + pItem.url + '"';
		if (pItem.title) str += ' title="' + pItem.title + '"';
		if (pItem.target) str += ' target="' + pItem.target + '"';
		str += ' onmouseover="window.status=\'' + pItem.label + '\';return true;" onmouseout="window.status=\'\';return true;"';
		str += '>';
	}
	str += '&nbsp;&nbsp;&nbsp;&nbsp;' + pItem.label;
	if (pItem.url) str += '</a>';
	str += '</td></tr></table>';
	//alert(pItem.url);
	//alert(str);
	if (pItem._hc) {
		str += '<table id="ct' + this.obj + itemId + '" width="100%" style="display:' + ((pItem._io) ? 'block' : 'none') + '; FILTER: blendTrans(Duration=3.0); VISIBILITY: hidden"><tr><td>';
		str += this.addItem(pItem);
		str += '</td></tr></table>';
		//alert(str);
		//document.write(str);
	}

return str;
};

// Checks whether a item has child and if it is the last sibling
PhenMenu.prototype.setHS = function(pItem) {

var lastId;

for (var n=0; n<this.items.length; n++) {

if (this.items[n].pid == pItem.id) pItem._hc = true;

if (this.items[n].pid == pItem.pid) lastId = this.items[n].id;

}

if (lastId==pItem.id) pItem._ls = true;

};

// Toggle Open or close
PhenMenu.prototype.o = function(id) {
	//alert(this.items.length);
	var ci = this.items[id];
    //alert(ci);
	//this.setHS(ci);
	//alert(this.items[id]._hc);
	this.itemStatus(!ci._io, id);

ci._io = !ci._io;
    
	if (this.config.closeSameLevel) this.closeLevel(ci);

};

// Change the status of a item(open or closed)
PhenMenu.prototype.itemStatus = function(status, id) {

cTable	= document.getElementById('ct' + this.obj + id);

if(status){
			
		cTable.filters.item(0).Apply();
		cTable.style.display = 'block';
		cTable.style.visibility = "";
		cTable.filters.item(0).Play();
	}
	else
		cTable.style.display = 'none';
	
	//cDiv.style.display = (status) ? 'block': 'none';

};

// Closes all items on the same level as certain item
PhenMenu.prototype.closeLevel = function(pItem) {
               //alert(this.items[0]._hc);
	for (var n=0; n<this.items.length; n++) {
            //alert(this.items[n]._hc);
		if ((this.items[n].pid == pItem.pid) && (this.items[n].id != pItem.id) && this.items[n]._hc) {
			
			this.itemStatus(false, n);

this.items[n]._io = false;

this.closeAllChildren(this.items[n]);

}

};

PhenMenu.prototype.closeAllChildren = function(pItem) {

for (var n=0; n<this.items.length; n++) {

if (this.items[n].pid == pItem.id && this.items[n]._hc) {

if (this.items[n]._io) this.itemStatus(false, n);

this.items[n]._io = false;

this.closeAllChildren(this.items[n]);

}

};
</script>
<style>
.header {
	height:25px;
	FONT-FAMILY: Arial,Verdana;
	background-image:url(images/sideNavCategoryBg.gif);
	font-size:11px;
	color: #666666;
    
}
.headerSelected {	
	height:25px;
	FONT-FAMILY: Arial,Verdana;
	background-image:url(images/sideNavCategorySelectedBg.gif);
	font-size:11px;
	background-repeat:repeat-x; 
	COLOR: #333333;
	CURSOR: pointer;
}

.navigation_item {
	PADDING-LEFT: 20px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: none
}
.item {
    PADDING-LEFT: 2px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; 
}
.itemOver {
	PADDING-LEFT: 2px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #333333; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; font-weight:bold; background-color:#EDEDED
}
.itemSelected {
	PADDING-LEFT: 20px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: underline;
}

A.headerSelected {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; HEIGHT: 10px
}
</style>
</head>
<body>
<table width="221" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
	<p>Phenix panelbar</p>

p = new PhenMenu('p');
        //alert("asds");
		p.add(0,-1,'label1凤凰','','header','http://www.telerik.com/images/ProductImages//e.gif');
		p.add(1,0,'label1.1凤凰','www.sina.com.cn');
		p.add(2,0,'label1.2','www.sina.com.cn');
		p.add(3,0,'label1.3','www.sina.com.cn');
		p.add(4,0,'label1.4','www.sina.com.cn');
		
		p.add(5,-1,'label2','','header','http://www.telerik.com/images/ProductImages//c.gif');
		p.add(6,5,'label2.1','www.seu.edu.cn');
		p.add(7,5,'label2.2','www.seu.edu.cn');
		p.add(8,5,'label2.3','www.seu.edu.cn');
		p.add(9,5,'label2.4','www.seu.edu.cn');
		
		p.add(10,-1,'label3','','header','http://www.telerik.com/images/ProductImages//m.gif');
		p.add(11,10,'label3.1','www.seu.edu.cn');
		p.add(12,10,'label3.2','www.seu.edu.cn');
		p.add(13,10,'label3.3','www.seu.edu.cn');
		p.add(14,10,'label3.4','www.seu.edu.cn');
		
		p.add(15,-1,'label4','','header','http://www.telerik.com/images/ProductImages//r.gif');
		p.add(16,15,'label4.1','www.seu.edu.cn');
		p.add(17,15,'label4.2','www.seu.edu.cn');
		p.add(18,15,'label4.3','www.seu.edu.cn');
		p.add(19,15,'label4.4','www.seu.edu.cn');
        //alert(p.items.length)
		document.write(p);
		
		//p.toString();
        //alert(p.items.length);
		//delete(p);
	</script>	</td>
  </tr>
</table>
</body>
</html>

提示：您可以先修改部分代码再运行

滚动效果

<div id="adsfar">
  <table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">
    <tr>
      <td bgcolor="#FFFFFF">1</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">2</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">3</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">4</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">5</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">6</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">7</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">8</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">9</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">10</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">11</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">12</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">13</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">14</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">15</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">16</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">17</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">18</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">19</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">20</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">21</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">22</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">23</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">24</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">25</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">26</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">27</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">28</td>
    </tr>
  </table>
</div>
<script type="text/javascript">
marque(320,196,"icefable1","box1left")
var scrollElem;
var stopscroll;
var stoptime;
var preTop;
var leftElem;
var currentTop;
var marqueesHeight;
function marque(width,height,marqueName,marqueCName){
	try{
	  marqueesHeight = height;
	  stopscroll     = false;

scrollElem = document.getElementById("adsfar");
	  with(scrollElem){
		style.width     = width;
		style.height    = marqueesHeight;
		style.overflow  = 'hidden';
		noWrap          = true;
	  }

scrollElem.onmouseover = new Function('stopscroll = true');
	  scrollElem.onmouseout  = new Function('stopscroll = false');

preTop     = 0; 
	  currentTop = 0; 
	  stoptime   = 0;

leftElem = document.getElementById("adsfar");
	  scrollElem.appendChild(leftElem.cloneNode(true));
		  
	  init_srolltext();

}catch(e) {}
}
function init_srolltext(){
  scrollElem.scrollTop = 0;
  setInterval('scrollUp()', 18);
}

function scrollUp(){
  if(stopscroll) return;
  currentTop += 1;
  if(currentTop == marqueesHeight+1) {
    stoptime += 1;
    currentTop -= 1;
    if(stoptime == (marqueesHeight)*1) {//停顿时间
      currentTop = 0;
      stoptime = 0;
    }
  }else{

preTop = scrollElem.scrollTop;
    scrollElem.scrollTop += 1;
    if(preTop == scrollElem.scrollTop){
      scrollElem.scrollTop = marqueesHeight;
      scrollElem.scrollTop += 1;
    }
  }
}
</Script>

提示：您可以先修改部分代码再运行

用层模拟可移动的小窗口

<html>
<head>
<title>_xWin</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Description" CONTENT="http://www.xuemu.net">
<style type='text/css'>

</style>
<script language=JScript>

</script>

提示：您可以先修改部分代码再运行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html xmlns:v="urn:schemas-microsoft-com:vml">
<STYLE>
v\:*{Behavior: url(#default#VML)}

</STYLE>

<body onselectstart="return false" oncontextmenu="window.event.returnValue=false" onmouseup=main_mouseup1()>
<v:rect id=selRect onmousemove=main_mousemove() style="DISPLAY: none;Z-INDEX: 255; POSITION: absolute;" coordsize = 
"21600,21600" strokecolor = "#088008"><v:fill opacity = "0"></v:fill></v:rect>
<script>
canChange = 1;
var candraw = 1;
/*
function main_mousedown(){
	//显示
	candraw = true;
	selRect.style.display="";
	//alert(f1.width);
	//alert(event.x);
	selRect.style.posLeft=event.x
	selRect.style.posTop=event.y
	selRect.style.posWidth=selRect.style.posHeight=0
}

function init()
{	
	
	var aDivs = document.getElementsByTagName("div");
	for (var i=0; i<aDivs.length; i++) {
		new neverDragDivision(aDivs[i]);
	}
}

function changeColorToSelected(id)
{
	id1=""+id;
	var td =document.getElementById(id1);
	td.bgColor = "#0000C6";
}
	
function changeColorToNotSelected(id)
{
	id1=""+id;
	var td =document.getElementById(id1);
	td.bgColor = "#BEBEBE";
}

}
var startId;
var endId;
var list = 5;
var up = 5;
var down = 6;
var selectFun = 0;
function changeStart(id)
{
	candraw = 1;
	switch(event.button)
	{
		case 1: selectFun = 0; break;
		case 2: selectFun = 1; break;
	}
	//获得鼠标按下的那个格子的ID，来确定是哪个格子
	//alert('start');
	startId = id;
	
}

//alert(Sx);
}

function changUpEnd()
{
	candraw = 0;
	}

function changeEnd(id)
{
	//获得了最后的一个格子。
	if(candraw == 1){
	endId = id;
	//alert(endId);
	//算法
	/* 
	 *根据起始ID 和 最后ID来确定是哪些格子变
	 * 计算start和end的行，列数
	 */
	 changeColorBySE(startId,endId);
	}
}

function show()
{
	a = Math.abs(-5);
	b=4;
	startP = a>b?3:6;
	//alert(startP);
}

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

function neverDragDivision(fObj) { with (this)
{
	if (!fObj) return;
	this.bDraged = false;
	this.oDragOrig = fObj;
	oDragOrig.onmousedown = function()
	{
		oDragOrig.style.backgroundColor="#FFFFFF";
    //alert(event.clientY);
    //alert(oDragOrig.offsetTop);
    //var ofs = Offset(oDragOrig);
   // oDragOrig.style.position = "absolute";
		//oDragOrig.style.left = ofs.l;
		//oDragOrig.style.top = ofs.t;
	  //alert(oDragOrig.style.top);
		//oDragOrig.X = event.clientX - ofs.l;
		//oDragOrig.Y = event.clientY - ofs.t;
		bDraged = true;
	};
	/*		
	oDragOrig.onmousemove = function()
	{
		if (!bDraged) return;
    oDragOrig.setCapture();
		oDragOrig.style.left = event.clientX - oDragOrig.X;
		oDragOrig.style.top = event.clientY - oDragOrig.Y;

};*/
	/*
	oDragOrig.onmouseup = function()
	{
		bDraged = false;
		oDragOrig.releaseCapture();
	};*/
	function Offset(e) {
		var t = e.offsetTop;
		var l = e.offsetLeft;
		var w = e.offsetWidth;
		var h = e.offsetHeight;
		while(e=e.offsetParent) {
			t+=e.offsetTop;
			l+=e.offsetLeft;
		}
		return { t:t, l:l, w:w, h:h }
	};
}};

//-->
</SCRIPT>

document.write('</tr></table>');
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

数字选中放大

ul#hovershow2 li a:hover{
  position: absolute;
  width:40px;
  height: 40px;
  line-height: 40px;
  font-size: 32px;
  z-index:100;
  margin: -10px 0 0 -10px;
  }
ul#hovershow2 li:hover + li a{
  position: absolute;
  width:30px;
  height: 30px;
  line-height: 30px;
  font-size: 24px;
  z-index:99;
  margin: -5px 0 0 -5px;
  }
  
 </style>
</head>

<body>

</body>

提示：您可以先修改部分代码再运行

文本编辑器

<head>
<script>
var edit; //当前选择的文本编辑区域对象
var RangeType; //对象类别

function start() {
	Editor.document.designMode="ON";
	Editor.document.open();
	Editor.document.write(ikj.value);
	Editor.document.close();

fnInit()}

function setFocus() {
   Editor.focus();
}

function selectRange(){
	edit = Editor.document.selection.createRange();
	RangeType = Editor.document.selection.type;
}

function execCommand(command,para) {	
	
		setFocus();
selectRange();	
		  if (para=="")	
edit.execCommand(command)
		  else
		  edit.execCommand(command, false, arguments[1]);
		Editor.focus();
		if (RangeType != "Control") edit.select();
		
}

function doSelectC(str,el) {

var Index = el.selectedIndex;
	 if (Index != 0)
	 {	el.selectedIndex = 0;
	    
		execCommand(str,el.options[Index].text);
			 }
}
function doSelectCl(str,el) {

var Index = el.selectedIndex;
	 if (Index != 0)
	 {	el.selectedIndex = 0;
	   
		execCommand(str,"<"+el.options[Index].value+">");
		
	 }
}

function fnInit(){
      for (i=0; i<document.all.length; i++)
            document.all(i).unselectable = "off";
   	getSystemFonts();
}

function getSystemFonts()
{  
var a=dlgHelper.fonts.count;
var fArray = new Array();
var oOption = document.createElement("OPTION");
oOption.text = "字体";
oOption.value = "0";
selectFontName.add(oOption);
for (i = 1;i < dlgHelper.fonts.count;i++)
	{ 
		fArray[i] = dlgHelper.fonts(i);
		var oOption = document.createElement("OPTION");
		
		oOption.text = fArray[i];
		oOption.Value = i;
		selectFontName.add(oOption);	
	} 
}

////////////////  以下代码才是本文的重点，其他部分的代码只是为了满足运行的需要  /////////////////////

/*
****************************************
Created by Bound0 (bound0@tom.com)

http://bbs.blueidea.com/viewthread.php?tid=2661868

转载或应用时请保留此声明！
****************************************
*/

//格式化，保全script、textarea、xmp、pre和style内容

function formatfor(va) {
  var t=va.replace(/\r/g,'');
  t = t.replace(/(<(script|textarea|xmp|pre|style).*?>)([^\r]*?)(<\/\2>)/img,
function (){return arguments[1]+arguments[3].replace(/\n/g, "\r")+arguments[4]})
  t = t.replace(/\n/g, "");
  return t
}

function fontsize(el)
{var Index=el.selectedIndex
var addpre="<font size="+el.options[Index].value+">"
if(Index>7)addpre="<font style='font-size:"+el.options[Index].value+"pt'>"

var oSel = Editor.document.selection.createRange()
var sBookmark = oSel.getBookmark()
var oSelhtml=oSel.htmlText
if(oSelhtml!="")
{
//定位选中内容

var conts=oSelhtml
var textLength = Editor.document.body.innerText.length
oSel.moveStart("character", -1*textLength)
var contp=formatfor(oSel.htmlText)
var conta=formatfor(Editor.document.body.innerHTML)

var contpa=''
var partC=""
var partB=""
var partA=""

var m=0
m=conta.indexOf(contp.substr(0,3))

var f=contp.length
for(;f>0;f--)
{if(conta.substr(m,f)==contp.substr(0, f)){contpa=contp.substr(0,f);partC=conta.substr(m+f);break}}

var ko=contp.substr(f)
var kol=ko.length
var ty=conta.substr(m+f,kol)
var hu=""
for(var b=1;b<kol;b++)if(ko.substr(b)==ty.substr(0,kol-b)){hu=ko.substr(b);contpa+=hu;partC=partC.substr(kol-b);break}

var k=contpa.length
cont=conts.replace(/\n/g, "")
var u=cont.length
if(cont==contpa.substr(k-u)){partB=cont;partA=contpa.substr(0,k-u)}else{

for(u=cont.length;u>0;u--)
{if(cont.lastIndexOf(contpa.substr(k-u))!=-1){partB0=contpa.substr(k-u);partA0=contpa.substr(0,k-u);break}}

contt=formatfor(conts)
if(hu!="")if(contt.substr(contt.length-kol)==ko)contt=contt.substr(0,contt.length-kol)+hu
u=contt.length
var youm=contpa.lastIndexOf(contt)
if(youm!=-1){partB=contt;partA=contpa.substr(0,youm);partC=contpa.substr(youm+u)+partC}else{
for(;u>0;u--){if(contt.lastIndexOf(contpa.substr(k-u))!=-1){partB1=contpa.substr(k-u);partA1=contpa.substr(0,k-u);break}}

if(partB1.length>partB0.length){partB=partB1;partA=partA1}else{partB=partB0;partA=partA0}
	}
}
if(partB.substr(partB.length-1)=="<"){partB=partB.substr(0,partB.length-1);partC="<"+partC}
if(partB.substr(partB.length-2)=="</"){partB=partB.substr(0,partB.length-2);partC="</"+partC}

//保护textarea、xmp、script和style的内容不被改变

var cook=[]

partA=partA.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?<\/\2>/ig,
function (){co=cook.length
cook[co]=arguments[0];return "<cook"+co+">"})
var ook=""
partA=partA.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?$/i,
function (){co=cook.length
ook=arguments[2]
cook[co]=arguments[0];return "<cook"+co+">"})

if(ook!=""){fd="(^[\\s\\S]*?<\/"+ook+">)"
jk=new RegExp(fd,["i"])
if(jk.test(partB)){jk.exec(partB)
co=cook.length
cook[co]=RegExp.$1
partB=partB.replace(jk,"<cook"+co+">")}}
partB=partB.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?<\/\2>/ig,
function (){co=cook.length
cook[co]=arguments[0];return "<cook"+co+">"})
ook=""
partB=partB.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?$/i,
function (){co=cook.length
ook=arguments[2]
cook[co]=arguments[0];return "<cook"+co+">"})

if(ook!=""){fd="(^[\\s\\S]*?<\/"+ook+">)"
jk=new RegExp(fd,["i"])
if(jk.test(partC)){jk.exec(partC)
co=cook.length
cook[co]=RegExp.$1
partC=partC.replace(jk,"<cook"+co+">")}}
partC=partC.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?<\/\2>/ig,
function (){co=cook.length
cook[co]=arguments[0];return "<cook"+co+">"})

//处理<font>

var dol=[]
var dos=[]
var lon=[]

fd="<FONT([^>]*?)>"
jk=new RegExp(fd,["im"])
while(jk.test(partB)){ce=dol.length
jk.exec(partB)
dol[ce]=RegExp.$1
partB=partB.replace(jk,"<site"+ce+">")
}

ce=dol.length-1
for(;ce>-1;ce--)
{kjc="<site"+ce+">"
fd=kjc+'(.*?)<\/font>'
jk=new RegExp(fd,["im"])
if(jk.test(partB)){dos[dos.length]=ce
jk.exec(partB)
ko3=kjc+RegExp.$1+"</site"+ce+">"
partB=partB.replace(jk,ko3)
}else{lon[lon.length]=ce}
}

partB=partB.replace(/<\/font>/img,"<lonf>")

for(var c=dos.length-1;c>-1;c--)
{
uts=dol[dos[c]]
if(""==(uts.replace(/size=[0-7+]+/i,"").replace(/style=("|')FONT-SIZE: [0-9.]+.*;*("|')/im,"").replace(/[\s\n\r]+/mg,""))){partB=partB.replace("<site"+dos[c]+">","")
partB=partB.replace("</site"+dos[c]+">","")}else{partB=partB.replace("<site"+dos[c]+">","<font"+uts.replace(/ size=[0-7+]+/im,"").replace(/FONT-SIZE: [0-9.]+pt/im,"").replace(/ style=("|');*("|')/im,"")+">")
partB=partB.replace("</site"+dos[c]+">","</font>")}
}

//处理其他标签

var addend=""
var mio=[]

partB=partB.replace(/<([^<> ]*?) [^<>]*?style=[^<>]*?FONT-SIZE: [0-9.]+[^<>]*?>/img,
function (){notv="|select|input|option|object|"
if(notv.indexOf("|"+arguments[1].toLowerCase()+"|")==-1){
op=mio.length
mio[op]=arguments[0]
return "<opis"+op+">"}else{return arguments[0]}})

kba=["h1","h2","h3","h4","h5","h6","pre","button","listing","big","small","tt","code","kbd","samp","td","\/td","caption","\/caption","th","\/th","tr","\/tr","table","\/table","thead","\/thead","tbody","\/tbody","tfoot","\/tfoot"]
for(b in kba){
fd="<("+kba[b]+")[^<>]*?>"
jk=new RegExp(fd,["img"])
partB=partB.replace(jk,
function (){op=mio.length
mio[op]=arguments[0]
return "<opis"+op+">"})
}

//收尾工作

liming=[]

partB=partB.replace(/<(opis|site|lonf)([0-9]*)>/g,
function(){var op=liming.length
if(arguments[1]=="opis"){liming[op]=mio[parseInt(arguments[2])]}
if(arguments[1]=="site"){liming[op]="<font"+dol[parseInt(arguments[2])]+">"}
if(arguments[1]=="lonf"){liming[op]="</font>"}
return "<duan"+op+">"
})

if(liming.length>0){
partB=partB.replace(/^(.+?)(<duan0>)/m,function(){if(""!=arguments[1]){return addpre+arguments[1]+"</font>"+arguments[2]}
else{return arguments[0]}})

var op=liming.length-1
for(var kc=0;kc<op;kc++){
fd="(<duan"+kc+">)(.+?)(<duan"+(kc+1)+">)"
jk=new RegExp(fd,["m"])
partB=partB.replace(jk,
function(){if(""!=arguments[2]){return arguments[1]+addpre+arguments[2]+"</font>"+arguments[3]}
else{return arguments[0]}})}

fd="(<duan"+op+">)(.+?)$"
jk=new RegExp(fd,["m"])
partB=partB.replace(jk,function(){if(""!=arguments[2]){return arguments[1]+addpre+arguments[2]+"</font>"}
else{return arguments[0]}})
}
else{partB=addpre+partB+"</font>"
}

partB=partB.replace(/<duan([0-9]+)>/g,function(){return liming[parseInt(arguments[1])]})

var endtemp=partA+partB+partC

for(vof in cook)endtemp=endtemp.replace("<cook"+vof+">",cook[vof])

Editor.document.body.innerHTML=endtemp
var vrvd=Editor.document.selection.createRange()
vrvd.moveToBookmark(sBookmark)
vrvd.select()
}
else{
Editor.document.selection.createRange().pasteHTML(addpre+"</font>")
}Editor.focus()
el.blur()
el.selectedIndex=0}

</script>
</head>
<body SCROLL="no" bgcolor=d0d0c8 onload="start()" leftmargin=5 topmargin=5>

<OBJECT id=dlgHelper CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></OBJECT>
<select id="select1" style="height: 18" onchange="doSelectCl('FormatBlock',this);this.returnValue=false;" name="select1" size="1">  
                    <option selected value="">段落样式</option>
                    <option value="P">普通
                    <option value="H1">标题一
                    <option value="H2">标题二
                    <option value="H3">标题三
                    <option value="H4">标题四
                    <option value="H5">标题五
                    <option value="H6">标题六
<option value="p">段落
<option value="dd">定义
<option value="dt">术语定义
<option value="dir">目录列表
<option value="menu">菜单列表
<option value="PRE">已编排格式
                    </select>
<select style="height: 18" 
                 onchange="doSelectC('FontName',this,'font face=&quot'+this.value+'&quot')" 
                 name="selectFontName"></select></td>
<select style="width: 60; height: 18" onchange="fontsize(this)" name="selectFontSize" size="1">
                    <option selected>字号</option>
                    <option value="7">一号
<option value="6">二号
<option value="5">三号
<option value="4">四号
<option value="3">五号
<option value="2">六号
<option value="1">七号
<option value=1>1 pt
<option value=2>2 pt
<option value=3>3 pt
<option value=4>4 pt
<option value=5>5 pt
<option value=6>6 pt
<option value=7>7 pt
<OPTION value=8>8 pt
<OPTION value=9>9 pt
<OPTION value=10>10 pt
<OPTION value=11>11 pt
<OPTION value=12>12 pt
<OPTION value=13>13 pt
<OPTION value=14>14 pt
<OPTION value=15>15 pt
<OPTION value=16>16 pt
<OPTION value=17>17 pt
<OPTION value=18>18 pt
<OPTION value=19>19 pt
<OPTION value=20>20 pt
<OPTION value=21>21 pt
<OPTION value=22>22 pt
<OPTION value=23>23 pt
<OPTION value=25>25 pt
<OPTION value=28>28 pt
<OPTION value=30>30 pt
<OPTION value=35>35 pt
<OPTION value=40>40 pt
<OPTION value=45>45 pt
<OPTION value=50>50 pt
<OPTION value=60>60 pt
<OPTION value=70>70 pt
<OPTION value=85>85 pt
<OPTION value=100>100 pt
<OPTION value=120>120 pt
<OPTION value=150>150 pt
<option value=200>200 pt
<option value=250>250 pt
<option value=300>300 pt
<option value=500>500 pt
<option value=900>900 pt
<option value=2000>2000 pt</select>
<P>
<IFRAME id="Editor" Name="Editor" style="WIDTH: 100%; HEIGHT: 95%"></IFRAME><textarea name=ikj style="display:none"><P><FONT style="FONT-SIZE: 15pt"><STRONG>Bound0 子确工作室</FONT> 生物信息相关业务简介</STRONG></P><TABLE cellSpacing=0 cellPadding=0 width="100%" border=0><TBODY><TR><TD><H2><FONT color=#ff0000>[多步生物信息查询的一步化]</FONT></H2><P>将繁琐的多步生物信息查询<font style='font-size:13pt'>合并为一步</font>，减少在各个网页间的手工跳转。<P>只要能够理清多步生物信息查询的流程就可能做到一步化。<BR><BR><H2><FONT color=#ff0000>[批量数据转录、整合]</FONT></H2><P>将大量零散的文档收录到数据库中或整理、转化为符合要求的格式。<P>例如：将数百个结构复杂的word文档内容收录到数据库中。</P></TD><TD><CENTER>
<SCRIPT type=text/javascript>

</SCRIPT>
<SCRIPT src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>

</SCRIPT>
<SCRIPT src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript></SCRIPT>
</CENTER></TD></TR></TBODY></TABLE><H2><FONT color=#ff0000>[定制Bound0 Eureka预选器数据库]</FONT></H2><P>利用Bound0 Eureka预选器数据库可以初步判断样品的成分，缩小进一步实验的处理范围，对接下来的实验环节做出调整，或预选出最佳的实验方案，从而缩短研究、开发的周期，节省人力物力。还可以初步验证某些假设推断，并有助于提出新的假设推断，构建新的假说。同时让交流和教学过程变得更简单、方便。<P>有关Bound0 Eureka预选器数据库核心技术的专利申请已被受理，专利申请号：200610077985.3。<P>定制Bound0 Eureka预选器数据库（Bound0 Eureka Preselector）的业务实质：<P>1、定制公共数据库内容的本地化整合。<BR>2、定制数据库查询方式和查询项目。<BR>3、定制分析、统计功能。<BR>4、定制数据共享功能。<BR>5、定制教学展示功能。<BR>6、定制其他辅助功能。<P>例如：Bound0酵母蛋白Eureka预选器数据库的数据内容整合了SGD数据库（Saccharomyces Genome Database，酵母基因组库<A href="http://www.yeastgenome.org/">http://www.yeastgenome.org/</A>）中的部分数据。共包含6713个蛋白的信息。<BR>Bound0酵母蛋白Eureka预选器数据库具有以下基本功能：<BR>（1）Eureka Preselector(主功能): 根据条件给出符合条件的蛋白质列表。根据蛋白质的特征与目标特征的接近程度对列表内的蛋白质进行排名。以网页形式输出、保存 Eureka 结果。对保存的结果进行对比分析。<BR>（2）以树状结构显示（treeview）蛋白质的各种生物学信息。<BR>（3）以搜索引擎形式，对描述蛋白质充当的细胞组分、参与的生物过程、分子功能等描述性特征的标准化术语（GO Term）提供注释和指导。<BR>（4）以搜索引擎形式，对蛋白质的各种ID、名称进行通译。<BR>（5）在安装了Bound0酵母蛋白Eureka预选器数据库的计算机上，实现自定义的eureka:// 协议。可以在用户自己的网页中以超级链接（文字链接、图片热点链接等）的方式动态地调用数据库中的内容进行演示。<BR>（6）自动生成上述演示所需要的链接代码。<BR>（7）独立发行（便于数据共享）的数据分析配件，可对以网页形式保存的 Eureka 结果进行处理。&nbsp;</P><P><TABLE cellSpacing=0 cellPadding=0 width="100%" border=0><TBODY><TR><TD><H2><FONT color=#ff0000>[定制实验人员绩效考核系统]</FONT></H2><P>将团队从落后的纸面管理中解放出来。</P></TD><TD>&nbsp;</TD></TR></TBODY></TABLE></P><P><FONT style="BACKGROUND-COLOR: #ff0000" color=#ffffff><STRONG>以上业务更多详情请质询</STRONG></FONT><A href="mailto:bound0@tom.com"><FONT style="BACKGROUND-COLOR: #ff0000" color=#ffffff><STRONG>bound0@tom.com</STRONG></FONT></A></P></textarea></body>

提示：您可以先修改部分代码再运行

图片淡如淡出

</script>
<center>
<a href="http://www.wawaqin.com"  onFocus="if(this.blur)this.blur()"><img src="http://www.wawaqin.com/images/xuyuanshu/wwq%20(448).jpg"  onMouseOut=nereidFade(this,100,10,3) onMouseOver=nereidFade(this,20,10,3)  style="FILTER: alpha(opacity=100)" border="0" >鼠标放到图片上</a>

提示：您可以先修改部分代码再运行

给图片添加图片的倒影

<SCRIPT LANGUAGE="JavaScript">
<!--
/**
 * reflection.js v1.5
 *
 * Contributors: Cow http://cow.neondragon.net
 *               Gfx http://www.jroller.com/page/gfx/
 *               Sitharus http://www.sitharus.com
 *               Andreas Linde http://www.andreaslinde.de
 *               Tralala, coder @ http://www.vbulletin.org
 *
 * Freely distributable under MIT-style license.
 */
 
/* From prototype.js */
document.getElementsByClassName = function(className) {
	var children = document.getElementsByTagName('*') || document.all;
	var elements = new Array();
  
	for (var i = 0; i < children.length; i++) {
		var child = children[i];
		var classNames = child.className.split(' ');
		for (var j = 0; j < classNames.length; j++) {
			if (classNames[j] == className) {
				elements.push(child);
				break;
			}
		}
	}
	return elements;
}

var reflectionHeight = Math.floor(p.height*options['height']);
			var divHeight = Math.floor(p.height*(1+options['height']));
			
			var reflectionWidth = p.width;
	
			/* Copy original image's classes & styles to div */
			d.className = newClasses;
			p.className = 'reflected';
			
			d.style.cssText = p.style.cssText;
			p.style.cssText = ' ';
			
			if (document.all && !window.opera) {
				var reflection = document.createElement('img');
				reflection.src = p.src;
				reflection.style.width = reflectionWidth+'px';
				
				reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+'px';
				reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(options['opacity']*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(options['height']*100)+')';
				
				d.style.width = reflectionWidth+'px';
				d.style.height = divHeight+'px';
				p.parentNode.replaceChild(d, p);
				
				d.appendChild(p);
				d.appendChild(reflection);
			} else {
				var canvas = document.createElement('canvas');
				var context = canvas.getContext("2d");
			
				canvas.style.height = reflectionHeight+'px';
				canvas.style.width = reflectionWidth+'px';
				canvas.height = reflectionHeight;
				canvas.width = reflectionWidth;
				
				d.style.width = reflectionWidth+'px';
				d.style.height = divHeight+'px';
				p.parentNode.replaceChild(d, p);
				
				d.appendChild(p);
				d.appendChild(canvas);
				
				context.save();
				
				context.translate(0,image.height-1);
				context.scale(1,-1);
				
				context.drawImage(image, 0, 0, reflectionWidth, image.height);

context.restore();
				
				context.globalCompositeOperation = "destination-out";
				var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);
				
				gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
				gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options['opacity'])+")");
	
				context.fillStyle = gradient;
				if (navigator.appVersion.indexOf('WebKit') != -1) {
					context.fill();
				} else {
					context.fillRect(0, 0, reflectionWidth, reflectionHeight*2);
				}
			}
		} catch (e) {
	    }
	},
	
	remove : function(image) {
		if (image.className == "reflected") {
			image.className = image.parentNode.className;
			image.parentNode.parentNode.replaceChild(image, image.parentNode);
		}
	}
}

var previousOnload = window.onload;
window.onload = function () { if(previousOnload) previousOnload(); addReflections(); }

//-->
</SCRIPT>

</head>

提示：您可以先修改部分代码再运行

取得页面的大小宽高等各种信息

提示：您可以先修改部分代码再运行

透明的Div提示

<BODY>
 <script language="JavaScript"> 
    if ( had_tips != 1 ) { 
    var _ua = document.all ? ((navigator.userAgent.indexOf('MSIE 5') > 5) ? "ie5" : "ie4") : "foo"; 
    if (_ua != "foo" ) { 
    if (typeof(_doc) == "undefined" || _doc == null) _doc = document; 
    var _tipx = 0; 
    var _tipy = 0; 
    var _tipOX = 10; 
    var _tipOY = 1; 
    var _tipWidth; 
    
    // Opacity=70 提示框背景透明度 
    _doc.write('<DIV ID="TIP__" STYLE="filter:Alpha(Opacity=70,style=1,Finishopacity=80);position:absolute;display:none;z-index:100"></DIV>'); 
    
    _doc.onmousemove = tsai; 
    var _tip = _doc.all['TIP__']; 
    } 
    } 
    var had_tips = 1; 
    function tsaiannie (sMsg, sTitle, iWidth, iHeight, iBorder, sTFC, sTBC, sMFC, sMBC) { 
    
    _tipWidth = 180; // 提示框的寬度 
    var _tipBorder = 2, // 提示框边框的寬度 
    _tipTFC = "#FFF8F0", 
    _tipTBC = "#ff8c00", // 提示框边框的顏色 
    _tipMFC = "#3F3F38", 
    _tipMBC = "ffffff"; // 提示框背景的顏色 
    
    if (_ua == "foo") return; 
    _tip.innerHTML = '<TABLE CELLPADDING="'+_tipBorder+'" CELLSPACING="0" WIDTH="'+_tipWidth+'" BORDER="0" BGCOLOR="'+_tipTBC+'"><TR><TD>' 
    + ((sTitle != null) ? '<TABLE CELLPADDING="0" CELLSPACING="0" WIDTH="100%" BORDER="0"><TR><TD STYLE="padding-top:2px;padding-bottom:2px;font:8pt Arial,Verdana,Tahoma;color:'+_tipTFC+'">'+sTitle+'</TD></TR></TABLE>' : '') 
    + '<TABLE CELLPADDING="2" CELLSPACING="0" WIDTH="100%" BORDER="0" BGCOLOR="'+_tipMBC+'"><TR><TD STYLE="color:'+_tipMFC+';font:normal 8pt Arial,Verdana,Tahoma">'+sMsg+'</TD></TR></TABLE></TD></TR></TABLE>'; 
    annie(); 
    _tip.style.display = ""; 
    } 
    
    function tsai() { 
    if (_ua == "ie4") { 
    _tipx = event.x; 
    _tipy = event.y; 
    } else if (_ua == "ie5") { 
    _tipx = (event.clientX + _tipOX + _tipWidth <= _doc.body.clientWidth) ? 
    (event.clientX + _doc.body.scrollLeft + _tipOX) : 
    (event.clientX + _doc.body.scrollLeft - _tipWidth - 5); 
    _tipy = event.clientY + _doc.body.scrollTop + _tipOY; 
    } else { 
    return; 
    } 
    if (_tip.style.display != "none") annie(); 
    } 
    
    function annie() { 
    _tip.style.pixelTop = _tipy; 
    _tip.style.pixelLeft = _tipx; 
    } 
    
    function tsai900403 () { 
    _tip.style.display = "none"; 
    } 
    
    document.write('<A href="http://www.wawaqin.com/" ONMOUSEOVER="tsaiannie(\'看到了<font color=#ff1493>效果</font>了吗？\' )" ONMOUSEOUT="tsai900403()" target="_blank">鼠标移过来看效果</A><DIV></DIV>'); 
    </script> 
</BODY>

提示：您可以先修改部分代码再运行

来访统计

提示：您可以先修改部分代码再运行

地震效果

很不错的对联广告!我一直用的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title></title>
 </head>
<body leftmargin="0" topmargin="0">
<script type="text/javascript">
window.onerror=function(){return true;};
var delta=0.115 
    var collection; 
    function floaters() { 
        this.items    = []; 
        this.addItem    = function(id,x,y,content) 
                  { 
                    document.write('<DIV id='+id+' style="Z-INDEX: 0; POSITION: absolute;  width:80px; height:60px;left:'+(typeof(x)=='string'?eval(x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+content+'</DIV>'); 
                    
                    var newItem                = {}; 
                    newItem.object            = document.getElementById(id); 
                    newItem.x                = x; 
                    newItem.y                = y;

this.items[this.items.length]        = newItem; 
                  } 
        this.play    = function() 
                  { 
                    collection                = this.items 
                    setInterval('play()',10); 
                  } 
        } 
        function play() 
        { 
            if(screen.width<=800) 
            { 
                for(var i=0;i<collection.length;i++) 
                { 
                    collection[i].object.style.display    = 'none'; 
                } 
                return; 
            } 
            for(var i=0;i<collection.length;i++) 
            { 
                var followObj        = collection[i].object; 
                var followObj_x        = (typeof(collection[i].x)=='string'?eval(collection[i].x):collection[i].x); 
                var followObj_y        = (typeof(collection[i].y)=='string'?eval(collection[i].y):collection[i].y);

if(followObj.offsetLeft!=(document.body.scrollLeft+followObj_x)) { 
                    var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta; 
                    dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx)); 
                    followObj.style.left=followObj.offsetLeft+dx; 
                    }

if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) { 
                    var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta; 
                    dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy)); 
                    followObj.style.top=followObj.offsetTop+dy; 
                    } 
                followObj.style.display    = ''; 
            } 
        }    
        
    var theFloaters        = new floaters(); 
    theFloaters.addItem('followDiv5','document.body.clientWidth-135',0,'</a><br><a href="http://www.mimimama.com/clan.php?clanid=498" target="_blank"><img src="http://2046.mimimama.com/left.jpg" width="100" height="267" border="0" /></a>'); 
    theFloaters.addItem('followDiv6',20,0,'<br><a href="http://www.mimimama.com/clan.php?clanid=498" target="_blank"><img src="http://2046.mimimama.com/right.jpg" width="100" height="267" border="0" /></a>'); 
    theFloaters.play();
</script>
<P>111</P>
<P>222</P>
<P>333</P>
<P>444</P><P>111</P>
<P>222</P>
<P>333</P>
<P>444</P><P>111</P>
<P>222</P>
<P>333</P>
<P>444</P><P>111</P>
<P>222</P>
<P>333</P>
<P>444</P><P>111</P>
<P>222</P>
<P>333</P>
<P>444</P>
</body>
</html>

提示：您可以先修改部分代码再运行

旋转变换文字

提示：您可以先修改部分代码再运行

逐个出现的文字

提示：您可以先修改部分代码再运行

炽热的文字

提示：您可以先修改部分代码再运行

<div id="demo" style="overflow:hidden;width:670px;color:#ffffff;">
      <table cellpadding="0" cellspacing="0" border="0">
        <tr><td id="demo1" valign="top" align="center">
          <table cellpadding="2" cellspacing="0" border="0">
            <tr align="center">
			  <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
              <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
			  <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
			  <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
              <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
            </tr>
          </table>
        </td>
        <td id="demo2" valign="top"></td>
        </tr>
      </table>
    </div>
  <script>
  var speed=1//速度数值越大速度越慢
  demo2.innerHTML=demo1.innerHTML
  function Marquee(){
  if(demo2.offsetWidth-demo.scrollLeft<=0)
  demo.scrollLeft-=demo2.offsetWidth
  else{
  demo.scrollLeft++
  }
  }
  var MyMar=setInterval(Marquee,speed)
  demo.onmouseover=function() {clearInterval(MyMar)}
  demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
  </script>

提示：您可以先修改部分代码再运行

运行代码的代码 2

发一个yahoo首页中大家给出的一个效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>runcode</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Sheneyan" />
<script type="text/javascript">
var mh = 30;//最小高度
var step = 1;//每次变化的px量
var ms = 10;//每隔多久循环一次
function toggle(o){
  if (!o.tid)o.tid = "_" + Math.random() * 100;
  if (!window.toggler)window.toggler = {};
  if (!window.toggler[o.tid]){
    window.toggler[o.tid]={
      obj:o,
      maxHeight:o.offsetHeight,
      minHeight:mh,
      timer:null,
      action:1
    };
  }
  o.style.height = o.offsetHeight + "px";
  if (window.toggler[o.tid].timer)clearTimeout(window.toggler[o.tid].timer);
  window.toggler[o.tid].action *= -1;
  window.toggler[o.tid].timer = setTimeout("anim('"+o.tid+"')",ms );
}
function anim(id){
  var t = window.toggler[id];
  var o = window.toggler[id].obj;
  if (t.action < 0){
    if (o.offsetHeight <= t.minHeight){
      clearTimeout(t.timer);
      return;
    }
  }
  else{
    if (o.offsetHeight >= t.maxHeight){
      clearTimeout(t.timer);
      return;
    }
  }
  o.style.height = (parseInt(o.style.height, 10) + t.action * step) + "px";
  window.toggler[id].timer = setTimeout("anim('"+id+"')",ms );
}
</script>
<style type="text/css">
div.xx{border:solid 1px;overflow:hidden;}
div.xx h5{border:solid 1px;border-width:0 0 1px;padding:0;margin:0;height:30px;line-height:30px;cursor:pointer;background:#eee;}
</style>
</head>
<body>
<div class="xx"><h5 onclick="toggle(this.parentNode)">伸缩效果</h5>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>

</body>
</html>

提示：您可以先修改部分代码再运行

这个效果有很多实现的方式,传统笨方法:

提示：您可以先修改部分代码再运行

但是我不推荐使用这种方法,建议使用prototype,你可以到网络上搜索道很多教程

$('temperDiv').innerHTML = "内容" 写入内容
Element.addClassName('bd','z1'); 添加class样式
Element.removeClassName('zt','bli'); 删除class样式

*{margin:0;padding:0;border:0;}
body {
    font-family: arial, 宋体, serif;
        font-size:12px;
}

#nav {
     line-height: 24px;  list-style-type: none; background:#666;
}

#nav a {
    display: block; width: 80px; text-align:center;
}

#nav a:link  {
    color:#666; text-decoration:none;
}
#nav a:visited  {
    color:#666;text-decoration:none;
}
#nav a:hover  {
    color:#FFF;text-decoration:none;font-weight:bold;
}

#nav li {
    float: left; width: 80px; background:#CCC;
}
#nav li a:hover{
    background:#999;
}
#nav li ul {
    line-height: 27px;  list-style-type: none;text-align:left;
    left: -999em; width: 180px; position: absolute;
}
#nav li ul li{
    float: left; width: 180px;
    background: #F6F6F6;
}

#nav li ul a{
    display: block; width: 156px;text-align:left;padding-left:24px;
}

#nav li ul a:link  {
    color:#666; text-decoration:none;
}
#nav li ul a:visited  {
    color:#666;text-decoration:none;
}
#nav li ul a:hover  {
    color:#F3F3F3;text-decoration:none;font-weight:normal;
    background:#C00;
}

#nav li:hover ul {
    left: auto;
}
#nav li.sfhover ul {
    left: auto;
}
#content {
    clear: left;
}

-->
</style>

javascript部分：

//--><!]]></script>

html显示部分：

<ul id="nav">
<li><a href="http://www.wawaqin.com">产品介绍</a>
    <ul>
    <li><a href="http://www.wawaqin.com">产品一</a></li>
    <li><a href="http://www.wawaqin.com">产品一</a></li>
    <li><a href="http://www.wawaqin.com">产品一</a></li>
    <li><a href="http://www.wawaqin.com">产品一</a></li>
    <li><a href="http://www.wawaqin.com">产品一</a></li>
    <li><a href="http://www.wawaqin.com">产品一</a></li>
    </ul>
</li>
<li><a href="http://www.wawaqin.com">服务介绍</a>
    <ul>
    <li><a href="http://www.wawaqin.com">服务二</a></li>
    <li><a href="http://www.wawaqin.com">服务二</a></li>
    <li><a href="http://www.wawaqin.com">服务二</a></li>
    <li><a href="http://www.wawaqin.com">服务二服务二</a></li>
    <li><a href="http://www.wawaqin.com">服务二服务二服务二</a></li>
    <li><a href="http://www.wawaqin.com">服务二</a></li>
    </ul>
</li>
<li><a href="http://www.wawaqin.com">成功案例</a>
    <ul>
    <li><a href="http://www.wawaqin.com">案例三</a></li>
    <li><a href="http://www.wawaqin.com">案例</a></li>
    <li><a href="http://www.wawaqin.com">案例三案例三</a></li>
    <li><a href="http://www.wawaqin.com">案例三案例三案例三</a></li>
    </ul>
</li>
<li><a href="http://www.wawaqin.com">关于我们</a>
    <ul>
    <li><a href="http://www.wawaqin.com">我们四</a></li>
    <li><a href="http://www.wawaqin.com">我们四</a></li>
    <li><a href="http://www.wawaqin.com">我们四</a></li>
    <li><a href="http://www.wawaqin.com">我们四111</a></li>
    </ul>
</li>

<li><a href="http://www.wawaqin.com">在线演示</a>
    <ul>
    <li><a href="http://www.wawaqin.com">演示</a></li>
    <li><a href="http://www.wawaqin.com">演示</a></li>
    <li><a href="http://www.wawaqin.com">演示</a></li>
    <li><a href="http://www.wawaqin.com">演示演示演示</a></li>
    <li><a href="http://www.wawaqin.com">演示演示演示</a></li>
    <li><a href="http://www.wawaqin.com">演示演示</a></li>
    <li><a href="http://www.wawaqin.com">演示演示演示</a></li>
    <li><a href="http://www.wawaqin.com">演示演示演示演示演示</a></li>
    </ul>
</li>
<li><a href="http://www.wawaqin.com">联系我们</a>
    <ul>
    <li><a href="http://www.wawaqin.com">联系联系联系联系联系</a></li>
    <li><a href="http://www.wawaqin.com">联系联系联系</a></li>
    <li><a href="http://www.wawaqin.com">联系</a></li>
    <li><a href="http://www.wawaqin.com">联系联系</a></li>
    <li><a href="http://www.wawaqin.com">联系联系</a></li>
    <li><a href="http://www.wawaqin.com">联系联系联系</a></li>
    <li><a href="http://www.wawaqin.com">联系联系联系</a></li>
    </ul>
</li>

</ul>

提示：您可以先修改部分代码再运行

css模拟title和alt的提示效果

提示：您可以先修改部分代码再运行

posted @ 2007-02-04 13:41 海浪~~ 阅读(1325) 评论(0) 收藏举报

刷新页面返回顶部

海浪

JavaScript 经典效果集收集3

公告