首页 > 网络编程 > JavaScript > javascript技巧 > JS效果

一些收集整理非常不错的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> 
<script> 
if (!document.getElementById) 
document.getElementById = function() { return null; } 
function initializeMenu(menuId, actuatorId) { 
var menu = document.getElementById(menuId); 
var actuator = document.getElementById(actuatorId); 
if (menu == null || actuator == null) return; 
//if (window.opera) return; // I'm too tired 
actuator.parentNode.style.backgroundImage = "url(/images/plus.gif)"; 
actuator.onclick = function() { 
var display = menu.style.display; 
this.parentNode.style.backgroundImage = 
(display == "block") ? "url(/images/plus.gif)" : "url(/images/minus.gif)"; 
menu.style.display = (display == "block") ? "none" : "block"; 
return false; 
} 
} 
window.onload = function() { 
initializeMenu("productsMenu", "productsActuator"); 
initializeMenu("newPhonesMenu", "newPhonesActuator"); 
initializeMenu("compareMenu", "compareActuator"); 
} 
</script> 
<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 id="mainMenu"> 
<ul id="menuList"> 
<li 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需刷新才能执行]

超级强大的表单验证

<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="密码不符合安全规则" 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>操作系统：</td><td><select name="Operation" dataType="Require" msg="未选择所用操作系统" ><option value="">选择您所用的操作系统</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]个字节之内">中文是两个字节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> 
<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 : ["以下原因导致提交失败：\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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

漂亮的脚本日历

<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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

跳动的菜单

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>模仿as效果的导航菜单</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
2.用Jscript写ASP有没有先天性的不足？
3.没有了。</div> 
<div id="board2">1.xhtml+css真的来了吗？
2.Flash取代传统网站
3.Flash何时才能连接数据库？</div> 
<div id="board3">1.程序员与小姐的10个相同。
2.中国的程序员与中国的足球？</div> 
<div 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需刷新才能执行]

经典的带阴影的可拖动的浮动层

<!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">&nbsp;</td> 
</tr> 
</table>

</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">&nbsp;</td> 
</tr> 
</table>

</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>

</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>

</div> 
<script>setTimeout("loadwin('results')",2000)</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

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"> 
<SCRIPT LANGUAGE="JScript"> 
var NUMBER_OF_REPETITIONS = 40; 
var nRepetitions = 0; 
var g_oTimer = null; 
function startLongProcess() 
{ 
divProgressDialog.style.display = ""; 
resizeModal(); 
btnCancel.focus(); 
// Add a resize handler for the window 
window.onresize = resizeModal; 
// Add a warning in case anyone tries to navigate away or refresh the page 
window.onbeforeunload = showWarning; 
// 
// Here's where you would normally kick off a long asynchronous process 
// like a file download or a remote database operation. Here, we use 
// our "long process" to simulate this process. 
// 
continueLongProcess(); 
} 
function updateProgress(nNewPercent) 
{ 
// Update our pseudo progress bar 
divProgressInner.style.width = (parseInt(divProgressOuter.style.width) 
* nNewPercent / 100)+ "px"; 
} 
function stopLongProcess() 
{ 
if (g_oTimer != null) 
{ 
// Clear the timer so we don't get called back an extra time 
window.clearTimeout(g_oTimer); 
g_oTimer = null; 
} 
// Hide the fake modal DIV 
divModal.style.width = "0px"; 
divModal.style.height = "0px"; 
divProgressDialog.style.display = "none"; 
// Remove our event handlers 
window.onresize = null; 
window.onbeforeunload = null; 
nRepetitions = 0; 
} 
function continueLongProcess() 
{ 
if (nRepetitions < NUMBER_OF_REPETITIONS) 
{ 
// Set the timeout somewhere between 0 and .25 seconds 
var nTimeoutLength = Math.random() * 250; 
updateProgress(100 * nRepetitions / NUMBER_OF_REPETITIONS); 
g_oTimer = window.setTimeout("continueLongProcess();", nTimeoutLength); 
nRepetitions++; 
} 
else 
{ 
stopLongProcess(); 
} 
} 
function showWarning() 
{ 
//Warn users before they refresh the page or navigate away 
return "Navigating to a different page or refreshing the window could cause you to lose precious data.\n\nAre you*absolutely* certain you want to do this?"; 
} 
function resizeModal() 
{ 
// Resize the DIV which fakes the modality of the dialog DIV 
divModal.style.width = document.body.scrollWidth; 
divModal.style.height = document.body.scrollHeight; 
// Re-center the dialog DIV 
divProgressDialog.style.left = ((document.body.offsetWidth - 
divProgressDialog.offsetWidth) / 2); 
divProgressDialog.style.top = ((document.body.offsetHeight - 
divProgressDialog.offsetHeight) / 2); 
} 
</SCRIPT> 
<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 ID="divProgressOuter" STYLE="BORDER: 1px solid threedshadow; 
WIDTH: 336px; HEIGHT: 15px"> 
<DIV 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 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需刷新才能执行]

