JavaScript經(jīng)典效果集錦

2019-11-21 00:22:35

字體：大中小

供稿：網(wǎng)友

一實(shí)用且必用的小腳本代碼
二鼠標(biāo)旁邊的提示信息,類似與163登錄后的頁(yè)面提示效果
三如果文字過(guò)長(zhǎng),則將過(guò)長(zhǎng)的部分變成省略號(hào)顯示
四滾動(dòng)的圖片
五接收鍵盤(pán)指令的腳本
六讓你的文本鏈接漸隱漸顯
七類似與QQ的好友/黑名單之類的樹(shù)型菜單-----推薦
八很多的腳本翻頁(yè)------推薦
九 DIV的透明層實(shí)現(xiàn)
十 JSP頁(yè)面自動(dòng)生成html頁(yè)面/或任何格式頁(yè)面-----推薦

十一超級(jí)強(qiáng)大的表單驗(yàn)證-----推薦
十二漂亮的腳本日歷
十三進(jìn)入,退出頁(yè)面的各種效果!
十四很酷的效果,表格被選中回變顏色
十五彈出提示的效果
十六圖片之間的切換
十七 DIV_圓邊圓角的實(shí)現(xiàn)
十八跳動(dòng)的菜單
十九通過(guò)頁(yè)面抓取照片
二十客戶端靜態(tài)頁(yè)面玩分頁(yè)

二十一類似與google個(gè)性頁(yè)面的好東東------網(wǎng)友155120
二十二漂亮的表格
二十三經(jīng)典的帶陰影的可拖動(dòng)的浮動(dòng)層------網(wǎng)友marvellous--------推薦
二十四運(yùn)行代碼的代碼------網(wǎng)友:Lenvo
二十五凹陷文字------------網(wǎng)友:Lenvo
二十六漂亮的仿flash菜單---網(wǎng)友:Lenvo
二十七自定義容器和字體大小---網(wǎng)友:greengnn
二十八超級(jí)REAL視頻播放器---網(wǎng)友:leaf52
二十九網(wǎng)站論壇上面快捷鍵提交表單的方法---網(wǎng)友:greengnn
三十 accesskey 提交---網(wǎng)友:greengnn
三十一新聞廣告圖片切換效果+描述---網(wǎng)友:greengnn
三十二菜單特效---網(wǎng)友:greengnn
三十三采用CSS和JS的下拉菜單---網(wǎng)友:greengnn

一實(shí)用且必用的小腳本代碼:

腳本1：進(jìn)入主頁(yè)以后自動(dòng)播放聲音

腳本2：進(jìn)入主頁(yè)后自動(dòng)最大話,省的去在自己?jiǎn)螕袅?

腳本3：顯示現(xiàn)在時(shí)間的腳本

腳本4：顯示最后修改時(shí)間的腳本

腳本5：設(shè)為首頁(yè),加為收藏，加入頻道,啟動(dòng)outlook發(fā)信

腳本6：狀態(tài)欄動(dòng)態(tài)顯示現(xiàn)在時(shí)間

腳本7：關(guān)閉窗口的腳本

腳本8：按下F12鍵,直接返回首頁(yè)

腳本9：后退,刷新,前進(jìn)

腳本10：設(shè)定時(shí)間彈出窗口,4000=4秒,當(dāng)然你可以自定義

</script>

二鼠標(biāo)旁邊的提示信息,類似與163登錄后的頁(yè)面提示效果：

代碼拷貝框
<a href="#" title="這是提示">tip</a> <script Language="JavaScript"> //***********默認(rèn)設(shè)置定義.********************* tPopWait=50;//停留tWait豪秒后顯示提示。 tPopShow=5000;//顯示tShow豪秒后關(guān)閉提示 showPopStep=20; popOpacity=99; //***************內(nèi)部變量定義***************** sPop=null; curShow=null; tFadeOut=null; tFadeIn=null; tFadeWaiting=null; document.write("<style type='text/css'id='defaultPopStyle'>"); document.write(".cPopText { background-color: #F8F8F5;color:#000000; border: 1px #000000 solid;font-color: font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}"); document.write("</style>"); document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>"); function showPopupText(){ var o=event.srcElement; MouseX=event.x; MouseY=event.y; if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""}; if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""}; if(o.dypop!=sPop) { sPop=o.dypop; clearTimeout(curShow); clearTimeout(tFadeOut); clearTimeout(tFadeIn); clearTimeout(tFadeWaiting); if(sPop==null || sPop=="") { dypopLayer.innerHTML=""; dypopLayer.style.filter="Alpha()"; dypopLayer.filters.Alpha.opacity=0; } else { if(o.dyclass!=null) popStyle=o.dyclass else popStyle="cPopText"; curShow=setTimeout("showIt()",tPopWait); } } } function showIt(){ dypopLayer.className=popStyle; dypopLayer.innerHTML=sPop; popWidth=dypopLayer.clientWidth; popHeight=dypopLayer.clientHeight; if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24 else popLeftAdjust=0; if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24 else popTopAdjust=0; dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust; dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust; dypopLayer.style.filter="Alpha(Opacity=0)"; fadeOut(); } function fadeOut(){ if(dypopLayer.filters.Alpha.opacity<popOpacity) { dypopLayer.filters.Alpha.opacity+=showPopStep; tFadeOut=setTimeout("fadeOut()",1); } else { dypopLayer.filters.Alpha.opacity=popOpacity; tFadeWaiting=setTimeout("fadeIn()",tPopShow); } } function fadeIn(){ if(dypopLayer.filters.Alpha.opacity>0) { dypopLayer.filters.Alpha.opacity-=1; tFadeIn=setTimeout("fadeIn()",1); } } document.onmouseover=showPopupText; </script>

三如果文字過(guò)長(zhǎng),則將過(guò)長(zhǎng)的部分變成省略號(hào)顯示：

運(yùn)行代碼框
<DIV STYLE="width: 120px; height: 50px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis"> <NOBR>就是比如有一行文字，很長(zhǎng)，表格內(nèi)一行顯示不下.</NOBR> </DIV>

四滾動(dòng)的圖片

運(yùn)行代碼框
<script language="javascript"> imgArr=new Array() imgArr[0]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>" imgArr[1]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>" imgArr[2]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>" imgArr[3]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>" imgArr[4]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>" var moveStep=4 //步長(zhǎng)，單位：pixel var moveRelax=100 //移動(dòng)時(shí)間間隔，單位：ms ns4=(document.layers)?true:false var displayImgAmount=4 //視區(qū)窗口可顯示個(gè)數(shù) var divWidth=220 //每塊圖片占位寬 var divHeight=145 //每塊圖片占位高 var startDnum=0 var nextDnum=startDnum+displayImgAmount var timeID var outHover=false var startDivClipLeft var nextDivClipRight function initDivPlace(){ if (ns4){ for (i=0;i<displayImgAmount;i++){ eval("document.divOuter.document.divAds"+i+".left="+divWidth*i) } for (i=displayImgAmount;i<imgArr.length;i++){ eval("document.divOuter.document.divAds"+i+".left="+divWidth*displayImgAmount) } }else{ for (i=0;i<displayImgAmount;i++){ eval("document.all.divAds"+i+".style.left="+divWidth*i) } for (i=displayImgAmount;i<imgArr.length;i++){ eval("document.all.divAds"+i+".style.left="+divWidth*displayImgAmount) } } } function mvStart(){ timeID=setTimeout(moveLeftDiv,moveRelax) } function mvStop(){ clearTimeout(timeID) } function moveLeftDiv(){ if (ns4){ for (i=0;i<=displayImgAmount;i++){ eval("document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left=document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left-moveStep") } startDivClipLeft=parseInt(eval("document.divOuter.document.divAds"+startDnum+".clip.left")) nextDivClipRight=parseInt(eval("document.divOuter.document.divAds"+nextDnum+".clip.right")) if (startDivClipLeft+moveStep>divWidth){ eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+divWidth) eval("document.divOuter.document.divAds"+startDnum+".left="+divWidth*displayImgAmount) eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".left=document.divOuter.document.divAds"+nextDnum+".left+"+divWidth) eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".clip.left=0") startDnum=(++startDnum)%imgArr.length nextDnum=(startDnum+displayImgAmount)%imgArr.length startDivClipLeft=moveStep-(divWidth-startDivClipLeft) nextDivClipRight=moveStep-(divWidth-nextDivClipRight) }else{ eval("document.divOuter.document.divAds"+nextDnum+".clip.left=0") startDivClipLeft+=moveStep nextDivClipRight+=moveStep } eval("document.divOuter.document.divAds"+startDnum+".clip.left="+startDivClipLeft) eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+nextDivClipRight) }else{ for (i=0;i<=displayImgAmount;i++){ eval("document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.left=document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.pixelLeft-moveStep") } startDivClipLeft=parseInt(eval("document.all.divAds"+startDnum+".currentStyle.clipLeft")) nextDivClipRight=parseInt(eval("document.all.divAds"+nextDnum+".currentStyle.clipRight")) if (startDivClipLeft+moveStep>divWidth){ eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+divWidth+","+divHeight+",0"+")'") eval("document.all.divAds"+startDnum+".style.left="+divWidth*displayImgAmount) eval("document.all.divAds"+parseInt((nextDnum+1)%imgArr.length)+".style.left=document.all.divAds"+nextDnum+".style.pixelLeft+"+divWidth) startDnum=(++startDnum)%imgArr.length nextDnum=(startDnum+displayImgAmount)%imgArr.length startDivClipLeft=moveStep-(divWidth-startDivClipLeft) nextDivClipRight=moveStep-(divWidth-nextDivClipRight) }else{ startDivClipLeft+=moveStep nextDivClipRight+=moveStep } eval("document.all.divAds"+startDnum+".style.clip='rect(0,"+divWidth+","+divHeight+","+startDivClipLeft+")'") eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+nextDivClipRight+","+divHeight+",0)'") } if (outHover){ mvStop() }else{ mvStart() } } function writeDivs(){ if (ns4){ document.write("<ilayer name=divOuter width=750 height="+divHeight+">") for (i=0;i<imgArr.length;i++){ document.write("<layer name=divAds"+i+">") document.write(imgArr[i]+" ") document.write("</layer>") } document.write("</ilayer>") document.close() for (i=displayImgAmount;i<imgArr.length;i++){ eval("document.divOuter.document.divAds"+i+".clip.right=0") } }else{ document.write("<div id=divOuter style='position:relative' width=750 height="+divHeight+">") for (i=0;i<imgArr.length;i++){ document.write("<div id=divAds"+i+" style='position:absolute;clip:rect(0,"+divWidth+","+divHeight+",0)'>") document.write(imgArr[i]+" ") document.write("</div>") } document.write("</div>") for (i=displayImgAmount;i<imgArr.length;i++){ eval("document.all.divAds"+i+".style.clip='rect(0,0,"+divHeight+",0)'") } } } </script> <BODY onload=javascript:mvStart()> <SCRIPT language=javascript>writeDivs();initDivPlace();</SCRIPT>

