十五、图片之间的切换
<script language=JavaScript>
<!–
var imgUrl=new Array();
var imgLink=new Array();
var adNum=0;
var jumpUrl=”http://sports.tom.com/“;
imgLink[1]=”http://sports.tom.com/gnzt/2005yg/“;
imgLink[2]=”http://sports.tom.com/zhty/“;
imgUrl[1]=”http://img.sports.tom.com/img/assets/200509/050927071818sportsgnzt200592701.jpg“;
imgUrl[2]=”http://img.sports.tom.com/img/assets/200509/050927075953zt20050926107.jpg“;
var imgPre=new Array();
var j=0;
for (i=1;i<=imgUrl.length-1;i++) {
 if(imgLink[i]!=””) {j++;}
 else {break;}
}
function playTran(){
 if (document.all)
  imgInit.filters.revealTrans.play();
}
var key=0;
function nextAd(){
 if(adNum<j)adNum++ ;
 else adNum=1;
 if( key==0 ){key=1;}
 else if (document.all){
  imgInit.filters.revealTrans.Transition=6;
  imgInit.filters.revealTrans.apply();
  playTran();
 }
 document.images.imgInit.src=imgUrl[adNum];
 jumpUrl=imgLink[adNum];
 theTimer=setTimeout(“nextAd()”, 7000);
}
function goUrl(){ 
 jumpTarget=’_blank’;
 if (jumpUrl != ”){
  if (jumpTarget != ”) window.open(jumpUrl,jumpTarget);
  else location.href=jumpUrl;
 }
}
//–>
</script>
<a href=”javascript:goUrl()”><img style=”FILTER:
revealTrans(duration=2,transition=6);border:1 solid black” src=”javascript:nextAd()” width=300
border=0 name=imgInit height=”210″></a>
</body>
</html>
 
十六、 DIV_圆边圆角的实现
<html xmlns:v>
<head>
<style>
v\:*{behavior: url(#default#VML);}
</style>
</head>
<body>
<v:roundRect style=”position:absolute;left:20px;top:50px;width:200px;height:140px;” FillColor=”#AAEAFA” Filled=”T” />
</body>
 
十七、跳动的菜单
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>模仿as效果的导航菜单</title>
<style type=”text/css”>
<!–
a:link,a:visited    { text-decoration: none; color: #666666 }
a:hover            { text-decoration: underline }
#hor1 {
    position:absolute;
    left:320px;
    top:20px;
    width:220px;
    height:20px;
    z-index:1;
    background-color: #999900;
}
#hor2 {
    position:absolute;
    left:320px;
    top:40px;
    width:220px;
    height:20px;
    z-index:2;
    background-color: #FFCC00;
}
#hor3 {
    position:absolute;
    left:320px;
    top:60px;
    width:220px;
    height:20px;
    z-index:3;
    background-color: #99CC00;
}
#board1 {
    position:absolute;
    left:320px;
    top:40px;
    width:220px;
    height:120px;
    z-index:-100;
    background-color: #333333;
    visibility: hidden;
}
body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    font-weight: bold;
}
body {
    background-color: #666666;
}
#board2 {
    position:absolute;
    left:320px;
    top:60px;
    width:220px;
    height:120px;
    z-index:-90;
    background-color: #333333;
    visibility: hidden;
}
#board3 {
    position:absolute;
    width:220px;
    height:120px;
    z-index:-80;
    left: 320px;
    top: 80px;
    background-color: #333333;
    visibility: hidden;
}
#hor4 {
    position:absolute;
    left:320px;
    top:80px;
    width:220px;
    height:20px;
    z-index:4;
    background-color: #99CCCC;
}
#board4 {
    position:absolute;
    left:320px;
    top:100px;
    width:220px;
    height:120px;
    z-index:-70;
    background-color: #333333;
    visibility: hidden;
}
–>
</style>
<script type=”text/javascript”>
lastNo=0
function re(menu_no){
if(lastNo!=menu_no){
cur=menu_no+1
lastNo=menu_no
rest()
}else{
cur=100
}
document.getElementById(“board”+menu_no).style.visibility=”visible”
}
function rest(){
for(i=1;i<=4;i++){
document.getElementById(“hor”+i).style.top=20*i;
document.getElementById(“board”+i).style.visibility=”hidden”
}
menu_num=4;
 act=1
 height=120+20
 speed=0;
 posY=0;
}
function huke(){
if(act==1&&cur<100){
speed=(height-posY)*0.69+speed*0.6
posY+=speed
for(i=cur;i<=menu_num;i++){
document.getElementById(“hor”+i).style.top=posY+(i-2)*20
}
if(Math.abs(height-posY)<0.5){
for(i=cur;i<=menu_num;i++){
document.getElementById(“hor”+i).style.top=height+(i-2)*20
}
act=0
}
setTimeout(“huke()”,50)
}
}
</script>
</head>
<body>
<div id=”hor1″ onclick=”re(1);huke()”>News</div>
<div id=”hor2″ onclick=”re(2);huke()”>Populor</div>
<div id=”hor3″ onclick=”re(3);huke()”>Sports</div>
<div id=”hor4″ onclick=”re(4);huke()”>Woman</div>
<div id=”board1″>1.由AS而想起Javascript<br />2.用Jscript写ASP有没有先天性的不足?<br />3.没有了。</div>
<div id=”board2″>1.xhtml+css真的来了吗?<br />2.Flash取代传统网站<br />3.Flash何时才能连接数据库?</div>
<div id=”board3″>1.程序员与小姐的10个相同。<br />2.中国的程序员与中国的足球?</div>
<div id=”board4″>1.二十一世纪最缺的是什么?人才<br />
<a href=”http://www.gamvan.com” target=”_blank”>http://www.gamvan.com</a>
<a href=”http://www.gamvan.com” target=”_blank”>http://www.gamvan.com</a></div>
</body>
</html>
 
