JavaScript经典效果集锦之二（转）

十一 漂亮的脚本日历：
[code]
<Script LANGUAGE="JavaScript">
var months = new Array("一", "二", "三","四", "五", "六", "七", "八", "九","十", "十一", "十二");
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);
var days = new Array("日","一", "二", "三","四", "五", "六");
var classTemp;
var today=new getToday();
var year=today.year;
var month=today.month;
var newCal;

function getDays(month, year) {
  if (1 == month) return ((0 == year % 4) && (0 != (year % 100))) ||(0 == year % 400) ? 29 : 28;
  else return daysInMonth[month];
}

function getToday() {
  this.now = new Date();
  this.year = this.now.getFullYear();
  this.month = this.now.getMonth();
  this.day = this.now.getDate();
}

function Calendar() {
  newCal = new Date(year,month,1);
  today = new getToday();   
  var day = -1;
  var startDay = newCal.getDay();
  var endDay=getDays(newCal.getMonth(), newCal.getFullYear());
  var daily = 0;
  if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth()))
  {
   day = today.day;
  }
  var caltable = document.all.caltable.tBodies.calendar;
  var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear());

  for (var intWeek = 0; intWeek < caltable.rows.length;intWeek++)
   for (var intDay = 0;intDay < caltable.rows[intWeek].cells.length;intDay++)
   {
    var cell = caltable.rows[intWeek].cells[intDay];
    var montemp=(newCal.getMonth()+1)<10?("0"+(newCal.getMonth()+1)):(newCal.getMonth()+1);         
    if ((intDay == startDay) && (0 == daily)){ daily = 1;}
    var daytemp=daily<10?("0"+daily):(daily);
    var d="<"+newCal.getFullYear()+"-"+montemp+"-"+daytemp+">";
    if(day==daily) cell.className="DayNow";
    else if(intDay==6) cell.className = "DaySat";
    else if (intDay==0) cell.className ="DaySun";
    else cell.className="Day";
    if ((daily > 0) && (daily <= intDaysInMonth))
    {
     cell.innerText = daily;
     daily++;
    } else
    {
     cell.className="CalendarTD";
     cell.innerText = "";
    }
  }
  document.all.year.value=year;
  document.all.month.value=month+1;
}

function subMonth()
{
  if ((month-1)<0)
  {
   month=11;
   year=year-1;
  } else
  {
   month=month-1;
  }
  Calendar();
}

function addMonth()
{
  if((month+1)>11)
  {
   month=0;
   year=year+1;
  } else
  {
   month=month+1;
  }
  Calendar();
}

function setDate()
{
  if (document.all.month.value<1||document.all.month.value>12)
  {
   alert("月的有效范围在1-12之间!");
   return;
  }
  year=Math.ceil(document.all.year.value);
  month=Math.ceil(document.all.month.value-1);
  Calendar();
}
</Script>

<Script>
function buttonOver()
{
var obj = window.event.srcElement;
obj.runtimeStyle.cssText = "background-color:#FFFFFF";
// obj.className="Hover";
}

function buttonOut()
{
var obj = window.event.srcElement;
window.setTimeout(function(){obj.runtimeStyle.cssText = "";},300);
}
</Script>

<Style>
Input {font-family: verdana;font-size: 9pt;text-decoration: none;background-color: #FFFFFF;height: 20px;border: 1px solid #666666;color:#000000;}

.Calendar {font-family: verdana;text-decoration: none; 170;background-color: #C0D0E8;font-size: 9pt;border:0px dotted #1C6FA5;}
.CalendarTD {font-family: verdana;font-size: 7pt;color: #000000;background-color:#f6f6f6;height: 20px;11%;text-align: center;}

.Title {font-family: verdana;font-size: 11pt;font-weight: normal;height: 24px;text-align: center;color: #333333;text-decoration: none;background-color: #A4B9D7;border-top- 1px;border-right- 1px;border-bottom- 1px;border-left- 1px;border-bottom-style:1px;border-top-color: #999999;border-right-color: #999999;border-bottom-color: #999999;border-left-color: #999999;}

.Day {font-family: verdana;font-size: 7pt;color:#243F65;background-color: #E5E9F2;height: 20px;11%;text-align: center;}
.DaySat {font-family: verdana;font-size: 7pt;color:#FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px; 12%;}
.DaySun {font-family: verdana;font-size: 7pt;color: #FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px; 12%;}
.DayNow {font-family: verdana;font-size: 7pt;font-weight: bold;color: #000000;background-color: #FFFFFF;height: 20px;text-align: center;}

.DayTitle {font-family: verdana;font-size: 9pt;color: #000000;background-color: #C0D0E8;height: 20px;11%;text-align: center;}
.DaySatTitle {font-family: verdana;font-size: 9pt;color:#FF0000;text-decoration: none;background-color:#C0D0E8;text-align: center;height: 20px; 12%;}
.DaySunTitle {font-family: verdana;font-size: 9pt;color: #FF0000;text-decoration: none;background-color: #C0D0E8;text-align: center;height: 20px; 12%;}

.DayButton {font-family: Webdings;font-size: 9pt;font-weight: bold;color: #243F65;cursor:hand;text-decoration: none;}

</Style>


<table border="0" cellpadding="0" cellspacing="1" class="Calendar" id="caltable">
<thead>
     <tr align="center" valign="middle">
  <td colspan="7" class="Title">
   <a href="javaScript:subMonth();" title="上一月" class="DayButton">3</a> <input name="year" type="text" size="4" maxlength="4" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"  onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 年 <input name="month" type="text" size="1" maxlength="2" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"  onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 月 <a href="JavaScript:addMonth();" title="下一月" class="DayButton">4</a>
  </td>
</tr>
<tr align="center" valign="middle">
  <Script LANGUAGE="JavaScript">  
   document.write("<TD class="DaySunTitle" id=diary >" + days[0] + "</TD>");
   for (var intLoop = 1; intLoop < days.length-1;intLoop++)
    document.write("<TD class="DayTitle" id=diary>" + days[intLoop] + "</TD>");
    document.write("<TD class="DaySatTitle" id=diary>" + days[intLoop] + "</TD>");
  </Script>
</TR>
</thead>
<TBODY border=1 cellspacing="0" cellpadding="0" ID="calendar" ALIGN=CENTER ONCLICK="getDiary()">
<Script LANGUAGE="JavaScript">
  for (var intWeeks = 0; intWeeks < 6; intWeeks++)
  {
   document.write("<TR style='cursor:hand'>");
   for (var intDays = 0; intDays < days.length;intDays++) document.write("<TD class="CalendarTD" onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD>");
   document.write("</TR>");
  }
</Script>
</TBODY>
</TABLE>
<Script  LANGUAGE="JavaScript">
Calendar();
</Script>
[/code]
十二 进入,退出页面的各种效果:
进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">
推出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">
这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为1-23:
　　0 矩形缩小
　　1 矩形扩大
　　2 圆形缩小
　　3 圆形扩大
　　4 下到上刷新
　　5 上到下刷新
　　6 左到右刷新
　　7 右到左刷新
　　8 竖百叶窗
　　9 横百叶窗
　　10 错位横百叶窗
　　11 错位竖百叶窗
　　12 点扩散
　　13 左右到中间刷新
　　14 中间到左右刷新
　　15 中间到上下
　　16 上下到中间
　　17 右下到左上
　　18 右上到左下
　　19 左上到右下
　　20 左下到右上
　　21 横条
　　22 竖条
　　23 以上22种随机选择一种

十三 很酷的效果,表格被选中回变颜色:
[code]
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<html>
<head>
</head>
<title>Mapabc地图无限</title>

<script language="JavaScript">
        var searchResult=new Array();//鼠标滑过时显示背景色
                function borderize(what,color,color2)
                {
                        what.style.borderColor=color
                        what.style.backgroundColor=color2
                }

                function borderize_on(e){
                        if (document.all)
                                source3=event.srcElement
                        else if (document.getElementById)
                                source3=e.target
                        if (source3.className=="zuo22"){
                                borderize(source3,"#999999","#F6F6F8")
                        }
                        else{
                                while(source3.tagName!="TABLE"){
                                        source3=document.getElementById? source3.parentNode : source3.parentElement
                                        if (source3.className=="zuo22")
                                                borderize(source3,"#999999","#F6F6F8")
                                }
                        }
                }

                function borderize_off(e){

                        if (document.all)
                                source4=event.srcElement
                        else if (document.getElementById)
                                source4=e.target
                        if (source4.className=="zuo22")
                                borderize(source4,"white","white")
                        else{
                                while(source4.tagName!="TABLE"){
                                        source4=document.getElementById? source4.parentNode : source4.parentElement
                                        if (source4.className=="zuo22")
                                                borderize(source4,"white","white")
                                }
                        }
                }                
</script>

<body >
                <table width="96%" border="0" onMouseOver="borderize_on(event)" onMouseOut="borderize_off(event)" class="zuo22" onclick="javascript:clickfun('123')">
                        <TR>
                                <TD>把鼠标移过来</TD>
                                <TD>把鼠标移过来</TD>
                        </TR>
<TR>
                                <TD>把鼠标移过来</TD>
                                <TD>把鼠标移过来</TD>
                        </TR>
<TR>
                                <TD>把鼠标移过来</TD>
                                <TD>把鼠标移过来</TD>
                        </TR>
<TR>
                                <TD>把鼠标移过来</TD>
                                <TD>把鼠标移过来</TD>
                        </TR>
                </table>

</body>
</html>
[/code]
十四 弹出提示的效果：
[code]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>cao888---提示</title>
</head>

<body>
<script language=javascript>
var cao_x,cao_y;

function cao888()
{
this.display=display;
}

function display()
{
  document.write("<table align=center><tr><td><button style='100px;height:30px;font-size:12px;border:1px solid #A4B3C8;background-color:green;' type=button onclick=document.getElementById('cao1').style.display='block' onfocus=this.blur()>CAO留言</button></td></tr></table>");
  document.write("<div  id='cao1' style='font-size:12px;position:absolute;display:none;text-align:center;overflow:visible'>");
  document.write("<div style='position:absolute;top:expression((body.clientHeight-300)/2);left:expression((body.clientWidth-200)/2);200px;height:180px;background-color:#dbdbdb;border:1px solid #cccccc;'>");
  document.write("<table width=200 height=20 bgcolor=green onmousedown='cao_x=event.x-parentNode.style.pixelLeft;cao_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='caoMove(this.parentNode)' style='cursor:move;'>");
  document.write("<tr align=center>");
  document.write("<td align=left>提示:CAO888</td>");
  document.write("</tr>");
  document.write("</table>");
  document.write("<span style= cursor:hand onclick=this.parentNode.parentNode.style.display='none';><img src='http://pic1.blueidea.com/bbs/topic5.gif'><br>CAO呀,错误了...<br>[确定]</span>");
  document.write("  </div>");
  document.write("</div>");
}
function caoMove(obj)  //实现层的拖移
{
  if(event.button==1)
  {
    var caoX=obj.clientLeft;
    var caoY=obj.clientTop;
    obj.style.pixelLeft=caoX+(event.x-cao_x);
    obj.style.pixelTop=caoY+(event.y-cao_y);
  }
}
</script>
<script language=javascript>
var mycao=new cao888();
mycao.display();
</script>
</body>
</html>
[/code]
十五 图片之间的切换：
[code]
<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!="") {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>
[/code]
十六 DIV_圆边圆角的实现：
[code]
<html xmlns:v>
<head>
<style>
v\:*{behavior: url(#default#VML);}
</style>
</head>
<body>
<v:roundRect style="position:absolute;left:20px;top:50px;200px;height:140px;" FillColor="#AAEAFA" Filled="T" />
</body>
[/code]
十七 跳动的菜单：
[code]
<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;
    220px;
    height:20px;
    z-index:1;
    background-color: #999900;
}
#hor2 {
    position:absolute;
    left:320px;
    top:40px;
    220px;
    height:20px;
    z-index:2;
    background-color: #FFCC00;
}
#hor3 {
    position:absolute;
    left:320px;
    top:60px;
    220px;
    height:20px;
    z-index:3;
    background-color: #99CC00;
}
#board1 {
    position:absolute;
    left:320px;
    top:40px;
    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;
    220px;
    height:120px;
    z-index:-90;
    background-color: #333333;
    visibility: hidden;
}
#board3 {
    position:absolute;
    220px;
    height:120px;
    z-index:-80;
    left: 320px;
    top: 80px;
    background-color: #333333;
    visibility: hidden;
}
#hor4 {
    position:absolute;
    left:320px;
    top:80px;
    220px;
    height:20px;
    z-index:4;
    background-color: #99CCCC;
}
#board4 {
    position:absolute;
    left:320px;
    top:100px;
    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>
[/code]
十八 通过页面抓取照片：
[code]
<!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>
[/code]
十九 客户端静态页面玩分页：
[code]
<!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;
        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>
[/code]
二十 类似与google个性页面的好东东:
[code]
<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;
        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:hktx@163.com****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);
                if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
                        var subTables=parentTable.cells.getElementsByTagName("table");
                        if(subTables.length==0){
                                if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
                                        parentTable.cells.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.insertBefore(Drag.ao,subTables[j]);
                                        break;
                                }else{
                                        parentTable.cells.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.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>
[/code]