五接收鍵盤(pán)指令的腳本:

代碼拷貝框
<SCRIPT language="JavaScript">  </SCRIPT> onkeydown="javascript:onenter();" function onenter(){ if(event.keyCode==13){ alert("回車"); } }

六讓你的文本鏈接漸隱漸顯:

運(yùn)行代碼框
<META NAME="Description" CONTENT=""> </HEAD> <BODY> <script language="javascript" type="text/javascript"> startColor = "#671700"; // 定義鏈接顏色 endColor = "#D8D1C5"; // 定義要漸變到最后的顏色 stepIn = 17; stepOut = 23; /* 定義是否讓所有的文本鏈接自動(dòng)漸變，true為是，false為否 */ autoFade = true; /* 在這里定義css樣式里的類class：fade，如果為true，那么你要將要漸變的鏈接上加上此fade樣式 */ sloppyClass = false; hexa = new makearray(16); for(var i = 0; i < 10; i++) hexa[i] = i; hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; hexa[13]="d"; hexa[14]="e"; hexa[15]="f"; document.onmouseover = domouseover; document.onmouseout = domouseout; startColor = dehexize(startColor.toLowerCase()); endColor = dehexize(endColor.toLowerCase()); var fadeId = new Array(); function dehexize(Color){ var colorArr = new makearray(3); for (i=1; i<7; i++){ for (j=0; j<16; j++){ if (Color.charAt(i) == hexa[j]){ if (i%2 !=0) colorArr[Math.floor((i-1)/2)]=eval(j)*16; else colorArr[Math.floor((i-1)/2)]+=eval(j); } } } return colorArr; } function domouseover() { if(document.all){ var srcElement = event.srcElement; if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) fade(startColor,endColor,srcElement.uniqueID,stepIn); } } function domouseout() { if (document.all){ var srcElement = event.srcElement; if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) fade(endColor,startColor,srcElement.uniqueID,stepOut); } } function makearray(n) { this.length = n; for(var i = 1; i <= n; i++) this[i] = 0; return this; } function hex(i) { if (i < 0) return "00"; else if (i > 255) return "ff"; else return "" + hexa[Math.floor(i/16)] + hexa[i%16];} function setColor(r, g, b, element) { var hr = hex(r); var hg = hex(g); var hb = hex(b); element.style.color = "#"+hr+hg+hb; } function fade(s,e, element,step){ var sr = s[0]; var sg = s[1]; var sb = s[2]; var er = e[0]; var eg = e[1]; var eb = e[2]; if (fadeId[0] != null && fade[0] != element){ setColor(sr,sg,sb,eval(fadeId[0])); var i = 1; while(i < fadeId.length){ clearTimeout(fadeId[i]); i++; } } for(var i = 0; i <= step; i++) { fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" + step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+ ")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step); } fadeId[0] = element; } </script> </BODY> </HTML> <A HREF="">讓你的文本鏈接漸隱漸顯</A>

七類似與QQ的好友/黑名單之類的樹(shù)型菜單_極品:

八很多的腳本翻頁(yè):

運(yùn)行代碼框
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title> JavaScript: showPages v1.0 [by Lapuasi.com]</title> <script language="JavaScript">  </script> <style> /* Pages Main Tyle */ .pages { color: #000000; cursor: default; font-size: 10px; font-family: Tahoma, Verdana; padding: 3px 0px 3px 0px; } .pages .count, .pages .number, .pages .arrow { color: #000000; font-size: 10px; background-color: #F7F7F7; border: 1px solid #CCCCCC; } /* Page and PageCount Style */ .pages .count { font-weight: bold; border-right: none; padding: 2px 10px 1px 10px; } /* Mode 0,1,2 Style (Number) */ .pages .number { font-weight: normal; padding: 2px 10px 1px 10px; } .pages .number a, .pages .number span { font-size: 10px; } .pages .number span { color: #999999; margin: 0px 3px 0px 3px; } .pages .number a { color: #000000; text-decoration: none; } .pages .number a:hover { color: #0000ff; } /* Mode 3 Style (Arrow) */ .pages .arrow { font-weight: normal; padding: 0px 5px 0px 5px; } .pages .arrow a, .pages .arrow span { font-size: 10px; font-family: Webdings; } .pages .arrow span { color: #999999; margin: 0px 5px 0px 5px; } .pages .arrow a { color: #000000; text-decoration: none; } .pages .arrow a:hover { color: #0000ff; } /* Mode 4 Style (Select) */ .pages select, .pages input { color: #000000; font-size: 10px; font-family: Tahoma, Verdana; } /* Mode 5 Style (Input) */ .pages .input input.ititle, .pages .input input.itext, .pages .input input.icount { color: #666666; font-weight: bold; background-color: #F7F7F7; border: 1px solid #CCCCCC; } .pages .input input.ititle { width: 70px; text-align: right; border-right: none; } .pages .input input.itext { width: 25px; color: #000000; text-align: right; border-left: none; border-right: none; } .pages .input input.icount { width: 35px; text-align: left; border-left: none; } .pages .input input.ibutton { height: 17px; color: #FFFFFF; font-weight: bold; font-family: Verdana; background-color: #999999; border: 1px solid #666666; padding: 0px 0px 2px 1px; margin-left: 2px; cursor: hand; } /* body */ body { font-size: 12px; } </style> </head> <body> <script language="JavaScript">  </script> </body> </html>

九 DIV的透明層實(shí)現(xiàn):

運(yùn)行代碼框
<body bgcolor="#ff0ddd"> <div id="Layer1" style="position:absolute; width:260px; height:115px; z-index:1; left: 50px; top: 77px; filter:Alpha(opacity=30)"> <table width="96%" border="1" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#999999"> <tr> <td height="25" bgcolor="#f5f5f5" class="13">你也可以在這里插入圖片</td> </tr> <tr> <td height="20" bgcolor="#f5f5f5" class="12">你想注冊(cè)地圖名片嗎</td> </tr> <tr> <td height="20" bgcolor="#f5f5f5" class="12">http://mc.mapabc.com</td> </tr> <tr> <td height="20" bgcolor="#f5f5f5" class="12">EMAIL:lipeng@mapabc.com</td> </tr> <tr> <td height="20" bgcolor="#f5f5f5" class="12">地址</td> </tr> <tr> <td height="20" bgcolor="#f5f5f5" class="12">郵編</td> </tr> </table> </div>

十 JSP頁(yè)面自動(dòng)生成html頁(yè)面/或任何格式頁(yè)面:

先建立一個(gè)模本頁(yè)面:template.htm

代碼拷貝框
<html> <head> <title>###title###</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <LINK href="../css.css" rel=stylesheet type=text/css> </head> <body> <table width="500" border="0" align="center" cellpadding="0" cellspacing="2"> <tr> <td align="center">###title###</td> </tr> <tr> <td align="center">作者：###author### </td> </tr> <tr> <td>###content### </td> </tr> </table> </body> </html>

再寫(xiě)一個(gè)JSP頁(yè)面: buildhtml.jsp:

代碼拷貝框
<%@ page contentType="text/html; charset=gb2312" import="java.util.*,java.io.*"%> <% try{ String title="李鵬的jsp生成靜態(tài)html文件"; String content="小樣，還搞不定你？"; String editer="hpsoft"; String filePath = ""; filePath = request.getRealPath("/")+"template.htm"; out.print(filePath); String templateContent=""; FileInputStream fileinputstream = new FileInputStream(filePath);//讀取模塊文件 int lenght = fileinputstream.available(); byte bytes[] = new byte[lenght]; fileinputstream.read(bytes); fileinputstream.close(); templateContent = new String(bytes); out.print(templateContent); templateContent=templateContent.replaceAll("###title###",title); templateContent=templateContent.replaceAll("###content###",content); templateContent=templateContent.replaceAll("###author###",editer);//替換掉模塊中相應(yīng)的地方 out.print(templateContent); // 根據(jù)時(shí)間得文件名 Calendar calendar = Calendar.getInstance(); String fileame = String.valueOf(calendar.getTimeInMillis()) +".html"; fileame = request.getRealPath("/")+fileame;//生成的html文件保存路徑 FileOutputStream fileoutputstream = new FileOutputStream(fileame);//建立文件輸出流 out.print("文件輸出路徑:<br>"); out.print(fileame); byte tag_bytes[] = templateContent.getBytes(); fileoutputstream.write(tag_bytes); fileoutputstream.close(); } catch(Exception e){ out.print(e.toString()); } %>
[Ctrl+A 全部選擇然后拷貝]

十一超級(jí)強(qiáng)大的表單驗(yàn)證：

運(yùn)行代碼框
<title>表單驗(yàn)證類 Validator v1.01</title> <style> body,td{font:normal 12px Verdana;color:#333333} input,textarea,select,td{font:normal 12px Verdana;color:#333333;border:1px solid #999999;background:#ffffff} table{border-collapse:collapse;} td{padding:3px} input{height:20;} textarea{width:80%;height:50px;overfmin:auto;} form{display:inline} </style> <table align="center"> <form name="theForm" id="demo" action="" method="get" onSubmit="return Validator.Validate(this,2)"> <tr> <td>真實(shí)姓名：</td><td><input name="Name" dataType="Chinese" msg="真實(shí)姓名只允許中文"></td> </tr> <tr> <td>英文名：</td><td><input name="Nick" dataType="English" require="false" msg="英文名只允許英文字母"></td> </tr> <tr> <td>主頁(yè)：</td><td><input name="Homepage" require="false" dataType="Url" msg="非法的Url"></td> </tr> <tr> <td>密碼：</td><td><input name="Password" dataType="SafeString" msg="密碼不符合安全規(guī)則" type="password"></td> </tr> <tr> <td>重復(fù)：</td><td><input name="Repeat" dataType="Repeat" to="Password" msg="兩次輸入的密碼不一致" type="password"></td> </tr> <tr> <td>信箱：</td><td><input name="Email" dataType="Email" msg="信箱格式不正確"></td> </tr> <tr> <td>信箱：</td><td><input name="Email" dataType="Repeat" to="Email" msg="兩次輸入的信箱不一致"></td> </tr> <tr> <td>QQ：</td><td><input name="QQ" require="false" dataType="QQ" msg="QQ號(hào)碼不存在"></td> </tr> <tr> <td>身份證：</td><td><input name="Card" dataType="IdCard" msg="身份證號(hào)碼不正確"></td> </tr> <tr> <td>年齡：</td><td><input name="Year" dataType="Range" msg="年齡必須在18~28之間" min="18" max="28"></td> </tr> <tr> <td>年齡1：</td><td><input name="Year1" require="false" dataType="Compare" msg="年齡必須在18以上" to="18" operator="GreaterThanEqual"></td> </tr> <tr> <td>電話：</td><td><input name="Phone" require="false" dataType="Phone" msg="電話號(hào)碼不正確"></td> </tr> <tr> <td>手機(jī)：</td><td><input name="Mobile" require="false" dataType="Mobile" msg="手機(jī)號(hào)碼不正確"></td> </tr> <tr> <td>生日：</td><td><input name="Birthday" dataType="Date" format="ymd" msg="生日日期不存在"></td> </tr> <tr> <td>郵政編碼：</td><td><input name="Zip" dataType="Custom" regexp="^[1-9]/d{5}$" msg="郵政編碼不存在"></td> </tr> <tr> <td>郵政編碼：</td><td><input name="Zip1" dataType="Zip" msg="郵政編碼不存在"></td> </tr> <tr> <td>操作系統(tǒng)：</td><td><select name="Operation" dataType="Require" msg="未選擇所用操作系統(tǒng)" ><option value="">選擇您所用的操作系統(tǒng)</option><option value="Win98">Win98</option><option value="Win2k">Win2k</option><option value="WinXP">WinXP</option></select></td> </tr> <tr> <td>所在省份：</td><td>廣東<input name="Province" value="1" type="radio">陜西<input name="Province" value="2" type="radio">浙江<input name="Province" value="3" type="radio">江西<input name="Province" value="4" type="radio" dataType="Group" msg="必須選定一個(gè)省份" ></td> </tr> <tr> <td>愛(ài)好：</td><td>運(yùn)動(dòng)<input name="Favorite" value="1" type="checkbox">上網(wǎng)<input name="Favorite" value="2" type="checkbox">聽(tīng)音樂(lè)<input name="Favorite" value="3" type="checkbox">看書(shū)<input name="Favorite" value="4" type="checkbox"" dataType="Group" min="2" max="3" msg="必須選擇2~3種愛(ài)好"></td> </tr> <td>自我介紹：</td><td><textarea name="Description" dataType="Limit" max="10" msg="自我介紹內(nèi)容必須在10個(gè)字之內(nèi)">中文是一個(gè)字</textarea></td> </tr> <td>自傳：</td><td><textarea name="History" dataType="LimitB" min="3" max="10" msg="自傳內(nèi)容必須在[3,10]個(gè)字節(jié)之內(nèi)">中文是兩個(gè)字節(jié)t</textarea></td> </tr> <tr> <td colspan="2"><input name="Submit" type="submit" value="確定提交"><input onClick="Validator.Validate(document.getElementById('demo'))" value="檢驗(yàn)?zāi)Ｊ?" type="button"><input onClick="Validator.Validate(document.getElementById('demo'),2)" value="檢驗(yàn)?zāi)Ｊ?" type="button"><input onClick="Validator.Validate(document.getElementById('demo'),3)" value="檢驗(yàn)?zāi)Ｊ?" type="button"></td> </tr> </form> </table> <script> /************************************************* Validator v1.01 code by 我佛山人 wfsr@cunite.com http://www.cunite.com *************************************************/ Validator = { Require : /.+/, Email : /^/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*$/, Phone : /^((/(/d{3}/))|(/d{3}/-))?(/(0/d{2,3}/)|0/d{2,3}-)?[1-9]/d{6,7}$/, Mobile : /^((/(/d{3}/))|(/d{3}/-))?13/d{9}$/, Url : /^http:////[A-Za-z0-9]+/.[A-Za-z0-9]+[//=/?%/-&_~`@[/]/':+!]*([^<>/"/"])*$/, IdCard : /^/d{15}(/d{2}[A-Za-z0-9])?$/, Currency : /^/d+(/./d+)?$/, Number : /^/d+$/, Zip : /^[1-9]/d{5}$/, QQ : /^[1-9]/d{4,8}$/, Integer : /^[-/+]?/d+$/, Double : /^[-/+]?/d+(/./d+)?$/, English : /^[A-Za-z]+$/, Chinese : /^[/u0391-/uFFE5]+$/, UnSafe : /^(([A-Z]*|[a-z]*|/d*|[-_/~!@#/$%/^&/*/./(/)/[/]/{/}<>/?/////'/"]*)|.{0,5})$|/s/, IsSafe : function(str){return !this.UnSafe.test(str);}, SafeString : "this.IsSafe(value)", Limit : "this.limit(value.length,getAttribute('min'), getAttribute('max'))", LimitB : "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))", Date : "this.IsDate(value, getAttribute('min'), getAttribute('format'))", Repeat : "value == document.getElementsByName(getAttribute('to'))[0].value", Range : "getAttribute('min') < value && value < getAttribute('max')", Compare : "this.compare(value,getAttribute('operator'),getAttribute('to'))", Custom : "this.Exec(value, getAttribute('regexp'))", Group : "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))", ErrorItem : [document.forms[0]], ErrorMessage : ["以下原因?qū)е绿峤皇。?t/t/t/t"], Validate : function(theForm, mode){ var obj = theForm || event.srcElement; var count = obj.elements.length; this.ErrorMessage.length = 1; this.ErrorItem.length = 1; this.ErrorItem[0] = obj; for(var i=0;i<count;i++){ with(obj.elements[i]){ var _dataType = getAttribute("dataType"); if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined") continue; this.ClearState(obj.elements[i]); if(getAttribute("require") == "false" && value == "") continue; switch(_dataType){ case "Date" : case "Repeat" : case "Range" : case "Compare" : case "Custom" : case "Group" : case "Limit" : case "LimitB" : case "SafeString" : if(!eval(this[_dataType])) { this.AddError(i, getAttribute("msg")); } break; default : if(!this[_dataType].test(value)){ this.AddError(i, getAttribute("msg")); } break; } } } if(this.ErrorMessage.length > 1){ mode = mode || 1; var errCount = this.ErrorItem.length; switch(mode){ case 2 : for(var i=1;i<errCount;i++) this.ErrorItem[i].style.color = "red"; case 1 : alert(this.ErrorMessage.join("/n")); this.ErrorItem[1].focus(); break; case 3 : for(var i=1;i<errCount;i++){ try{ var span = document.createElement("SPAN"); span.id = "__ErrorMessagePanel"; span.style.color = "red"; this.ErrorItem[i].parentNode.appendChild(span); span.innerHTML = this.ErrorMessage[i].replace(//d+:/,"*"); } catch(e){alert(e.description);} } this.ErrorItem[1].focus(); break; default : alert(this.ErrorMessage.join("/n")); break; } return false; } return true; }, limit : function(len,min, max){ min = min || 0; max = max || Number.MAX_VALUE; return min <= len && len <= max; }, LenB : function(str){ return str.replace(/[^/x00-/xff]/g,"**").length; }, ClearState : function(elem){ with(elem){ if(style.color == "red") style.color = ""; var lastNode = parentNode.childNodes[parentNode.childNodes.length-1]; if(lastNode.id == "__ErrorMessagePanel") parentNode.removeChild(lastNode); } }, AddError : function(index, str){ this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index]; this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str; }, Exec : function(op, reg){ return new RegExp(reg,"g").test(op); }, compare : function(op1,operator,op2){ switch (operator) { case "NotEqual": return (op1 != op2); case "GreaterThan": return (op1 > op2); case "GreaterThanEqual": return (op1 >= op2); case "LessThan": return (op1 < op2); case "LessThanEqual": return (op1 <= op2); default: return (op1 == op2); } }, MustChecked : function(name, min, max){ var groups = document.getElementsByName(name); var hasChecked = 0; min = min || 1; max = max || groups.length; for(var i=groups.length-1;i>=0;i--) if(groups[i].checked) hasChecked++; return min <= hasChecked && hasChecked <= max; }, IsDate : function(op, formatString){ formatString = formatString || "ymd"; var m, year, month, day; switch(formatString){ case "ymd" : m = op.match(new RegExp("^((//d{4})|(//d{2}))([-./])(//d{1,2})//4(//d{1,2})$")); if(m == null ) return false; day = m[6]; month = m[5]--; year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10)); break; case "dmy" : m = op.match(new RegExp("^(//d{1,2})([-./])(//d{1,2})//2((//d{4})|(//d{2}))$")); if(m == null ) return false; day = m[1]; month = m[3]--; year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10)); break; default : break; } if(!parseInt(month)) return false; month = month==12 ?0:month; var date = new Date(year, month, day); return (typeof(date) == "object" && year == date.getFullYear() && month == date.getMonth() && day == date.getDate()); function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;} } } </script>

十二漂亮的腳本日歷：

運(yùn)行代碼框
<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;width: 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;width: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-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 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;width:11%;text-align: center;} .DaySat {font-family: verdana;font-size: 7pt;color:#FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;} .DaySun {font-family: verdana;font-size: 7pt;color: #FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 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;width:11%;text-align: center;} .DaySatTitle {font-family: verdana;font-size: 9pt;color:#FF0000;text-decoration: none;background-color:#C0D0E8;text-align: center;height: 20px;width: 12%;} .DaySunTitle {font-family: verdana;font-size: 9pt;color: #FF0000;text-decoration: none;background-color: #C0D0E8;text-align: center;height: 20px;width: 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>

十三進(jìn)入,退出頁(yè)面的各種效果:

進(jìn)入頁(yè)面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">
推出頁(yè)面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">
這個(gè)是頁(yè)面被載入和調(diào)出時(shí)的一些特效。duration表示特效的持續(xù)時(shí)間，以秒為單位。transition表示使用哪種特效，取值為1-23:
　　0 矩形縮小
　　1 矩形擴(kuò)大
　　2 圓形縮小
　　3 圓形擴(kuò)大
　　4 下到上刷新
　　5 上到下刷新
　　6 左到右刷新
　　7 右到左刷新
　　8 豎百葉窗
　　9 橫百葉窗
　　10 錯(cuò)位橫百葉窗
　　11 錯(cuò)位豎百葉窗
　　12 點(diǎn)擴(kuò)散
　　13 左右到中間刷新
　　14 中間到左右刷新
　　15 中間到上下
　　16 上下到中間
　　17 右下到左上
　　18 右上到左下
　　19 左上到右下
　　20 左下到右上
　　21 橫條
　　22 豎條
　　23 以上22種隨機(jī)選擇一種

十四很酷的效果,表格被選中回變顏色:

運(yùn)行代碼框
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <html> <head> </head> <title>Mapabc地圖無(wú)限</title> <script language="JavaScript"> var searchResult=new Array();//鼠標(biāo)滑過(guò)時(shí)顯示背景色 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>把鼠標(biāo)移過(guò)來(lái)</TD> <TD>把鼠標(biāo)移過(guò)來(lái)</TD> </TR> <TR> <TD>把鼠標(biāo)移過(guò)來(lái)</TD> <TD>把鼠標(biāo)移過(guò)來(lái)</TD> </TR> <TR> <TD>把鼠標(biāo)移過(guò)來(lái)</TD> <TD>把鼠標(biāo)移過(guò)來(lái)</TD> </TR> <TR> <TD>把鼠標(biāo)移過(guò)來(lái)</TD> <TD>把鼠標(biāo)移過(guò)來(lái)</TD> </TR> </table> </body> </html>

十五彈出提示的效果：

運(yùn)行代碼框
<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='width: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);width: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呀,錯(cuò)誤了...<br>[確定]</span>"); document.write(" </div>"); document.write("</div>"); } function caoMove(obj) //實(shí)現(xiàn)層的拖移 { 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>

十六圖片之間的切換：

運(yùn)行代碼框
<script language=JavaScript>  </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_圓邊圓角的實(shí)現(xiàn)：

運(yùn)行代碼框
<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>

十八跳動(dòng)的菜單：

運(yùn)行代碼框
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>模仿as效果的導(dǎo)航菜單</title> <style type="text/css">  </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寫(xiě)ASP有沒(méi)有先天性的不足？<br />3.沒(méi)有了。</div> <div id="board2">1.xhtml+css真的來(lái)了嗎？<br />2.Flash取代傳統(tǒng)網(wǎng)站<br />3.Flash何時(shí)才能連接數(shù)據(jù)庫(kù)？</div> <div id="board3">1.程序員與小姐的10個(gè)相同。<br />2.中國(guó)的程序員與中國(guó)的足球？</div> <div id="board4">1.二十一世紀(jì)最缺的是什么?人才<br /> <a target="_blank">http://www.gamvan.com</a> <a target="_blank">http://www.gamvan.com</a></div> </body> </html>

十九通過(guò)頁(yè)面抓取照片：

運(yùn)行代碼框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  <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> <FORM id=Form1 name=Form1 action=te.aspx method=post> <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）或者其他網(wǎng)頁(yè)正在使用攝像頭,請(qǐng)先關(guān)閉相關(guān)程序，否則本</FONT><FONT face=宋體>網(wǎng)頁(yè)對(duì)攝像頭的功能不能使用。<BR>2、本網(wǎng)頁(yè)必須使用一個(gè)插件ezvidc60.ocx，如果你未安裝，請(qǐng)<A >下載安裝</A>,(把下載的文件ezvid.rar解壓到一個(gè)目錄后，雙擊執(zhí)行ezvid.bat即可)。如果您認(rèn)為這會(huì)威脅到您計(jì)算機(jī)的安全，請(qǐng)關(guān)閉本頁(yè)。</FONT></FONT></TD> <TD style="HEIGHT: 222px" borderColor=#ffffff align=center> <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=center 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>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> <FORM id=Form1 name=Form1 action=te.aspx method=post> <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）或者其他網(wǎng)頁(yè)正在使用攝像頭,請(qǐng)先關(guān)閉相關(guān)程序，否則本</FONT><FONT face=宋體>網(wǎng)頁(yè)對(duì)攝像頭的功能不能使用。<BR>2、本網(wǎng)頁(yè)必須使用一個(gè)插件ezvidc60.ocx，如果你未安裝，請(qǐng)<A >下載安裝</A>,(把下載的文件ezvid.rar解壓到一個(gè)目錄后，雙擊執(zhí)行ezvid.bat即可)。如果您認(rèn)為這會(huì)威脅到您計(jì)算機(jī)的安全，請(qǐng)關(guān)閉本頁(yè)。</FONT></FONT></TD> <TD style="HEIGHT: 222px" borderColor=#ffffff align=center> <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=center 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>

二十客戶端靜態(tài)頁(yè)面玩分頁(yè)：

運(yùn)行代碼框
<!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">  </SCRIPT> </BODY> </HTML>

二十一類似與google個(gè)性頁(yè)面的好東東:

代碼拷貝框
<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: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[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){//取得坐標(biā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;'><$2></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>暫時(shí)無(wú)法顯示GMAIL內(nèi)容</td> <tr> </table><table border=0 class="dragTable" cellspacing="0"> <tr> <td>新浪體育</td> </tr> <tr> <td>解剖威隊(duì)獨(dú)門(mén)利器FW28 2萬(wàn)轉(zhuǎn)引擎匹配超級(jí)變速器頒獎(jiǎng)：辛吉斯欣喜能以冠軍起步<br/> 印度搭檔創(chuàng)下紀(jì)錄法新社前瞻冬奧短道速滑：中韓唱主角美加施冷箭</td> <tr> </table> <table border=0 class="dragTable" cellspacing="0"> <tr> <td>焦點(diǎn)</td> </tr> <tr> <td>京廣線中斷4小時(shí)20臨客返漢晚點(diǎn) 中國(guó)新聞網(wǎng)-湖北分社 - 所有 235 相關(guān)報(bào)道 »哈馬斯已有總理人選解放日?qǐng)?bào)報(bào)業(yè)集團(tuán) - 所有 489 相關(guān)報(bào)道 »陳水扁是兩岸關(guān)系麻煩制造者武漢晨報(bào) - 所有 179 相關(guān)報(bào)道 »</td> <tr> </table> </td> <td width="25%"> <table border=0 class="dragTable" cellspacing="0"> <tr> <td>中關(guān)村在線</td> </tr> <tr> <td>新年行情速遞雙敏板卡低價(jià)推薦終于等到了，映泰6600GT一降降一百羅技G15游戲鍵盤(pán)熱力促銷，代購(gòu)價(jià)僅529元 </td> <tr> </table></td> <td width="25%"> <table border=0 class="dragTable" cellspacing="0"> <tr> <td>網(wǎng)易商業(yè)</td> </tr> <tr> <td>上海GDP增幅去年出現(xiàn)回落應(yīng)對(duì)反傾銷中國(guó)鞋企聯(lián)手對(duì)抗歐盟尹家緒操盤(pán)南方汽車長(zhǎng)安謀求曲線整體境外上市</td> <tr> </table> <table border=0 class="dragTable" cellspacing="0"> <tr> <td>黑可天下</td> </tr> <tr> <td>上海GDP增幅去年出現(xiàn)回落應(yīng)對(duì)反傾銷中國(guó)鞋企聯(lián)手對(duì)抗歐盟尹家緒操盤(pán)南方汽車長(zhǎng)安謀求曲線整體境外上市</td> <tr> </table> </td> </tr> </table> <input type="button" value="SHOW" onClick="_show(document.documentElement.innerHTML)" /> </body> </html>

二十二漂亮的表格：

運(yùn)行代碼框
<!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> </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>

二十三經(jīng)典的帶陰影的可拖動(dòng)的浮動(dòng)層--轉(zhuǎn)貼自網(wǎng)友:marvellous

運(yùn)行代碼框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>MyPixbot</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript" type="text/JavaScript">  </script> <style type="text/css">  </style> </head> <body> <div id="assist" style="position:absolute; left:15px; top:68px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('assist','',0,0,150,18,true,false,-1,-1,-1,-1,15,68,100,'',false,'')"> <table width="180" border="1" cellpadding="0" cellspacing="0"> <tr> <td class="caption">SeekAssist</td> <td width="14" align="center"><a href="#" onclick="with(MM_findObj('assistwin').style)display=display=='none'?'':'none'">%</a></td> <td width="14" align="center"><a href="#" onClick="MM_showHideLayers('assist','','hide')">X</a></td> </tr> <tr id="assistwin"> <td height="100" colspan="3" bordercolor="#eeeeee"> </td> </tr> </table> <br> </div> <script>loadwin('assist')</script> <div id="rank" style="position:absolute; left:15px; top:194px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('rank','',0,0,150,18,true,false,-1,-1,-1,-1,15,194,100,'',false,'')"> <table width="180" border="1" cellpadding="0" cellspacing="0"> <tr> <td class="caption">SeekRank</td> <td width="14" align="center"><a href="#" onclick="with(MM_findObj('rankwin').style)display=display=='none'?'':'none'">%</a></td> <td width="14" align="center"><a href="#" onClick="MM_showHideLayers('assist','','inherit','rank','','hide')">X</a></td> </tr> <tr id="rankwin"> <td height="100" colspan="3" bordercolor="#eeeeee"> </td> </tr> </table> <br> </div> <script>setTimeout("loadwin('rank')",500)</script> <div id="mycolor" style="position:absolute; left:15px; top:320px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('mycolor','',0,0,150,18,true,false,-1,-1,-1,-1,15,320,100,'',false,'')"> <table width="180" border="1" cellpadding="0" cellspacing="0"> <tr> <td class="caption">MyColor</td> <td width="14" align="center"><a href="#" onclick="with(MM_findObj('mycolorwin').style)display=display=='none'?'':'none'">%</a></td> <td width="14" align="center"><a href="#" onClick="MM_showHideLayers('mycolor','','hide')">X</a></td> </tr> <tr id="mycolorwin"> <td height="100" colspan="3" bordercolor="#eeeeee"><table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr> <td align="center"><a href="#" onclick="cs('#00CCFF','#f6f6f6','#eeeeee')">Default</a></td> </tr> <tr> <td align="center"><a href="#" onclick="cs('red','#eeccee','#eeddee')">StyleSheet#1</a></td> </tr> <tr> <td align="center"><a href="#" onclick="cs('#99ccff','#eeeeee','#ccddff')">StyleSheet#2</a></td> </tr> <tr> <td align="center"><a href="#" onclick="cs('#ff9999','#ffffff','#ffeeff')">StyleSheet#3</a></td> </tr> <tr> <td align="center"><a href="#" onclick="cs('skyblue','#eeeeee','#99ddff')">StyleSheet#4</a></td> </tr> <tr> <td align="center"><a href="#" onclick="cs('#009900','#eeffee','#ddffdd')">StyleSheet#5</a></td> </tr> </table></td> </tr> </table> <br> </div> <script>setTimeout("loadwin('mycolor')",1000)</script> <div id="results" style="position:absolute; left:204px; top:68px; width:575px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('results','',0,0,400,18,true,false,-1,-1,-1,-1,204,68,50,'',false,'')"> <table width="570" border="1" cellpadding="0" cellspacing="0"> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="caption">Results</td> <td width="12" class="button"><a href="#" onClick="with(MM_findObj('resultswin').style)display=display=='none'?'':'none'">%</a></td> <td width="12" class="button"><a href="#" onClick="MM_showHideLayers('results','','inherit')">X</a></td> </tr> </table></td> </tr> <tr> <td height="20" bordercolor="#eeeeee"><input name="url" type="text" value="http://www.google.com/search?q=ezlee" size="100"> <a href="#" onclick="mainframe.location=url.value">Search</a></td> </tr> <tr id="resultswin"> <td height="318" valign="top" class="navframe"><aiframe name="mainframe" id="mainframe" src="http://www.google.com/search?q=ezlee" width="100%" height="100%" frameborder="0" scrolling="auto"><font color="#FF0000">Welcome!</font></aiframe></td> </tr> <tr> <td height="14" class="statusbar">Ready!</td> </tr> </table> <br> </div> <script>setTimeout("loadwin('results')",2000)</script> </body> </html>

二十四運(yùn)行代碼的代碼------網(wǎng)友:Lenvo

運(yùn)行代碼框
<script> function Preview() { var TestWin=open(''); TestWin.document.write(code.value); } </script> <textarea id=code cols=60 rows=15></textarea> <br> <button onclick=Preview() >運(yùn)行</button>

二十五凹陷文字------------網(wǎng)友:Lenvo

運(yùn)行代碼框
<div style="width:300px;padding:20px;overflow:hidden;word-wrap:break-word;word-break:break:all; font-size:12px; line-height:18px; background-color:#eeeeee;"> <font disabled> 怎么樣，我凹下去了吧？<br> 你不想試試嗎？<br> <a >www.lenvo.cn</a></font> </div>

二十六漂亮的仿flash菜單---網(wǎng)友:Lenvo（來(lái)自藍(lán)色經(jīng)典）

運(yùn)行代碼框
<style> /* 先把這個(gè) xmenu 的樣式放到css里 */ .xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px solid #336699;background:#336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;} </style> <script> /* http://lexrus.blueidea.com 這是把事件動(dòng)作綁定到菜單上的函數(shù) */ function attachXMenu(objid){ var tds=objid.getElementsByTagName('td'); for(var i=0;i<tds.length;i++){ with(tds[i]){ onmouseover=function(){ with(this){ filters[0].apply(); style.background='#66CCFF'; //這是鼠標(biāo)移上去時(shí)的背景顏色 style.border='1px solid #ffffff'; //邊框 style.color='black'; //文字顏色 filters[0].play(); } } onmouseout=function(){ with(this){ filters[0].apply(); style.background='#336699'; //這是鼠標(biāo)離開(kāi)時(shí)的背景顏色 style.border='1px solid #336699'; //邊框 style.color='#ffffff'; //文字顏色 filters[0].play(); } } } } } </script>  <table class="xmenu" id="xmenu0" width="500" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center"> <tr> <td><a >www.lenvo.cn</a></td> <td>Name</td> <td>Is</td> <td>LeX</td> <td>Rus</td> <td>!!!</td> </tr> </table> <script>attachXMenu(xmenu0); //在上面這個(gè)table結(jié)束的地方執(zhí)行事件動(dòng)作的綁定, 這里的這個(gè)xmenu0就是那個(gè)table的id</script> <br><br><br><br>  <table class="xmenu" id="xmenu1" width="100" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center"> <tr><td>My</td></tr> <tr><td>Name</td></tr> <tr><td>Is</td></tr> <tr><td>LeX</td></tr> <tr><td>Rus</td></tr> <tr><td>!!!</td></tr> </table> <script>attachXMenu(xmenu1);</script>

二十七自定義容器和字體大小---網(wǎng)友:greengnn

運(yùn)行代碼框
<!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" xml:lang="en" lang="en"> <head> <title>Home</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="The Man in Blue" /> <meta name="robots" content="all" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <style type="text/css" media="all"> body { margin: 1em; text-align: center; font-family: Arial, Helvetica, sans-serif; } body * { margin: 0; } #content { padding: 1em; background-color: #BBDDFF; background-image: url(column_bg.gif); background-repeat: repeat-y; background-position: 30em 0; text-align: left; } #content p { margin-bottom: 1em; } #footer { margin-top: 1em; padding: 1em; background-color: #0066CC; text-align: left; } #footer a { color: #FFFFFF; } #header { margin-bottom: 1em; padding: 1em; background-color: #0066CC; color: #FFFFFF; text-align: left; } #leftContent { padding-right: 10em; } #options { margin-bottom: 1em; text-align: right; } #options a { color: #000000; } #rightContent { float: right; width: 8em; } #widthContainer { font-size: 0.8em; width: 40em; margin: auto; } .clearer { clear: both; } </style> <script type="text/javascript">  </script> </head> <body onload="scaleWidth();" onresize="scaleWidth();"> <div id="widthContainer"> <div id="options"> <a href="#" onclick="textSize('smaller'); return false;">Text smaller</a> | <a href="#" onclick="textSize('bigger'); return false;">Text bigger</a> </div>  <div id="header"> <h1>Browser-width defined font size</h1> </div>  <div id="content"> <div id="rightContent"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lobortis ullamcorper augue. Praesent vel felis vitae purus ornare pretium. Nullam porta sollicitudin lectus. Integer non arcu eu neque tincidunt tincidunt. Nullam sapien arcu, ullamcorper sed, hendrerit in, rutrum in, nibh. Aliquam sed enim. Cras rhoncus ullamcorper justo. Aenean quam dolor, consectetuer sed, dapibus quis, iaculis id, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut lacinia velit ac elit. Etiam id nulla. Phasellus at arcu ac mauris hendrerit ullamcorper. Quisque posuere sodales risus. Sed nunc nibh, egestas a, blandit eget, facilisis vel, dolor. Cras metus urna, feugiat et, iaculis quis, lacinia a, elit. Etiam enim. Maecenas viverra, est non tincidunt euismod, diam urna volutpat mi, in luctus pede ante sit amet risus. </p> </div>  <div id="leftContent"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lobortis ullamcorper augue. Praesent vel felis vitae purus ornare pretium. Nullam porta sollicitudin lectus. Integer non arcu eu neque tincidunt tincidunt. Nullam sapien arcu, ullamcorper sed, hendrerit in, rutrum in, nibh. Aliquam sed enim. Cras rhoncus ullamcorper justo. Aenean quam dolor, consectetuer sed, dapibus quis, iaculis id, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut lacinia velit ac elit. Etiam id nulla. Phasellus at arcu ac mauris hendrerit ullamcorper. Quisque posuere sodales risus. Sed nunc nibh, egestas a, blandit eget, facilisis vel, dolor. Cras metus urna, feugiat et, iaculis quis, lacinia a, elit. Etiam enim. Maecenas viverra, est non tincidunt euismod, diam urna volutpat mi, in luctus pede ante sit amet risus. </p> <p> Nulla metus. Ut sodales, tortor nec sollicitudin convallis, diam diam vulputate ligula, lobortis tincidunt urna purus at urna. Pellentesque laoreet. Nulla et dolor. Praesent vestibulum quam convallis neque. Praesent sit amet odio a dui iaculis dignissim. In vel nunc a tellus vulputate pellentesque. Maecenas bibendum. Donec mi nibh, euismod in, iaculis a, eleifend et, enim. In eget lectus vitae pede nonummy elementum. Mauris accumsan, lacus ut euismod varius, odio neque egestas quam, non aliquam velit purus et purus. Vestibulum at elit nec felis suscipit pulvinar. Suspendisse at enim quis lacus mattis condimentum. Proin arcu arcu, imperdiet vitae, aliquam non, congue id, ipsum. </p> <p> Aliquam eu dolor nec risus luctus faucibus. Aenean condimentum, tortor in blandit cursus, dolor magna sagittis orci, vel vehicula dolor ante at lacus. Donec vel felis in enim aliquam molestie. Sed non velit id velit pulvinar consequat. Mauris luctus. Phasellus faucibus turpis nec purus. Mauris eget ante. Donec orci enim, luctus eu, posuere at, luctus quis, pede. In in lectus. Quisque blandit, ipsum eget tincidunt scelerisque, mauris ante accumsan erat, quis congue odio erat vitae diam. Donec ut felis fermentum sem viverra pulvinar. Sed neque lorem, adipiscing ut, placerat a, ornare et, dolor. Vestibulum pretium vehicula nibh. Etiam feugiat, ligula sed pulvinar fringilla, eros arcu placerat urna, nec eleifend nisl leo sit amet urna. Suspendisse quis augue ut nibh venenatis nonummy. Nunc ut augue. In fermentum, neque eget eleifend rutrum, nulla lorem fermentum massa, eu cursus lectus mi id libero. </p> <p> Nam congue ligula quis magna. Vivamus porttitor nunc non dui. Aliquam posuere dapibus tortor. Quisque facilisis, quam in semper luctus, lacus dolor gravida massa, ultrices consectetuer risus arcu nec nibh. Nulla facilisi. In a eros id eros lobortis ultrices. Vivamus sit amet neque eu magna venenatis nonummy. Pellentesque consequat. Etiam ut ipsum. Nulla consectetuer est vel quam. </p> <p> Integer eu diam vitae augue sollicitudin congue. Praesent vulputate pede vel velit. Maecenas dapibus tempus lacus. Quisque lectus metus, pretium ac, mollis nec, dignissim quis, mi. Aliquam purus risus, pharetra eget, condimentum ut, blandit sit amet, leo. Suspendisse iaculis purus sed tellus. Nunc sem justo, porttitor ut, pretium eu, hendrerit eu, nunc. Vivamus sit amet neque in est venenatis faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam rhoncus, eros id ultrices facilisis, pede ligula dignissim eros, sit amet tempus risus urna sed nibh. Sed massa eros, dapibus tristique, blandit et, molestie sed, enim. Phasellus leo. Integer vestibulum volutpat enim. Duis pulvinar ligula. Pellentesque luctus velit a justo. Quisque volutpat, diam quis varius commodo, neque elit dictum tortor, quis aliquet felis risus vitae wisi. Aliquam bibendum, elit ut gravida vehicula, orci turpis auctor dolor, nec tristique tortor dolor eget ipsum. </p> </div>  <div class="clearer"> </div> </div>  <div id="footer"> <a >Back to the explanation</a> </div> </div>  </body> </html>

二十八超級(jí)REAL視頻播放器---網(wǎng)友:leaf52

運(yùn)行代碼框
<object id="player" name="player" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="339" height="227"> <param name="_ExtentX" value="9869"> <param name="_ExtentY" value="7726"> <param name="AUTOSTART" value="-1"> <param name="SHUFFLE" value="0"> <param name="PREFETCH" value="0"> <param name="NOLABELS" value="-1"> <param name="SRC" value="http://entdown.163.com/ent/garbage/mv/1028/xuemv.rm"> <param name="CONTROLS" value="Imagewindow"> <param name="CONSOLE" value="clip1"> <param name="LOOP" value="0"> <param name="NUMLOOP" value="0"> <param name="CENTER" value="0"> <param name="MAINTAINASPECT" value="0"> <param name="BACKGROUNDCOLOR" value="#000000"> </object> <br>

二十九網(wǎng)站論壇上面快捷鍵提交表單的方法---網(wǎng)友:greengnn

運(yùn)行代碼框
<script language=javascript> ie = (document.all)? true:false if (ie){ function ctlent(eventobject){if(event.ctrlKey && window.event.keyCode==13){this.document.form1.submit();}} } </script> <form action="http://www.jluvip.com/index.html" method=POST name=form1> <textarea cols=95 name=Content rows=12 wrap=virtual onkeydown=ctlent()> Ctrl+Enter提交內(nèi)容信息 </textarea> <input type=Submit value="Submit" name=Submit> </form>

三十 accesskey 提交---網(wǎng)友:greengnn

運(yùn)行代碼框
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>無(wú)標(biāo)題文檔</title> </head> <body> <form action="http://www.jluvip.com/index.html" method=POST name=form1> <textarea ></textarea> <br><input type=submit accessKey="S" value=提交(Alt+s)> </form>

三十一新聞廣告圖片切換效果+描述---網(wǎng)友:greengnn

運(yùn)行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>新聞切換技術(shù)</title> <style type="text/css">  </style> </head> <body> <script language="JavaScript" type="text/javascript"> var nn; nn=1; setTimeout('change_img()',6000); function change_img() { if(nn>4) nn=1 setTimeout('setFocus1('+nn+')',6000); nn++; tt=setTimeout('change_img()',6000); } function setFocus1(i) { selectLayer1(i); } function selectLayer1(i) { switch(i) { case 1: document.getElementById("focusPic1").style.display="block"; document.getElementById("focusPic2").style.display="none"; document.getElementById("focusPic3").style.display="none"; document.getElementById("focusPic4").style.display="none"; document.getElementById("focusPic1nav").style.display="block"; document.getElementById("focusPic2nav").style.display="none"; document.getElementById("focusPic3nav").style.display="none"; document.getElementById("focusPic4nav").style.display="none"; break; case 2: document.getElementById("focusPic1").style.display="none"; document.getElementById("focusPic2").style.display="block"; document.getElementById("focusPic3").style.display="none"; document.getElementById("focusPic4").style.display="none"; document.getElementById("focusPic1nav").style.display="none"; document.getElementById("focusPic2nav").style.display="block"; document.getElementById("focusPic3nav").style.display="none"; document.getElementById("focusPic4nav").style.display="none"; break; case 3: document.getElementById("focusPic1").style.display="none"; document.getElementById("focusPic2").style.display="none"; document.getElementById("focusPic3").style.display="block"; document.getElementById("focusPic4").style.display="none"; document.getElementById("focusPic1nav").style.display="none"; document.getElementById("focusPic2nav").style.display="none"; document.getElementById("focusPic3nav").style.display="block"; document.getElementById("focusPic4nav").style.display="none"; break; case 4: document.getElementById("focusPic1").style.display="none"; document.getElementById("focusPic2").style.display="none"; document.getElementById("focusPic3").style.display="none"; document.getElementById("focusPic4").style.display="block"; document.getElementById("focusPic1nav").style.display="none"; document.getElementById("focusPic2nav").style.display="none"; document.getElementById("focusPic3nav").style.display="none"; document.getElementById("focusPic4nav").style.display="block"; break; } } </script> <div class="focusPic"> <div id="focusPic1" style="display:block ;"> <div class="pic"> <a ><img src="http://cimg.163.com/tech/2006/1/18/2006011810122068706.jpg" alt="網(wǎng)易學(xué)院05年軟件評(píng)選結(jié)果" width="240" height="180" border="0" /></a> </div> <h2><a >網(wǎng)易學(xué)院05年軟件評(píng)選結(jié)果</a></h2> <p>經(jīng)過(guò)大家的熱情投票和我們的辛勞整理，網(wǎng)易學(xué)院2005年年度軟件評(píng)選結(jié)果終于出爐啦。點(diǎn)擊進(jìn)入查看……<img src="/newimg/i2.gif" alt="詳細(xì)" width="3" height="5" /> <a class="cDRed">詳細(xì)</a></p> </div> <div id="focusPic2" style="display: none ;"> <div class="pic"> <a ><img src="http://cimg.163.com/tech/2006/1/17/200601171557008cee7.jpg" alt="顛覆叢林動(dòng)物生存法則" width="240" height="180" border="0" /></a> </div> <h2><a >顛覆叢林動(dòng)物生存法則</a></h2> <p>群居動(dòng)物的這種行為顛覆了我們通常認(rèn)為的，在動(dòng)物世界通行的 “叢林法則”，動(dòng)物不都自私，不都是弱肉強(qiáng)食的。<img src="/newimg/i2.gif" alt="詳細(xì)" width="3" height="5" /> <a class="cDRed">詳細(xì)</a></p> </div> <div id="focusPic3" style="display: none ;"> <div class="pic"> <a ><img src="http://cimg.163.com/tech/2006/1/17/2006011711483290a60.jpg" alt="WAPI并非貿(mào)易陰謀" width="240" height="180" border="0" /></a> </div> <h2><a >WAPI并非貿(mào)易陰謀</a></h2> <p>近日國(guó)家做出決定：“將向其他的國(guó)內(nèi)及國(guó)外企業(yè)公布該算法”。事實(shí)證明中國(guó)WAPI標(biāo)準(zhǔn)并非是貿(mào)易陰謀。<img src="/newimg/i2.gif" alt="詳細(xì)" width="3" height="5" /> <a class="cDRed">詳細(xì)</a></p> </div> <div id="focusPic4" style="display: none ;"> <div class="pic"> <a ><img src="http://cimg.163.com/tech/2006/1/17/200601171002503f251.jpg" alt="新視野號(hào)探測(cè)冥王星特別專題" width="240" height="180" border="0" /></a> </div> <h2><a >新視野號(hào)探測(cè)冥王星特別專題</a></h2> <p>美國(guó)宇航局將于北京時(shí)間18日凌晨2時(shí)24分發(fā)射新視野號(hào)探測(cè)器，造訪這顆人類唯一尚未探測(cè)過(guò)的行星-冥王星。<img src="/newimg/i2.gif" alt="詳細(xì)" width="3" height="5" /> <a class="cDRed">詳細(xì)</a></p> </div> <div class="more"> <div class="textNum"> <div class="text">> 更多頭圖新聞</div> <div class="num bg1" id="focusPic1nav" style="display: block;"> <ul> <li>1</li> <li><a href="javascript:setFocus1(2);" target="_self">2</a></li> <li><a href="javascript:setFocus1(3);" target="_self">3</a></li> <li><a href="javascript:setFocus1(4);" target="_self">4</a></li> </ul> </div> <div class="num bg2" id="focusPic2nav" style="display: none;"> <ul> <li><a href="javascript:setFocus1(1);" target="_self">1</a></li> <li>2</li> <li><a href="javascript:setFocus1(3);" target="_self">3</a></li> <li><a href="javascript:setFocus1(4);" target="_self">4</a></li> </ul> </div> <div class="num bg3" id="focusPic3nav" style="display: none;"> <ul> <li><a href="javascript:setFocus1(1);" target="_self">1</a></li> <li><a href="javascript:setFocus1(2);" target="_self">2</a></li> <li>3</li> <li><a href="javascript:setFocus1(4);" target="_self">4</a></li> </ul> </div> <div class="num bg4" id="focusPic4nav" style="display: none;"> <ul> <li><a href="javascript:setFocus1(1);" target="_self">1</a></li> <li><a href="javascript:setFocus1(2);" target="_self">2</a></li> <li><a href="javascript:setFocus1(3);" target="_self">3</a></li> <li>4</li> </ul> </div> </div> </div> </div> </body> </html>

三十二菜單特效---網(wǎng)友:greengnn

運(yùn)行代碼框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  <HTML><HEAD><TITLE>New Page 28</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <META content="MSHTML 6.00.2800.1491" name=GENERATOR> <META content=FrontPage.Editor.Document name=ProgId> <STYLE>#ssm2 A { FONT-SIZE: 12px; COLOR: #808080; FONT-FAMILY: verdana; TEXT-DECORATION: none } #ssm2 A:hover { COLOR: #ccff33 } body{background:url(http://www.infowe.com/images/infowe.gif) no-repeat right center fixed;} </STYLE> </HEAD> <BODY> <SCRIPT language=JavaScript1.2> function MM_displayStatusMsg(msgStr) { status=msgStr; document.MM_returnValue = true; } function highlight(x){ document.forms[x].elements[0].focus() document.forms[x].elements[0].select() } function MM_jumpMenu(targ,selObj,restore){ eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0; } var NS IE=document.all; NS=document.layers; hdrFontFamily="Verdana"; hdrFontSize="2"; hdrFontColor="white"; hdrBGColor="#CCCCCC"; linkFontFamily="Verdana"; linkFontSize="2"; linkBGColor="white"; linkOverBGColor="#CCCCCC"; linkTarget="_top"; YOffset=60; staticYOffset=20; menuBGColor="#CCCCCC"; menuIsStatic="no"; menuHeader="Main Index" menuWidth=150; // Must be a multiple of 5! staticMode="advanced" barBGColor="#C0C0C0"; barFontFamily="Verdana"; barFontSize="2"; barFontColor="white"; barText="MENU"; function moveOut() { if (window.cancel) { cancel=""; } if (window.moving2) { clearTimeout(moving2); moving2=""; } if ((IE && ssm2.style.pixelLeft<0)||(NS && document.ssm2.left<0)) { if (IE) {ssm2.style.pixelLeft += (5%menuWidth); } if (NS) { document.ssm2.left += (5%menuWidth); } moving1 = setTimeout('moveOut()', 5) } else { clearTimeout(moving1) } }; function moveBack() { cancel = moveBack1() } function moveBack1() { if (window.moving1) { clearTimeout(moving1) } if ((IE && ssm2.style.pixelLeft>(-menuWidth))||(NS && document.ssm2.left>(-150))) { if (IE) {ssm2.style.pixelLeft -= (5%menuWidth); } if (NS) { document.ssm2.left -= (5%menuWidth); } moving2 = setTimeout('moveBack1()', 5)} else { clearTimeout(moving2) } }; lastY = 0; function makeStatic(mode) { if (IE) {winY = document.body.scrollTop;var NM=ssm2.style } if (NS) {winY = window.pageYOffset;var NM=document.ssm2 } if (mode=="smooth") { if ((IE||NS) && winY!=lastY) { smooth = .2 * (winY - lastY); if(smooth > 0) smooth = Math.ceil(smooth); else smooth = Math.floor(smooth); if (IE) NM.pixelTop+=smooth; if (NS) NM.top+=smooth; lastY = lastY+smooth; } setTimeout('makeStatic("smooth")', 1) } else if (mode=="advanced") { if ((IE||NS) && winY>YOffset-staticYOffset) { if (IE) {NM.pixelTop=winY+staticYOffset } if (NS) {NM.top=winY+staticYOffset } } else { if (IE) {NM.pixelTop=YOffset } if (NS) {NM.top=YOffset-7 } } setTimeout('makeStatic("advanced")', 1) } } function init() { if (IE) { ssm2.style.pixelLeft = -menuWidth; ssm2.style.visibility = "visible" } else if (NS) { document.ssm2.left = -menuWidth; document.ssm2.visibility = "show" } else { alert('Choose either the "smooth" or "advanced" static modes!') } } function MM_displayStatusMsg(msgStr) { status=msgStr; document.MM_returnValue = true; } </SCRIPT> <SCRIPT language=JavaScript1.2> if (IE) {document.write('<DIV ID="ssm2" style="visibility:hidden;Position : Absolute ;Left : 0px ;Top : '+YOffset+'px ;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout="moveBack()">')} if (NS) {document.write('<LAYER visibility="hide" top="'+YOffset+'" name="ssm2" bgcolor="'+menuBGColor+'" left="0" onmouseover="moveOut()" onmouseout="moveBack()">')} tempBar="" for (i=0;i<barText.length;i++) { tempBar+=barText.substring(i, i+1)+"<BR>"} document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+16+2)+'" bgcolor="'+menuBGColor+'"><tr><td bgcolor="'+hdrBGColor+'" WIDTH="'+menuWidth+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+menuHeader+'</b></font></td><td align="center" rowspan="100" width="16" bgcolor="'+barBGColor+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD></tr>') function addItem(text, link, target) { if (!target) {target=linkTarget} document.write('<TR><TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=/''+linkOverBGColor+'/'" onmouseout="bgColor=/''+linkBGColor+'/'"><ILAYER><LAYER onmouseover="bgColor=/''+linkOverBGColor+'/'" onmouseout="bgColor=/''+linkBGColor+'/'" WIDTH="100%"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+link+'" target="'+target+'" CLASS="ssm2Items">'+text+'</A></FONT></LAYER></ILAYER></TD></TR>')} function addHdr(text) { document.write('<tr><td bgcolor="'+hdrBGColor+'" WIDTH="140"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+text+'</b></font></td></tr>')} //Only edit the script between HERE addItem('偶和葉子', 'http://vip.aou.cn/csqf/about.htm', ''); addItem('聆聽(tīng)心海', 'http://vip.aou.cn/csqf/linting.htm', ''); addItem('風(fēng)言風(fēng)語(yǔ)', 'http://vip.aou.cn/csqf/fyfy.htm', ''); addItem('風(fēng)行風(fēng)影', 'http://vip.aou.cn/csqf/fxfy.htm', ''); addItem('雁過(guò)留聲', 'http://csqf.etp21.com/', '_blank'); addHdr('WELCOME TO'); addItem('經(jīng)廣俱樂(lè)部', 'http://dj973.tz315.net', '_blank'); // and HERE! No more! document.write('<tr><td bgcolor="'+hdrBGColor+'"><font size="0" face="Arial"> </font></td></TR></table>') if (IE) {document.write('</DIV>')} if (NS) {document.write('</LAYER>')} if ((IE||NS) && (menuIsStatic=="yes"&&staticMode)) {makeStatic(staticMode);} </SCRIPT> <SCRIPT> window.onload=init </SCRIPT> <p style="height:1000px;"></p> </BODY></HTML>

三十三采用CSS和JS的下拉菜單---網(wǎng)友:greengnn

上一篇：Javascript Function對(duì)象擴(kuò)展之延時(shí)執(zhí)行函數(shù)

下一篇：jquery 取字符串中數(shù)字的正則