十八、通过页面抓取照片
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<!– saved from url=(0047)http://nnyc.vicp.net:4099/schoolstation/te.aspx –>
<HTML><HEAD><TITLE>te</TITLE>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<META content=”MSHTML 6.00.2800.1528″ name=GENERATOR>
<META content=C# name=CODE_LANGUAGE>
<META content=JavaScript name=vs_defaultClientScript>
<META content=http://schemas.microsoft.com/intellisense/ie5
name=vs_targetSchema><LINK href=”te.files/mycss.css” type=text/css
rel=stylesheet></HEAD>
<BODY background=te.files/qback1.gif><!– MUST CALL INTEGRATORWEB METHOD _DIRECTLY_ AFTER DEFINING THE IX OBJECT –>
<FORM id=Form1 name=Form1 action=te.aspx method=post> &nbsp;
<TABLE id=Table1 style=”POSITION: static” borderColor=#cccccc cellSpacing=0
cellPadding=0 width=500 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD style=”LINE-HEIGHT: 1.5em; HEIGHT: 35px” borderColor=#ffffff
background=te.files/titledown.gif colSpan=2><FONT face=宋体></FONT></TD></TR>
<TR>
<TD
style=”PADDING-LEFT: 15px; COLOR: #660033; LINE-HEIGHT: 1.5em; PADDING-TOP: 10px”
vAlign=top borderColor=#ffffff align=left
background=te.files/bg1.gif><FONT face=宋体>友善提醒:<BR>1、如果别的程
序(如qq)或者其他网页正在使用摄像头,请先关闭相关程序,否则本</FONT><FONT
face=宋体>网页对摄像头的功能不能使用。<BR>2、本网页必须使用一个插件ezvidc60.ocx,如果你未安装,请<A
href=”http://nnyc.vicp.net:4099/schoolstation/source/ezvid.rar“>下载安装</A>,(把下载的文件ezvid.rar解压到一个目录后,双击执行ezvid.bat即可)。如果您认为这会威胁到您计算机的安全,请关闭本页。</FONT></FONT></TD>
<TD style=”HEIGHT: 222px” borderColor=#ffffff align=middle>
<OBJECT id=Form1_vd height=240 width=320
classid=CLSid:DF6D6569-5B0C-11D3-9396-008029E9B3A6 name=Form1_vd
VIEWASTEXT>
<PARAM NAME=”_ExtentX” VALUE=”8467″>
<PARAM NAME=”_ExtentY” VALUE=”6350″>
<PARAM NAME=”AutoSize” VALUE=”-1″>
<PARAM NAME=”CenterVideo” VALUE=”-1″>
<PARAM NAME=”BackColor” VALUE=”-2147483643″>
<PARAM NAME=”BorderStyle” VALUE=”1″>
<PARAM NAME=”VideoBorder” VALUE=”1″>
<PARAM NAME=”DriverIndex” VALUE=”0″>
<PARAM NAME=”Preview” VALUE=”-1″>
<PARAM NAME=”PreviewRate” VALUE=”15″>
<PARAM NAME=”Overlay” VALUE=”0″>
<PARAM NAME=”StretchPreview” VALUE=”0″>
<PARAM NAME=”CancelKey” VALUE=”0″>
<PARAM NAME=”CaptureRate” VALUE=”66666″>
<PARAM NAME=”MakeUserConfirmCapture” VALUE=”-1″>
<PARAM NAME=”PercentDropForError” VALUE=”10″>
<PARAM NAME=”CaptureViaBackgroundThread” VALUE=”0″>
<PARAM NAME=”IndexSize” VALUE=”27000″>
<PARAM NAME=”CaptureAudio” VALUE=”0″>
<PARAM NAME=”AbortLeftMouse” VALUE=”-1″>
<PARAM NAME=”AbortRightMouse” VALUE=”-1″>
<PARAM NAME=”TimeLimitEnabled” VALUE=”0″>
<PARAM NAME=”TimeLimit” VALUE=”30″>
<PARAM NAME=”StreamMaster” VALUE=”0″>
<PARAM NAME=”YieldEventEnabled” VALUE=”0″>
<PARAM NAME=”FrameEventEnabled” VALUE=”0″>
<PARAM NAME=”VideoStreamEventEnabled” VALUE=”0″>
<PARAM NAME=”WaveStreamEventEnabled” VALUE=”0″>
<PARAM NAME=”UsePreciseCaptureControls” VALUE=”0″>
<embed src=”8467″ width=”320″ height=”240″ _extentx=”8467″ _extenty=”6350″ autosize=”-1″ centervideo=”-1″ backcolor=”-2147483643″ borderstyle=”1″ videoborder=”1″ driverindex=”0″ preview=”-1″ previewrate=”15″ overlay=”0″ stretchpreview=”0″ cancelkey=”0″ capturerate=”66666″ makeuserconfirmcapture=”-1″ percentdropforerror=”10″ captureviabackgroundthread=”0″ indexsize=”27000″ captureaudio=”0″ abortleftmouse=”-1″ abortrightmouse=”-1″ timelimitenabled=”0″ timelimit=”30″ streammaster=”0″ yieldeventenabled=”0″ frameeventenabled=”0″ videostreameventenabled=”0″ wavestreameventenabled=”0″ useprecisecapturecontrols=”0″>
</embed>
</OBJECT></TD></TR>
<TR>
<TD style=”HEIGHT: 36px” align=middle background=te.files/title.gif
colSpan=2><FONT
face=宋体><INPUT onclick=catchone(); type=button value=照相></FONT></TD></TR></TBODY></TABLE></FORM>
<SCRIPT language=javascript>
    function catchone()
    {
        Form1.Form1_vd.SaveDIB(“c:\\hosngcapture.dib”);
        alert(“图像存放在 c:\\hosngcapture.dib”);
    }
    </SCRIPT>
</BODY></HTML>
===================================================================================
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<!– saved from url=(0047)http://nnyc.vicp.net:4099/schoolstation/te.aspx –>
<HTML><HEAD><TITLE>te</TITLE>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<META content=”MSHTML 6.00.2800.1528″ name=GENERATOR>
<META content=C# name=CODE_LANGUAGE>
<META content=JavaScript name=vs_defaultClientScript>
<META content=http://schemas.microsoft.com/intellisense/ie5
name=vs_targetSchema><LINK href=”te.files/mycss.css” type=text/css
rel=stylesheet></HEAD>
<BODY background=te.files/qback1.gif><!– MUST CALL INTEGRATORWEB METHOD _DIRECTLY_ AFTER DEFINING THE IX OBJECT –>
<FORM id=Form1 name=Form1 action=te.aspx method=post> &nbsp;
<TABLE id=Table1 style=”POSITION: static” borderColor=#cccccc cellSpacing=0
cellPadding=0 width=500 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD style=”LINE-HEIGHT: 1.5em; HEIGHT: 35px” borderColor=#ffffff
background=te.files/titledown.gif colSpan=2><FONT face=宋体></FONT></TD></TR>
<TR>
<TD
style=”PADDING-LEFT: 15px; COLOR: #660033; LINE-HEIGHT: 1.5em; PADDING-TOP: 10px”
vAlign=top borderColor=#ffffff align=left
background=te.files/bg1.gif><FONT face=宋体>友善提醒:<BR>1、如果别的程
序(如qq)或者其他网页正在使用摄像头,请先关闭相关程序,否则本</FONT><FONT
face=宋体>网页对摄像头的功能不能使用。<BR>2、本网页必须使用一个插件ezvidc60.ocx,如果你未安装,请<A
href=”http://nnyc.vicp.net:4099/schoolstation/source/ezvid.rar“>下载安装</A>,(把下载的文件ezvid.rar解压到一个目录后,双击执行ezvid.bat即可)。如果您认为这会威胁到您计算机的安全,请关闭本页。</FONT></FONT></TD>
<TD style=”HEIGHT: 222px” borderColor=#ffffff align=middle>
<OBJECT id=Form1_vd height=240 width=320
classid=CLSid:DF6D6569-5B0C-11D3-9396-008029E9B3A6 name=Form1_vd
VIEWASTEXT>
<PARAM NAME=”_ExtentX” VALUE=”8467″>
<PARAM NAME=”_ExtentY” VALUE=”6350″>
<PARAM NAME=”AutoSize” VALUE=”-1″>
<PARAM NAME=”CenterVideo” VALUE=”-1″>
<PARAM NAME=”BackColor” VALUE=”-2147483643″>
<PARAM NAME=”BorderStyle” VALUE=”1″>
<PARAM NAME=”VideoBorder” VALUE=”1″>
<PARAM NAME=”DriverIndex” VALUE=”0″>
<PARAM NAME=”Preview” VALUE=”-1″>
<PARAM NAME=”PreviewRate” VALUE=”15″>
<PARAM NAME=”Overlay” VALUE=”0″>
<PARAM NAME=”StretchPreview” VALUE=”0″>
<PARAM NAME=”CancelKey” VALUE=”0″>
<PARAM NAME=”CaptureRate” VALUE=”66666″>
<PARAM NAME=”MakeUserConfirmCapture” VALUE=”-1″>
<PARAM NAME=”PercentDropForError” VALUE=”10″>
<PARAM NAME=”CaptureViaBackgroundThread” VALUE=”0″>
<PARAM NAME=”IndexSize” VALUE=”27000″>
<PARAM NAME=”CaptureAudio” VALUE=”0″>
<PARAM NAME=”AbortLeftMouse” VALUE=”-1″>
<PARAM NAME=”AbortRightMouse” VALUE=”-1″>
<PARAM NAME=”TimeLimitEnabled” VALUE=”0″>
<PARAM NAME=”TimeLimit” VALUE=”30″>
<PARAM NAME=”StreamMaster” VALUE=”0″>
<PARAM NAME=”YieldEventEnabled” VALUE=”0″>
<PARAM NAME=”FrameEventEnabled” VALUE=”0″>
<PARAM NAME=”VideoStreamEventEnabled” VALUE=”0″>
<PARAM NAME=”WaveStreamEventEnabled” VALUE=”0″>
<PARAM NAME=”UsePreciseCaptureControls” VALUE=”0″>
<embed src=”8467″ width=”320″ height=”240″ _extentx=”8467″ _extenty=”6350″ autosize=”-1″ centervideo=”-1″ backcolor=”-2147483643″ borderstyle=”1″ videoborder=”1″ driverindex=”0″ preview=”-1″ previewrate=”15″ overlay=”0″ stretchpreview=”0″ cancelkey=”0″ capturerate=”66666″ makeuserconfirmcapture=”-1″ percentdropforerror=”10″ captureviabackgroundthread=”0″ indexsize=”27000″ captureaudio=”0″ abortleftmouse=”-1″ abortrightmouse=”-1″ timelimitenabled=”0″ timelimit=”30″ streammaster=”0″ yieldeventenabled=”0″ frameeventenabled=”0″ videostreameventenabled=”0″ wavestreameventenabled=”0″ useprecisecapturecontrols=”0″>
</embed>
</OBJECT></TD></TR>
<TR>
<TD style=”HEIGHT: 36px” align=middle background=te.files/title.gif
colSpan=2><FONT
face=宋体><INPUT onclick=catchone(); type=button value=照相></FONT></TD></TR></TBODY></TABLE></FORM>
<SCRIPT language=javascript>
    function catchone()
    {
        Form1.Form1_vd.SaveDIB(“c:\\hosngcapture.dib”);
        alert(“图像存放在 c:\\hosngcapture.dib”);
    }
    </SCRIPT>
</BODY></HTML>
 
十九、客户端静态页面玩分页
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME=”Generator” CONTENT=”EditPlus”>
<META NAME=”Author” CONTENT=””>
<META NAME=”Keywords” CONTENT=””>
<META NAME=”Description” CONTENT=””>
<style>
* {
 font-size:10.2pt;
 font-family:tahoma;
 line-height:150%;
}
.divContent
{
 border:1px solid red;
 background-color:#FFD2D3;
 width:500px;
 word-break:break-all;
 margin:10px 0px 10px;
 padding:10px;
}
</style>
</HEAD>
<BODY>
header
<div id=”divPagenation”></div>
<div id=”divContent”></div>
footer
<SCRIPT LANGUAGE=”JavaScript”>
<!–
s=”<p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><p>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><p>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><p>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><p>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><p>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p>”;
function DHTMLpagenation(content) { with (this)
{
 // client static html file pagenation
 this.content=content;
 this.contentLength=content.length;
 this.pageSizeCount;
 this.perpageLength=100; //default perpage byte length.
 this.currentPage=1;
 //this.regularExp=/.+[\?\&]{1}page=(\d+)/;
 this.regularExp=/\d+/;
 this.divDisplayContent;
 this.contentStyle=null;
 this.strDisplayContent=””;
 this.divDisplayPagenation;
 this.strDisplayPagenation=””;
 
 arguments.length==2?perpageLength=arguments[1]:”;
 try {
  divExecuteTime=document.createElement(“DIV”);
  document.body.appendChild(divExecuteTime);
 }
 catch(e)
 {
 }
 if(document.getElementById(“divContent”))
 {
  divDisplayContent=document.getElementById(“divContent”);
 }
 else
 {
  try
  {
   divDisplayContent=document.createElement(“DIV”);
   divDisplayContent.id=”divContent”;
   document.body.appendChild(divDisplayContent);
  }
  catch(e)
  {
   return false;
  }
 }
 if(document.getElementById(“divPagenation”))
 {
  divDisplayPagenation=document.getElementById(“divPagenation”);
 }
 else
 {
  try
  {
   divDisplayPagenation=document.createElement(“DIV”);
   divDisplayPagenation.id=”divPagenation”;
   document.body.appendChild(divDisplayPagenation);
  }
  catch(e)
  {
   return false;
  }
 }
 DHTMLpagenation.initialize();
 return this;
 
}};
DHTMLpagenation.initialize=function() { with (this)
{
 divDisplayContent.className=contentStyle!=null?contentStyle:”divContent”;
 if(contentLength<=perpageLength)
 {
  strDisplayContent=content;
  divDisplayContent.innerHTML=strDisplayContent;
  return null;
 }
 pageSizeCount=Math.ceil((contentLength/perpageLength));
 DHTMLpagenation.goto(currentPage);
 DHTMLpagenation.displayContent();
}};
DHTMLpagenation.displayPage=function() { with (this)
{
 strDisplayPagenation=”分页:”;
 if(currentPage&&currentPage!=1)
  strDisplayPagenation+='<a href=”javascript:void(0)” onclick=”DHTMLpagenation.previous()”>上一页</a>&nbsp;&nbsp;’;
 else
  strDisplayPagenation+=”上一页&nbsp;&nbsp;”;
 for(var i=1;i<=pageSizeCount;i++)
 {
  if(i!=currentPage)
   strDisplayPagenation+='<a href=”javascript:void(0)” onclick=”DHTMLpagenation.goto(‘+i+’);”>’+i+'</a>&nbsp;&nbsp;’;
  else
   strDisplayPagenation+=i+”&nbsp;&nbsp;”;
 }
 if(currentPage&&currentPage!=pageSizeCount)
  strDisplayPagenation+='<a href=”javascript:void(0)” onclick=”DHTMLpagenation.next()”>下一页</a>&nbsp;&nbsp;’;
 else
  strDisplayPagenation+=”下一页&nbsp;&nbsp;”;
 strDisplayPagenation+=”共 ” + pageSizeCount + ” 页,每页” + perpageLength + ” 字符,调整字符数:<input type=’text’ value='”+perpageLength+”‘ id=’ctlPerpageLength’><input type=’button’ value=’确定’ onclick=’DHTMLpagenation.change(document.getElementById(\”ctlPerpageLength\”).value);’>”;
 divDisplayPagenation.innerHTML=strDisplayPagenation;
}};
DHTMLpagenation.previous=function() { with(this)
{
 DHTMLpagenation.goto(currentPage-1);
}};
DHTMLpagenation.next=function() { with(this)
{
 DHTMLpagenation.goto(currentPage+1);
}};
DHTMLpagenation.goto=function(iCurrentPage) { with (this)
{
 startime=new Date();
 if(regularExp.test(iCurrentPage))
 {
  currentPage=iCurrentPage;
  strDisplayContent=content.substr((currentPage-1)*perpageLength,perpageLength);
 }
 else
 {
  alert(“page parameter error!”);
 }
 DHTMLpagenation.displayPage();
 DHTMLpagenation.displayContent();
}};
DHTMLpagenation.displayContent=function() { with (this)
{
 divDisplayContent.innerHTML=strDisplayContent;
}};
DHTMLpagenation.change=function(iPerpageLength) { with(this)
{
 if(regularExp.test(iPerpageLength))
 {
  DHTMLpagenation.perpageLength=iPerpageLength;
  DHTMLpagenation.currentPage=1;
  DHTMLpagenation.initialize();
 }
 else
 {
  alert(“请输入数字”);
 }
}};
// method
// DHTMLpagenation(strContent,perpageLength)
DHTMLpagenation(s,100);
//–>
</SCRIPT>
</BODY>
</HTML>
 