繁简体文字转换工具

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>Haao's 博客</title> 
<link href="style.css" rel="stylesheet" type="text/css"> 
</script> 
</head> 
<body> 
<div align="center"> 
<table width="750" border="0" align="center" cellpadding="5" cellspacing="1" bgcolor="#CCCCCC"> 
<tr> 
<td align="center" bgcolor="#F4F4F4"><b>欢迎使用繁简体文字转换工具</b></td> 
</tr> 
<tr> 
<td align="center" bgcolor="#FFFFFF"><input type=button class="Submit" onclick=iText.value=iText.value.s2t() value='简→繁'> 
　 
<input type=button class="Submit" onclick=iText.value=iText.value.t2s() value='繁→简'>

<textarea cols="70" rows="8" class="transform" id="iText">欢迎使用 繁简 文本 转换</textarea></td> 
</tr> 
</table> 
<script> 
function window.onload(){ 
var s="万与丑专业丛东丝丢两严丧个丬丰临为丽举么义乌乐乔习乡书买乱争于亏云亘亚产亩亲亵亸亿仅从仑仓仪们价众优伙会伛伞伟传伤伥伦伧伪伫体余佣佥侠侣侥侦侧侨侩侪侬俣俦俨俩俪俭债倾偬偻偾偿傥傧储傩儿兑兖党兰关兴兹养兽冁内冈册写军农冢冯冲决况冻净凄凉凌减凑凛几凤凫凭凯击凼凿刍划刘则刚创删别刬刭刽刿剀剂剐剑剥剧劝办务劢动励劲劳势勋勐勚匀匦匮区医华协单卖卢卤卧卫却卺厂厅历厉压厌厍厕厢厣厦厨厩厮县叁参叆叇双发变叙叠叶号叹叽吁后吓吕吗吣吨听启吴呒呓呕呖呗员呙呛呜咏咔咙咛咝咤咴咸哌响哑哒哓哔哕哗哙哜哝哟唛唝唠唡唢唣唤唿啧啬啭啮啰啴啸喷喽喾嗫嗬嗳嘘嘤嘱噜噼嚣嚯团园囱围囵国图圆圣圹场坂坏块坚坛坜坝坞坟坠垄垅垆垒垦垧垩垫垭垯垱垲垴埘埙埚埝埯堑堕塆塬墙壮声壳壶壸处备复够头夸夹夺奁奂奋奖奥妆妇妈妩妪妫姗姜娄娅娆娇娈娱娲娴婳婴婵婶媪嫒嫔嫱嬷孙学孪宁宝实宠审宪宫宽宾寝对寻导寿将尔尘尝尧尴尸尽层屃屉届属屡屦屿岁岂岖岗岘岙岚岛岭岳岽岿峃峄峡峣峤峥峦崂崃崄崭嵘嵚嵛嵝嵴巅巩巯币帅师帏帐帘帜带帧帮帱帻帼幂幞干并幺广庄庆庐庑库应庙庞废庼廪开异弃张弥弪弯弹强归当录彟彦彻径徕御忆忏忧忾怀态怂怃怄怅怆怜总怼怿恋恳恶恸恹恺恻恼恽悦悫悬悭悯惊惧惨惩惫惬惭惮惯愍愠愤愦愿慑慭憷懑懒懔戆戋戏戗战戬户扎扑扦执扩扪扫扬扰抚抛抟抠抡抢护报担拟拢拣拥拦拧拨择挂挚挛挜挝挞挟挠挡挢挣挤挥挦捞损捡换捣据捻掳掴掷掸掺掼揸揽揿搀搁搂搅携摄摅摆摇摈摊撄撑撵撷撸撺擞攒敌敛数斋斓斗斩断无旧时旷旸昙昼昽显晋晒晓晔晕晖暂暧札术朴机杀杂权条来杨杩杰极构枞枢枣枥枧枨枪枫枭柜柠柽栀栅标栈栉栊栋栌栎栏树栖样栾桊桠桡桢档桤桥桦桧桨桩梦梼梾检棂椁椟椠椤椭楼榄榇榈榉槚槛槟槠横樯樱橥橱橹橼檐檩欢欤欧歼殁殇残殒殓殚殡殴毁毂毕毙毡毵氇气氢氩氲汇汉污汤汹沓沟没沣沤沥沦沧沨沩沪沵泞泪泶泷泸泺泻泼泽泾洁洒洼浃浅浆浇浈浉浊测浍济浏浐浑浒浓浔浕涂涌涛涝涞涟涠涡涢涣涤润涧涨涩淀渊渌渍渎渐渑渔渖渗温游湾湿溃溅溆溇滗滚滞滟滠满滢滤滥滦滨滩滪漤潆潇潋潍潜潴澜濑濒灏灭灯灵灾灿炀炉炖炜炝点炼炽烁烂烃烛烟烦烧烨烩烫烬热焕焖焘煅煳煺熘爱爷牍牦牵牺犊犟犭状犷犸犹狈狍狝狞独狭狮狯狰狱狲猃猎猕猡猪猫猬献獭玑玙玚玛玮环现玱玺珉珏珐珑珰珲琎琏琐琼瑶瑷璇璎瓒瓮瓯电画畅畲畴疖疗疟疠疡疬疮疯疱疴痈痉痒痖痨痪痫痴瘅瘆瘗瘘瘪瘫瘾瘿癞癣癫癯皑皱皲盏盐监盖盗盘眍眦眬着睁睐睑瞒瞩矫矶矾矿砀码砖砗砚砜砺砻砾础硁硅硕硖硗硙硚确硷碍碛碜碱碹磙礼祎祢祯祷祸禀禄禅离秃秆种积称秽秾稆税稣稳穑穷窃窍窑窜窝窥窦窭竖竞笃笋笔笕笺笼笾筑筚筛筜筝筹签简箓箦箧箨箩箪箫篑篓篮篱簖籁籴类籼粜粝粤粪粮糁糇紧絷纟纠纡红纣纤纥约级纨纩纪纫纬纭纮纯纰纱纲纳纴纵纶纷纸纹纺纻纼纽纾线绀绁绂练组绅细织终绉绊绋绌绍绎经绐绑绒结绔绕绖绗绘给绚绛络绝绞统绠绡绢绣绤绥绦继绨绩绪绫绬续绮绯绰绱绲绳维绵绶绷绸绹绺绻综绽绾绿缀缁缂缃缄缅缆缇缈缉缊缋缌缍缎缏缐缑缒缓缔缕编缗缘缙缚缛缜缝缞缟缠缡缢缣缤缥缦缧缨缩缪缫缬缭缮缯缰缱缲缳缴缵罂网罗罚罢罴羁羟羡翘翙翚耢耧耸耻聂聋职聍联聩聪肃肠肤肷肾肿胀胁胆胜胧胨胪胫胶脉脍脏脐脑脓脔脚脱脶脸腊腌腘腭腻腼腽腾膑臜舆舣舰舱舻艰艳艹艺节芈芗芜芦苁苇苈苋苌苍苎苏苘苹茎茏茑茔茕茧荆荐荙荚荛荜荞荟荠荡荣荤荥荦荧荨荩荪荫荬荭荮药莅莜莱莲莳莴莶获莸莹莺莼萚萝萤营萦萧萨葱蒇蒉蒋蒌蓝蓟蓠蓣蓥蓦蔷蔹蔺蔼蕲蕴薮藁藓虏虑虚虫虬虮虽虾虿蚀蚁蚂蚕蚝蚬蛊蛎蛏蛮蛰蛱蛲蛳蛴蜕蜗蜡蝇蝈蝉蝎蝼蝾螀螨蟏衅衔补衬衮袄袅袆袜袭袯装裆裈裢裣裤裥褛褴襁襕见观觃规觅视觇览觉觊觋觌觍觎觏觐觑觞触觯詟誉誊讠计订讣认讥讦讧讨让讪讫训议讯记讱讲讳讴讵讶讷许讹论讻讼讽设访诀证诂诃评诅识诇诈诉诊诋诌词诎诏诐译诒诓诔试诖诗诘诙诚诛诜话诞诟诠诡询诣诤该详诧诨诩诪诫诬语诮误诰诱诲诳说诵诶请诸诹诺读诼诽课诿谀谁谂调谄谅谆谇谈谊谋谌谍谎谏谐谑谒谓谔谕谖谗谘谙谚谛谜谝谞谟谠谡谢谣谤谥谦谧谨谩谪谫谬谭谮谯谰谱谲谳谴谵谶谷豮贝贞负贠贡财责贤败账货质贩贪贫贬购贮贯贰贱贲贳贴贵贶贷贸费贺贻贼贽贾贿赀赁赂赃资赅赆赇赈赉赊赋赌赍赎赏赐赑赒赓赔赕赖赗赘赙赚赛赜赝赞赟赠赡赢赣赪赵赶趋趱趸跃跄跖跞践跶跷跸跹跻踊踌踪踬踯蹑蹒蹰蹿躏躜躯车轧轨轩轪轫转轭轮软轰轱轲轳轴轵轶轷轸轹轺轻轼载轾轿辀辁辂较辄辅辆辇辈辉辊辋辌辍辎辏辐辑辒输辔辕辖辗辘辙辚辞辩辫边辽达迁过迈运还这进远违连迟迩迳迹适选逊递逦逻遗遥邓邝邬邮邹邺邻郁郄郏郐郑郓郦郧郸酝酦酱酽酾酿释里鉅鉴銮錾钆钇针钉钊钋钌钍钎钏钐钑钒钓钔钕钖钗钘钙钚钛钝钞钟钠钡钢钣钤钥钦钧钨钩钪钫钬钭钮钯钰钱钲钳钴钵钶钷钸钹钺钻钼钽钾钿铀铁铂铃铄铅铆铈铉铊铋铌铍铎铏铐铑铒铓铔铕铖铗铘铙铚铛铜铝铞铟铠铡铢铣铤铥铦铧铨铩铪铫铬铭铮铯铰铱铲铳铴铵银铷铸铹铺铻铼铽链铿销锁锂锃锄锅锆锇锈锉锊锋锌锍锎锏锐锑锒锓锔锕锖锗锘错锚锛锜锝锞锟锠锡锢锣锤锥锦锧锨锩锪锫锬锭键锯锰锱锲锳锴锵锶锷锸锹锺锻锼锽锾锿镀镁镂镃镄镅镆镇镈镉镊镋镌镍镎镏镐镑镒镓镔镕镖镗镘镙镚镛镜镝镞镟镠镡镢镣镤镥镦镧镨镩镪镫镬镭镮镯镰镱镲镳镴镵镶长门闩闪闫闬闭问闯闰闱闲闳间闵闶闷闸闹闺闻闼闽闾闿阀阁阂阃阄阅阆阇阈阉阊阋阌阍阎阏阐阑阒阓阔阕阖阗阘阙阚阛队阳阴阵阶际陆陇陈陉陕陧陨险随隐隶隽难雏雠雳雾霁霉霭靓静靥鞑鞒鞯鞴韦韧韨韩韪韫韬韵页顶顷顸项顺须顼顽顾顿颀颁颂颃预颅领颇颈颉颊颋颌颍颎颏颐频颒颓颔颕颖颗题颙颚颛颜额颞颟颠颡颢颣颤颥颦颧风飏飐飑飒飓飔飕飖飗飘飙飚飞飨餍饤饥饦饧饨饩饪饫饬饭饮饯饰饱饲饳饴饵饶饷饸饹饺饻饼饽饾饿馀馁馂馃馄馅馆馇馈馉馊馋馌馍馎馏馐馑馒馓馔馕马驭驮驯驰驱驲驳驴驵驶驷驸驹驺驻驼驽驾驿骀骁骂骃骄骅骆骇骈骉骊骋验骍骎骏骐骑骒骓骔骕骖骗骘骙骚骛骜骝骞骟骠骡骢骣骤骥骦骧髅髋髌鬓魇魉鱼鱽鱾鱿鲀鲁鲂鲄鲅鲆鲇鲈鲉鲊鲋鲌鲍鲎鲏鲐鲑鲒鲓鲔鲕鲖鲗鲘鲙鲚鲛鲜鲝鲞鲟鲠鲡鲢鲣鲤鲥鲦鲧鲨鲩鲪鲫鲬鲭鲮鲯鲰鲱鲲鲳鲴鲵鲶鲷鲸鲹鲺鲻鲼鲽鲾鲿鳀鳁鳂鳃鳄鳅鳆鳇鳈鳉鳊鳋鳌鳍鳎鳏鳐鳑鳒鳓鳔鳕鳖鳗鳘鳙鳛鳜鳝鳞鳟鳠鳡鳢鳣鸟鸠鸡鸢鸣鸤鸥鸦鸧鸨鸩鸪鸫鸬鸭鸮鸯鸰鸱鸲鸳鸴鸵鸶鸷鸸鸹鸺鸻鸼鸽鸾鸿鹀鹁鹂鹃鹄鹅鹆鹇鹈鹉鹊鹋鹌鹍鹎鹏鹐鹑鹒鹓鹔鹕鹖鹗鹘鹙鹚鹛鹜鹝鹞鹟鹠鹡鹢鹣鹤鹥鹦鹧鹨鹩鹪鹫鹬鹭鹯鹰鹱鹲鹳鹴鹾麦麸黄黉黡黩黪黾鼋鼌鼍鼗鼹齄齐齑齿龀龁龂龃龄龅龆龇龈龉龊龋龌龙龚龛龟" 
var t="萬與醜專業叢東絲丟兩嚴喪個爿豐臨為麗舉麼義烏樂喬習鄉書買亂爭於虧雲亙亞產畝親褻嚲億僅從侖倉儀們價眾優夥會傴傘偉傳傷倀倫傖偽佇體餘傭僉俠侶僥偵側僑儈儕儂俁儔儼倆儷儉債傾傯僂僨償儻儐儲儺兒兌兗黨蘭關興茲養獸囅內岡冊寫軍農塚馮沖決況凍淨淒涼淩減湊凜幾鳳鳧憑凱擊氹鑿芻劃劉則剛創刪別剗剄劊劌剴劑剮劍剝劇勸辦務勱動勵勁勞勢勳猛勩勻匭匱區醫華協單賣盧鹵臥衛卻巹廠廳曆厲壓厭厙廁廂厴廈廚廄廝縣三參靉靆雙發變敘疊葉號歎嘰籲後嚇呂嗎唚噸聽啟吳嘸囈嘔嚦唄員咼嗆嗚詠哢嚨嚀噝吒噅鹹呱響啞噠嘵嗶噦嘩噲嚌噥喲嘜嗊嘮啢嗩唕喚呼嘖嗇囀齧囉嘽嘯噴嘍嚳囁呵噯噓嚶囑嚕劈囂謔團園囪圍圇國圖圓聖壙場阪壞塊堅壇壢壩塢墳墜壟壟壚壘墾坰堊墊埡墶壋塏堖塒塤堝墊垵塹墮壪原牆壯聲殼壺壼處備複夠頭誇夾奪奩奐奮獎奧妝婦媽嫵嫗媯姍薑婁婭嬈嬌孌娛媧嫻嫿嬰嬋嬸媼嬡嬪嬙嬤孫學孿寧寶實寵審憲宮寬賓寢對尋導壽將爾塵嘗堯尷屍盡層屭屜屆屬屢屨嶼歲豈嶇崗峴嶴嵐島嶺嶽崠巋嶨嶧峽嶢嶠崢巒嶗崍嶮嶄嶸嶔崳嶁脊巔鞏巰幣帥師幃帳簾幟帶幀幫幬幘幗冪襆幹並么廣莊慶廬廡庫應廟龐廢廎廩開異棄張彌弳彎彈強歸當錄彠彥徹徑徠禦憶懺憂愾懷態慫憮慪悵愴憐總懟懌戀懇惡慟懨愷惻惱惲悅愨懸慳憫驚懼慘懲憊愜慚憚慣湣慍憤憒願懾憖怵懣懶懍戇戔戲戧戰戩戶紮撲扡執擴捫掃揚擾撫拋摶摳掄搶護報擔擬攏揀擁攔擰撥擇掛摯攣掗撾撻挾撓擋撟掙擠揮撏撈損撿換搗據撚擄摑擲撣摻摜摣攬撳攙擱摟攪攜攝攄擺搖擯攤攖撐攆擷擼攛擻攢敵斂數齋斕鬥斬斷無舊時曠暘曇晝曨顯晉曬曉曄暈暉暫曖劄術樸機殺雜權條來楊榪傑極構樅樞棗櫪梘棖槍楓梟櫃檸檉梔柵標棧櫛櫳棟櫨櫟欄樹棲樣欒棬椏橈楨檔榿橋樺檜槳樁夢檮棶檢欞槨櫝槧欏橢樓欖櫬櫚櫸檟檻檳櫧橫檣櫻櫫櫥櫓櫞簷檁歡歟歐殲歿殤殘殞殮殫殯毆毀轂畢斃氈毿氌氣氫氬氳彙漢汙湯洶遝溝沒灃漚瀝淪滄渢溈滬濔濘淚澩瀧瀘濼瀉潑澤涇潔灑窪浹淺漿澆湞溮濁測澮濟瀏滻渾滸濃潯濜塗湧濤澇淶漣潿渦溳渙滌潤澗漲澀澱淵淥漬瀆漸澠漁瀋滲溫遊灣濕潰濺漵漊潷滾滯灩灄滿瀅濾濫灤濱灘澦濫瀠瀟瀲濰潛瀦瀾瀨瀕灝滅燈靈災燦煬爐燉煒熗點煉熾爍爛烴燭煙煩燒燁燴燙燼熱煥燜燾煆糊退溜愛爺牘犛牽犧犢強犬狀獷獁猶狽麅獮獰獨狹獅獪猙獄猻獫獵獼玀豬貓蝟獻獺璣璵瑒瑪瑋環現瑲璽瑉玨琺瓏璫琿璡璉瑣瓊瑤璦璿瓔瓚甕甌電畫暢佘疇癤療瘧癘瘍鬁瘡瘋皰屙癰痙癢瘂癆瘓癇癡癉瘮瘞瘺癟癱癮癭癩癬癲臒皚皺皸盞鹽監蓋盜盤瞘眥矓著睜睞瞼瞞矚矯磯礬礦碭碼磚硨硯碸礪礱礫礎硜矽碩硤磽磑礄確鹼礙磧磣堿镟滾禮禕禰禎禱禍稟祿禪離禿稈種積稱穢穠穭稅穌穩穡窮竊竅窯竄窩窺竇窶豎競篤筍筆筧箋籠籩築篳篩簹箏籌簽簡籙簀篋籜籮簞簫簣簍籃籬籪籟糴類秈糶糲粵糞糧糝餱緊縶糸糾紆紅紂纖紇約級紈纊紀紉緯紜紘純紕紗綱納紝縱綸紛紙紋紡紵紖紐紓線紺絏紱練組紳細織終縐絆紼絀紹繹經紿綁絨結絝繞絰絎繪給絢絳絡絕絞統綆綃絹繡綌綏絛繼綈績緒綾緓續綺緋綽緔緄繩維綿綬繃綢綯綹綣綜綻綰綠綴緇緙緗緘緬纜緹緲緝縕繢緦綞緞緶線緱縋緩締縷編緡緣縉縛縟縝縫縗縞纏縭縊縑繽縹縵縲纓縮繆繅纈繚繕繒韁繾繰繯繳纘罌網羅罰罷羆羈羥羨翹翽翬耮耬聳恥聶聾職聹聯聵聰肅腸膚膁腎腫脹脅膽勝朧腖臚脛膠脈膾髒臍腦膿臠腳脫腡臉臘醃膕齶膩靦膃騰臏臢輿艤艦艙艫艱豔艸藝節羋薌蕪蘆蓯葦藶莧萇蒼苧蘇檾蘋莖蘢蔦塋煢繭荊薦薘莢蕘蓽蕎薈薺蕩榮葷滎犖熒蕁藎蓀蔭蕒葒葤藥蒞蓧萊蓮蒔萵薟獲蕕瑩鶯蓴蘀蘿螢營縈蕭薩蔥蕆蕢蔣蔞藍薊蘺蕷鎣驀薔蘞藺藹蘄蘊藪槁蘚虜慮虛蟲虯蟣雖蝦蠆蝕蟻螞蠶蠔蜆蠱蠣蟶蠻蟄蛺蟯螄蠐蛻蝸蠟蠅蟈蟬蠍螻蠑螿蟎蠨釁銜補襯袞襖嫋褘襪襲襏裝襠褌褳襝褲襇褸襤繈襴見觀覎規覓視覘覽覺覬覡覿覥覦覯覲覷觴觸觶讋譽謄訁計訂訃認譏訐訌討讓訕訖訓議訊記訒講諱謳詎訝訥許訛論訩訟諷設訪訣證詁訶評詛識詗詐訴診詆謅詞詘詔詖譯詒誆誄試詿詩詰詼誠誅詵話誕詬詮詭詢詣諍該詳詫諢詡譸誡誣語誚誤誥誘誨誑說誦誒請諸諏諾讀諑誹課諉諛誰諗調諂諒諄誶談誼謀諶諜謊諫諧謔謁謂諤諭諼讒諮諳諺諦謎諞諝謨讜謖謝謠謗諡謙謐謹謾謫譾謬譚譖譙讕譜譎讞譴譫讖穀豶貝貞負貟貢財責賢敗賬貨質販貪貧貶購貯貫貳賤賁貰貼貴貺貸貿費賀貽賊贄賈賄貲賃賂贓資賅贐賕賑賚賒賦賭齎贖賞賜贔賙賡賠賧賴賵贅賻賺賽賾贗贊贇贈贍贏贛赬趙趕趨趲躉躍蹌蹠躒踐躂蹺蹕躚躋踴躊蹤躓躑躡蹣躕躥躪躦軀車軋軌軒軑軔轉軛輪軟轟軲軻轤軸軹軼軤軫轢軺輕軾載輊轎輈輇輅較輒輔輛輦輩輝輥輞輬輟輜輳輻輯轀輸轡轅轄輾轆轍轔辭辯辮邊遼達遷過邁運還這進遠違連遲邇逕跡適選遜遞邐邏遺遙鄧鄺鄔郵鄒鄴鄰鬱郤郟鄶鄭鄆酈鄖鄲醞醱醬釅釃釀釋裏钜鑒鑾鏨釓釔針釘釗釙釕釷釺釧釤鈒釩釣鍆釹鍚釵鈃鈣鈈鈦鈍鈔鍾鈉鋇鋼鈑鈐鑰欽鈞鎢鉤鈧鈁鈥鈄鈕鈀鈺錢鉦鉗鈷缽鈳鉕鈽鈸鉞鑽鉬鉭鉀鈿鈾鐵鉑鈴鑠鉛鉚鈰鉉鉈鉍鈮鈹鐸鉶銬銠鉺鋩錏銪鋮鋏鋣鐃銍鐺銅鋁銱銦鎧鍘銖銑鋌銩銛鏵銓鎩鉿銚鉻銘錚銫鉸銥鏟銃鐋銨銀銣鑄鐒鋪鋙錸鋱鏈鏗銷鎖鋰鋥鋤鍋鋯鋨鏽銼鋝鋒鋅鋶鐦鐧銳銻鋃鋟鋦錒錆鍺鍩錯錨錛錡鍀錁錕錩錫錮鑼錘錐錦鑕鍁錈鍃錇錟錠鍵鋸錳錙鍥鍈鍇鏘鍶鍔鍤鍬鍾鍛鎪鍠鍰鎄鍍鎂鏤鎡鐨鎇鏌鎮鎛鎘鑷钂鐫鎳鎿鎦鎬鎊鎰鎵鑌鎔鏢鏜鏝鏍鏰鏞鏡鏑鏃鏇鏐鐔钁鐐鏷鑥鐓鑭鐠鑹鏹鐙鑊鐳鐶鐲鐮鐿鑔鑣鑞鑱鑲長門閂閃閆閈閉問闖閏闈閑閎間閔閌悶閘鬧閨聞闥閩閭闓閥閣閡閫鬮閱閬闍閾閹閶鬩閿閽閻閼闡闌闃闠闊闋闔闐闒闕闞闤隊陽陰陣階際陸隴陳陘陝隉隕險隨隱隸雋難雛讎靂霧霽黴靄靚靜靨韃鞽韉韝韋韌韍韓韙韞韜韻頁頂頃頇項順須頊頑顧頓頎頒頌頏預顱領頗頸頡頰頲頜潁熲頦頤頻頮頹頷頴穎顆題顒顎顓顏額顳顢顛顙顥纇顫顬顰顴風颺颭颮颯颶颸颼颻飀飄飆飆飛饗饜飣饑飥餳飩餼飪飫飭飯飲餞飾飽飼飿飴餌饒餉餄餎餃餏餅餑餖餓餘餒餕餜餛餡館餷饋餶餿饞饁饃餺餾饈饉饅饊饌饢馬馭馱馴馳驅馹駁驢駔駛駟駙駒騶駐駝駑駕驛駘驍罵駰驕驊駱駭駢驫驪騁驗騂駸駿騏騎騍騅騌驌驂騙騭騤騷騖驁騮騫騸驃騾驄驏驟驥驦驤髏髖髕鬢魘魎魚魛魢魷魨魯魴魺鮁鮃鯰鱸鮋鮓鮒鮊鮑鱟鮍鮐鮭鮚鮳鮪鮞鮦鰂鮜鱠鱭鮫鮮鮺鯗鱘鯁鱺鰱鰹鯉鰣鰷鯀鯊鯇鮶鯽鯒鯖鯪鯕鯫鯡鯤鯧鯝鯢鯰鯛鯨鯵鯴鯔鱝鰈鰏鱨鯷鰮鰃鰓鱷鰍鰒鰉鰁鱂鯿鰠鼇鰭鰨鰥鰩鰟鰜鰳鰾鱈鱉鰻鰵鱅鰼鱖鱔鱗鱒鱯鱤鱧鱣鳥鳩雞鳶鳴鳲鷗鴉鶬鴇鴆鴣鶇鸕鴨鴞鴦鴒鴟鴝鴛鴬鴕鷥鷙鴯鴰鵂鴴鵃鴿鸞鴻鵐鵓鸝鵑鵠鵝鵒鷳鵜鵡鵲鶓鵪鶤鵯鵬鵮鶉鶊鵷鷫鶘鶡鶚鶻鶖鶿鶥鶩鷊鷂鶲鶹鶺鷁鶼鶴鷖鸚鷓鷚鷯鷦鷲鷸鷺鸇鷹鸌鸏鸛鸘鹺麥麩黃黌黶黷黲黽黿鼂鼉鞀鼴齇齊齏齒齔齕齗齟齡齙齠齜齦齬齪齲齷龍龔龕龜" 
function String.prototype.s2t(){ 
var k='' 
for(var i=0;i<this.length;i++) k+=(s.indexOf(this.charAt(i))==-1)?this.charAt(i):t.charAt(s.indexOf(this.charAt(i))) 
return k 
} 
function String.prototype.t2s(){ 
var k='' 
for(var i=0;i<this.length;i++) k+=(t.indexOf(this.charAt(i))==-1)?this.charAt(i):s.charAt(t.indexOf(this.charAt(i))) 
return k 
} 
} 
</script> 
</div> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

无图片实现圆角框
++RunCode_BLOCK_cW6×4t++
取得页面的大小宽高等各种信息

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

一些收集整理非常不错的JS效果代码

您可能感兴趣的文章: