一些收集整理非常不錯的JS效果代碼

更新時間：2010年02月09日 12:56:21 作者：

一些收集整理的JS 整理出一些收集的JS代碼，在這里向所有原作者致敬。

按A就會跳轉到練習的網頁,請按A

類似與QQ的好友/黑名單之類的樹型菜單

<!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=""> </HEAD> <BODY>  <style> body { font-family: verdana, helvetica, arial, sans-serif; } #mainMenu { background-color: #EEE; border: 1px solid #CCC; color: #000; width: 203px; } #menuList { margin: 0px; padding: 10px 0px 10px 15px; } li.menubar { background: url(/images/plus.gif) no-repeat 0em 0.3em; font-size: 12px; line-height: 1.5em; list-style: none outside; } .menu, .submenu { display: none; margin-left: 15px; padding: 0px; } .menu li, .submenu li { background: url(/images/square.gif) no-repeat 0em 0.3em; list-style: none outside; } a.actuator { background-color: transparent; color: #000; font-size: 12px; padding-left: 15px; text-decoration: none; } a.actuator:hover { text-decoration: underline; } .menu li a, .submenu li a { background-color: transparent; color: #000; font-size: 12px; padding-left: 15px; text-decoration: none; } .menu li a:hover, submenu li a:hover { /*border-bottom: 1px dashed #000;*/ text-decoration: underline; } span.key { text-decoration: underline; } </style> </head> <body> <div   class="vvxyksv9kd"   id="mainMenu"> <ul id="menuList"> <li id="vvxyksv9kd"    class="menubar"> <a href="#" id="productsActuator" class="actuator">圖秀地帶收藏夾</a> <ul id="productsMenu" class="menu"> <li> <a href="#" id="newPhonesActuator" class="actuator">我的好友</a> <ul id="newPhonesMenu" class="submenu"> <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">張三[10000001]</a></li> <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li> <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">張三[10000001]</a></li> <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li> </ul> </li> <li> <a href="#" id="compareActuator" class="actuator">陌生人</a> <ul id="compareMenu" class="submenu"> <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">張三[10000001]</a></li> <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li> <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">張三[10000001]</a></li> <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li> </ul> </li> </ul> </li> </ul> </div> </body> </BODY> </HTML>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

超級強大的表單驗證

<title>表單驗證類 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>真實姓名：</td><td><input name="Name" dataType="Chinese" msg="真實姓名只允許中文"></td> </tr> <tr> <td>英文名：</td><td><input name="Nick" dataType="English" require="false" msg="英文名只允許英文字母"></td> </tr> <tr> <td>主頁：</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>重復：</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號碼不存在"></td> </tr> <tr> <td>身份證：</td><td><input name="Card" dataType="IdCard" msg="身份證號碼不正確"></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="電話號碼不正確"></td> </tr> <tr> <td>手機：</td><td><input name="Mobile" require="false" dataType="Mobile" msg="手機號碼不正確"></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="必須選定一個省份" ></td> </tr> <tr> <td>愛好：</td><td>運動<input name="Favorite" value="1" type="checkbox">上網<input name="Favorite" value="2" type="checkbox">聽音樂<input name="Favorite" value="3" type="checkbox">看書<input name="Favorite" value="4" type="checkbox"" dataType="Group" min="2" max="3" msg="必須選擇2~3種愛好"></td> </tr> <td>自我介紹：</td><td><textarea name="Description" dataType="Limit" max="10" msg="自我介紹內容必須在10個字之內">中文是一個字</textarea></td> </tr> <td>自傳：</td><td><textarea name="History" dataType="LimitB" min="3" max="10" msg="自傳內容必須在[3,10]個字節(jié)之內">中文是兩個字節(jié)t</textarea></td> </tr> <tr> <td colspan="2"><input name="Submit" type="submit" value="確定提交"><input onClick="Validator.Validate(document.getElementById('demo'))" value="檢驗模式1" type="button"><input onClick="Validator.Validate(document.getElementById('demo'),2)" value="檢驗模式2" type="button"><input onClick="Validator.Validate(document.getElementById('demo'),3)" value="檢驗模式3" type="button"></td> </tr> </form> </table>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

漂亮的腳本日歷

<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">  </TR> </thead> <TBODY border=1 cellspacing="0" cellpadding="0" ID="calendar" ALIGN=CENTER ONCLICK="getDiary()">  </TBODY> </TABLE>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

跳動的菜單

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>模仿as效果的導航菜單</title> <style type="text/css">  </style>  </head> <body> <div   class="vvxyksv9kd"   id="hor1" onclick="re(1);huke()">News</div> <div   class="vvxyksv9kd"   id="hor2" onclick="re(2);huke()">Populor</div> <div   class="vvxyksv9kd"   id="hor3" onclick="re(3);huke()">Sports</div> <div   class="vvxyksv9kd"   id="hor4" onclick="re(4);huke()">Woman</div> <div   class="vvxyksv9kd"   id="board1">1.由AS而想起Javascript2.用Jscript寫ASP有沒有先天性的不足？3.沒有了。</div> <div   class="vvxyksv9kd"   id="board2">1.xhtml+css真的來了嗎？2.Flash取代傳統(tǒng)網站3.Flash何時才能連接數(shù)據(jù)庫？</div> <div   class="vvxyksv9kd"   id="board3">1.程序員與小姐的10個相同。2.中國的程序員與中國的足球？</div> <div   class="vvxyksv9kd"   id="board4">1.二十一世紀最缺的是什么?人才 <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>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

經典的帶陰影的可拖動的浮動層

<!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">  <style type="text/css">  </style> </head> <body> <div   class="vvxyksv9kd"   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">&nbsp;</td> </tr> </table>  </div>  <div   class="vvxyksv9kd"   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">&nbsp;</td> </tr> </table>  </div>  <div   class="vvxyksv9kd"   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>  </div>  <div   class="vvxyksv9kd"   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>  </div>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

1個非常不錯的loading 效果

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>無標題文檔</title> </head> <BODY STYLE="FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, Helvetica">  <INPUT TYPE="BUTTON" VALUE="Click Me!" onclick="startLongProcess();">  <DIV STYLE="BORDER: buttonhighlight 2px outset; FONT-SIZE: 8pt; Z-INDEX: 4; FONT-FAMILY: Tahoma; POSITION: absolute; BACKGROUND-COLOR: buttonface; DISPLAY: none; WIDTH: 350px; CURSOR: default" ID="divProgressDialog" onselectstart="window.event.returnValue=false;"> <DIV STYLE="PADDING: 3px; FONT-WEIGHT: bolder; COLOR: captiontext; BORDER-BOTTOM: white 2px groove; BACKGROUND-COLOR: activecaption"> Downloading Requested Document </DIV> <DIV STYLE="PADDING: 5px"> Please wait while I download the document you requested. </DIV> <DIV STYLE="PADDING: 5px"> This may take several seconds. </DIV> <DIV STYLE="PADDING: 5px"> <div   class="vvxyksv9kd"   id="divProgressOuter" STYLE="BORDER: 1px solid threedshadow; WIDTH: 336px; HEIGHT: 15px"> <div   class="vvxyksv9kd"   id="divProgressInner" STYLE="COLOR: white; TEXT-ALIGN: center; BACKGROUND-COLOR: infobackground; MARGIN: 0px; WIDTH: 0px; HEIGHT: 13px;"></DIV> </DIV> </DIV> <DIV STYLE="BORDER-TOP: white 2px groove; PADDING-BOTTOM: 5px; PADDING-TOP: 3px; BACKGROUND-COLOR: buttonface; TEXT-ALIGN: center"> <INPUT STYLE="FONT-FAMILY: Tahoma; FONT-SIZE: 8pt" TYPE="button" ID="btnCancel" onclick="stopLongProcess();" VALUE="Cancel"> </DIV> </DIV>   <div   class="vvxyksv9kd"   id="divModal" STYLE="BACKGROUND-COLOR: white; FILTER: alpha(opacity=75); LEFT: 0px; POSITION: absolute; TOP: 0px; Z-INDEX: 3" onclick="window.event.cancelBubble=true; window.event.returnValue=false;"> </DIV>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

繁簡體文字轉換工具

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

無圖片實現(xiàn)圓角框
++RunCode_BLOCK_cW6×4t++
取得頁面的大小寬高等各種信息

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

JS效果

微信小程序公用參數(shù)與公用方法用法示例
這篇文章主要介紹了微信小程序公用參數(shù)與公用方法用法,結合實例形式分析了微信小程序中公用參數(shù)與公用方法的簡單定義與使用相關操作技巧,需要的朋友可以參考下
2019-01-01
js實現(xiàn)點擊按鈕后給Div圖層設置隨機背景顏色的方法
這篇文章主要介紹了js實現(xiàn)點擊按鈕后給Div圖層設置隨機背景顏色的方法,實例分析了javascript操作頁面div元素屬性及隨機數(shù)的相關技巧,需要的朋友可以參考下
2015-05-05
Redux的基本使用過程步驟詳解
這篇文章主要介紹了Redux的基本使用過程詳解,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-12-12
Ajax與服務器（JSON）通信實例代碼
這篇文章主要介紹了Ajax與服務器（JSON）通信實例代碼的相關資料,并附實例代碼，幫助大家學習理解此部分知識，需要的朋友可以參考下
2016-11-11
javascript客戶端生成MD5值的函數(shù)代碼
用js實現(xiàn)的客戶端即可實現(xiàn)md5值的代碼，一般情況下都是后臺語言才有的，客戶端也有了，方便有需要的朋友了。
2011-02-02
JavaScript組合模式Composite Pattern
這篇文章主要介紹了學習理解JavaScript組合模式，組合模式及Composite Pattern又叫部分整體模式，是用于把一組相似的對象當作一個單一的對象
2022-04-04
javascript解析json數(shù)據(jù)的3種方式
這篇文章主要介紹了解析json數(shù)據(jù)的3種方式,需要的朋友可以參考下
2014-05-05
js獲取url傳值的方法
這篇文章主要介紹了js獲取url傳值的方法,實例分析了字符串分割與正則分析兩種方法,并補充了一個基于正則匹配實現(xiàn)的js獲取url的get傳值函數(shù),需要的朋友可以參考下
2015-12-12
單擊某一段文字改寫文本顏色
單擊某一段文字，改文字變?yōu)榧t色，再次單擊之后，文字又變回黑色，示例如下,需要的朋友可以參考下
2014-06-06
js中for in的用法示例解析
使用js的朋友對其中for in的并不陌生吧，下面用示例為大家介紹下其具體使用方法
2013-12-12