二十、
<html>
<head>
<title>DRAG the DIV</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<style>
*{font-size:12px}
.dragTable{
 font-size:12px;
 border-top:1px solid #3366cc;
 margin-bottom: 10px;
 width:100%;
 background-color:#FFFFFF;
}
td{vertical-align:top;}
.dragTR{
 cursor:move;
 color:#7787cc;
 background-color:#e5eef9;
 height:20px;
 padding-left:5px;
 font-weight:bold;
}
#parentTable{
 border-collapse:collapse;
 letter-spacing:25px;
}
</style>
<script defer>
/****JoeLee************E-MAIL:[email protected]****QQ:48293707*****11:09 2006-2-9******/
 var Drag={dragged:false,
  ao:null,
  tdiv:null,
dragStart:function(){
 Drag.ao=event.srcElement;
 if((Drag.ao.tagName==”TD”)||(Drag.ao.tagName==”TR”)){
  Drag.ao=Drag.ao.offsetParent;
  Drag.ao.style.zIndex=100;
 }else
  return;
 Drag.dragged=true;
 Drag.tdiv=document.createElement(“div”);
 Drag.tdiv.innerHTML=Drag.ao.outerHTML;
 Drag.ao.style.border=”1px dashed red”;
 Drag.tdiv.style.display=”block”;
 Drag.tdiv.style.position=”absolute”;
 Drag.tdiv.style.filter=”alpha(opacity=70)”;
 Drag.tdiv.style.cursor=”move”;
 Drag.tdiv.style.border=”1px solid #000000″;
 Drag.tdiv.style.width=Drag.ao.offsetWidth;
 Drag.tdiv.style.height=Drag.ao.offsetHeight;
 Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;
 Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;
 document.body.appendChild(Drag.tdiv);
 Drag.lastX=event.clientX;
 Drag.lastY=event.clientY;
 Drag.lastLeft=Drag.tdiv.style.left;
 Drag.lastTop=Drag.tdiv.style.top;
},
 draging:function(){//重要:判断MOUSE的位置
 if(!Drag.dragged||Drag.ao==null)return;
 var tX=event.clientX;
 var tY=event.clientY;
 Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
 Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
 for(var i=0;i<parentTable.cells.length;i++){
  var parentCell=Drag.getInfo(parentTable.cells[i]);
  if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
   var subTables=parentTable.cells[i].getElementsByTagName(“table”);
   if(subTables.length==0){
    if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
     parentTable.cells[i].appendChild(Drag.ao);
    }
    break;
   }
   for(var j=0;j<subTables.length;j++){
    var subTable=Drag.getInfo(subTables[j]);
    if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){
     parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
     break;
    }else{
     parentTable.cells[i].appendChild(Drag.ao);
    } 
   }
  }
 }
}
,
 dragEnd:function(){
 if(!Drag.dragged)return;
 Drag.dragged=false;
 Drag.mm=Drag.repos(150,15);
 Drag.ao.style.borderWidth=”0px”;
 Drag.ao.style.borderTop=”1px solid #3366cc”;
 Drag.tdiv.style.borderWidth=”0px”;
 Drag.ao.style.zIndex=1;
},
getInfo:function(o){//取得坐标
 var to=new Object();
 to.left=to.right=to.top=to.bottom=0;
 var twidth=o.offsetWidth;
 var theight=o.offsetHeight;
 while(o!=document.body){
  to.left+=o.offsetLeft;
  to.top+=o.offsetTop;
  o=o.offsetParent;
 }
  to.right=to.left+twidth;
  to.bottom=to.top+theight;
 return to;
},
repos:function(aa,ab){
 var f=Drag.tdiv.filters.alpha.opacity;
 var tl=parseInt(Drag.getInfo(Drag.tdiv).left);
 var tt=parseInt(Drag.getInfo(Drag.tdiv).top);
 var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;
 var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;
 var kf=f/ab;
 return setInterval(function(){if(ab<1){
       clearInterval(Drag.mm);
       Drag.tdiv.removeNode(true);
       Drag.ao=null;
       return;
      }
     ab–;
     tl-=kl;
     tt-=kt;
     f-=kf;
     Drag.tdiv.style.left=parseInt(tl)+”px”;
     Drag.tdiv.style.top=parseInt(tt)+”px”;
     Drag.tdiv.filters.alpha.opacity=f;
    }
,aa/ab)
},
 inint:function(){//初始化
 for(var i=0;i<parentTable.cells.length;i++){
  var subTables=parentTable.cells[i].getElementsByTagName(“table”);
  for(var j=0;j<subTables.length;j++){
   if(subTables[j].className!=”dragTable”)break;
   subTables[j].rows[0].className=”dragTR”;
   subTables[j].rows[0].attachEvent(“onmousedown”,Drag.dragStart);
  }
 }
 document.onmousemove=Drag.draging;
 document.onmouseup=Drag.dragEnd;
}
//end of Object Drag
}
Drag.inint();
function _show(str){
 var w=window.open(”,”);
 var d=w.document;
 d.open();
 str=str.replace(/=(?!”)(.*?)(?!”)( |>)/g,”=\”$1\”$2″);
 str=str.replace(/(<)(.*?)(>)/g,”<span style=’color:red;’>&lt;$2&gt;</span><br />”);
 str=str.replace(/\r/g,”<br />\n”);
 d.write(str);
}
</script>
</head>
<body>
<table border=”0″ cellpadding=”0″ cellspacing=”10″ width=”100%” height=500 id=”parentTable”>
<tr >
 <td width=”25%” valgin=”top”>
  <table border=0 class=”dragTable” cellspacing=”0″>
   <tr>
    <td><b>GMAIL</b></td>
   </tr>
   <tr>
    <td>暂时无法显示GMAIL内容</td>
   <tr>
  </table><table border=0 class=”dragTable” cellspacing=”0″>
   <tr>
    <td>新浪体育</td>
   </tr>
   <tr>
    <td>解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖:辛吉斯欣喜能以冠军起步<br/> 印度搭档创下纪录法新社前瞻冬奥短道速滑:中韩唱主角 美加施冷箭</td>
   <tr>
  </table>
  <table border=0 class=”dragTable” cellspacing=”0″>
   <tr>
    <td>焦点</td>
   </tr>
   <tr>
    <td>京广线中断4小时20临客返汉晚点 中国新闻网-湖北分社 – 所有 235 相关报道 &raquo;哈马斯已有总理人选
                解放日报报业集团 – 所有 489 相关报道 &raquo;陈水扁是两岸关系麻烦制造者 武汉晨报 – 所有 179 相关报道 &raquo;</td>
   <tr>
  </table>
 </td>
 <td width=”25%”>
  <table border=0 class=”dragTable” cellspacing=”0″>
   <tr>
    <td>中关村在线</td>
   </tr>
   <tr>
    <td>新年行情速递 双敏板卡低价推荐 终于等到了,映泰6600GT一降降一百 罗技G15游戏键盘热力促销,代购价仅529元 </td>
   <tr>
  </table></td>
 <td width=”25%”>
  <table border=0 class=”dragTable” cellspacing=”0″>
   <tr>
    <td>网易商业</td>
   </tr>
   <tr>
    <td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>
   <tr>
  </table>  <table border=0 class=”dragTable” cellspacing=”0″>
   <tr>
    <td>黑可天下</td>
   </tr>
   <tr>
    <td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>
   <tr>
  </table>
 </td>
</tr>
</table>
<input type=”button” value=”SHOW” onClick=”_show(document.documentElement.innerHTML)” />
</body>
</html>
 
二十一、漂亮的表格
<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS Tables</title>
<link href=”styles.css” rel=”stylesheet” type=”text/css” />
</head>
<style type=”text/css”>
/* CSS Document */
body {
 font: normal 11px auto “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
 color: #4f6b72;
 background: #E6EAE9;
}
a {
 color: #c75f3e;
}
#mytable {
 width: 700px;
 padding: 0;
 margin: 0;
}
caption {
 padding: 0 0 5px 0;
 width: 700px; 
 font: italic 11px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
 text-align: right;
}
th {
 font: bold 11px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
 color: #4f6b72;
 border-right: 1px solid #C1DAD7;
 border-bottom: 1px solid #C1DAD7;
 border-top: 1px solid #C1DAD7;
 letter-spacing: 2px;
 text-transform: uppercase;
 text-align: left;
 padding: 6px 6px 6px 12px;
 background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}
th.nobg {
 border-top: 0;
 border-left: 0;
 border-right: 1px solid #C1DAD7;
 background: none;
}
td {
 border-right: 1px solid #C1DAD7;
 border-bottom: 1px solid #C1DAD7;
 background: #fff;
 font-size:11px;
 padding: 6px 6px 6px 12px;
 color: #4f6b72;
}
td.alt {
 background: #F5FAFA;
 color: #797268;
}
th.spec {
 border-left: 1px solid #C1DAD7;
 border-top: 0;
 background: #fff url(images/bullet1.gif) no-repeat;
 font: bold 10px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
}
th.specalt {
 border-left: 1px solid #C1DAD7;
 border-top: 0;
 background: #f5fafa url(images/bullet2.gif) no-repeat;
 font: bold 10px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
 color: #797268;
}
/*———for IE 5.x bug*/
html>body td{ font-size:11px;}
</style>
<body>
<table id=”mytable” cellspacing=”0″ summary=”The technical specifications of the Apple PowerMac G5 series”>
<caption>&nbsp;</caption>
  <tr>
    <th scope=”col” abbr=”Configurations” class=”nobg”>Configurations</th>
    <th scope=”col” abbr=”Dual 1.8″>Dual 1.8GHz</th>
    <th scope=”col” abbr=”Dual 2″>Dual 2GHz</th>
 <th scope=”col” abbr=”Dual 2.5″>Dual 2.5GHz</th>
  </tr>
  <tr>
    <th scope=”row” abbr=”Model” class=”spec”>lipeng</th>
    <td>M9454LL/A</td>
    <td>M9455LL/A</td>
    <td>M9457LL/A</td>
  </tr>
  <tr>
    <th scope=”row” abbr=”G5 Processor” class=”specalt”>mapabc</th>
    <td class=”alt”>Dual 1.8GHz PowerPC G5</td>
    <td class=”alt”>Dual 2GHz PowerPC G5</td>
    <td class=”alt”>Dual 2.5GHz PowerPC G5</td>
  </tr>
  <tr>
    <th scope=”row” abbr=”Frontside bus” class=”spec”>地图名片</th>
    <td>900MHz per processor</td>
    <td>1GHz per processor</td>
    <td>1.25GHz per processor</td>
  </tr>
  <tr>
    <th scope=”row” abbr=”L2 Cache” class=”specalt”>图秀卡</th>
    <td class=”alt”>512K per processor</td>
    <td class=”alt”>512K per processor</td>
    <td class=”alt”>512K per processor</td>
  </tr>
</table>
</body>
</html>