当前位置：首页 > 资讯 > 技术文档

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

时间：2022-11-28 17:25 编辑：来源：阅读：
扫一扫，手机访问

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

按A就会跳转到练习的网页,请按A

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

类似与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 id="mainMenu"> 
[list] 
[*] 
[url=http://www.1sucai.cn/article/22079.htm#]图秀地带收藏夹[/url] 
[list] 
<li> 
[url=http://www.1sucai.cn/article/22079.htm#]我的好友[/url] 
[list] 
<li>[url=http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001]张三[10000001][/url][/*] 
[*][url=http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001]李四[10000002][/url][/*] 
[*][url=http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001]张三[10000001][/url][/*] 
[*][url=http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001]李四[10000002][/url][/*] 
[/list] 
</li> 
[*] 
[url=http://www.1sucai.cn/article/22079.htm#]陌生人[/url] 
[list] 
<li>[url=http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001]张三[10000001][/url][/*] 
[*][url=http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001]李四[10000002][/url][/*] 
[*][url=http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001]张三[10000001][/url][/*] 
[*][url=http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001]李四[10000002][/url][/*] 
[/list] 
</li> 
[/list] 
</li> 
[/list] 
</div> 
</body> 
</BODY> 
</HTML>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

超级强大的表单验证

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

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

漂亮的脚本日历

<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"> 
[url=]3[/url] <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,'')"> 月 [url=]4[/url] 
</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 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

跳动的菜单

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>模仿as效果的导航菜单</title> 
<style type="text/css"> 
<!== 
a:link,a:visited { text-decoration: none; color: #666666 } 
a:hover { text-decoration: underline } 
#hor1 { 
position:absolute; 
left:320px; 
top:20px; 
width:220px; 
height:20px; 
z-index:1; 
background-color: #999900; 
} 
#hor2 { 
position:absolute; 
left:320px; 
top:40px; 
width:220px; 
height:20px; 
z-index:2; 
background-color: #FFCC00; 
} 
#hor3 { 
position:absolute; 
left:320px; 
top:60px; 
width:220px; 
height:20px; 
z-index:3; 
background-color: #99CC00; 
} 
#board1 { 
position:absolute; 
left:320px; 
top:40px; 
width:220px; 
height:120px; 
z-index:-100; 
background-color: #333333; 
visibility: hidden; 
} 
body,td,th { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px; 
color: #FFFFFF; 
font-weight: bold; 
} 
body { 
background-color: #666666; 
} 
#board2 { 
position:absolute; 
left:320px; 
top:60px; 
width:220px; 
height:120px; 
z-index:-90; 
background-color: #333333; 
visibility: hidden; 
} 
#board3 { 
position:absolute; 
width:220px; 
height:120px; 
z-index:-80; 
left: 320px; 
top: 80px; 
background-color: #333333; 
visibility: hidden; 
} 
#hor4 { 
position:absolute; 
left:320px; 
top:80px; 
width:220px; 
height:20px; 
z-index:4; 
background-color: #99CCCC; 
} 
#board4 { 
position:absolute; 
left:320px; 
top:100px; 
width:220px; 
height:120px; 
z-index:-70; 
background-color: #333333; 
visibility: hidden; 
} 
--> 
</style> 
 
 
 
<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.二十一世纪最缺的是什么?人才
 
[url=http://www.gamvan.com]http://www.gamvan.com[/url] 
[url=http://www.gamvan.com]http://www.gamvan.com[/url]</div>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

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

MyPixbot 
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"> 
 
 
 
 
<div class="win" id="assist" onmousedown="MM_dragLayer('assist','',0,0,150,18,true,false,-1,-1,-1,-1,15,68,100,'',false,'')" style="position:absolute; left:15px; top:68px; width:185px; z-index:1;display:none;"> 
<table border="1" cellpadding="0" cellspacing="0" width="180"> 
<tr> 
<td class="caption">SeekAssist</td> 
<td align="center" width="14">[url=http://www.1sucai.cn/article/22079.htm#]%[/url]</td> 
<td align="center" width="14">[url=http://www.1sucai.cn/article/22079.htm#]X[/url]</td> 
</tr> 
<tr id="assistwin"> 
<td bordercolor="#eeeeee" colspan="3" height="100"> </td> 
</tr> 
</table>

</div> 
 
<div class="win" id="rank" onmousedown="MM_dragLayer('rank','',0,0,150,18,true,false,-1,-1,-1,-1,15,194,100,'',false,'')" style="position:absolute; left:15px; top:194px; width:185px; z-index:1;display:none;"> 
<table border="1" cellpadding="0" cellspacing="0" width="180"> 
<tr> 
<td class="caption">SeekRank</td> 
<td align="center" width="14">[url=http://www.1sucai.cn/article/22079.htm#]%[/url]</td> 
<td align="center" width="14">[url=http://www.1sucai.cn/article/22079.htm#]X[/url]</td> 
</tr> 
<tr id="rankwin"> 
<td bordercolor="#eeeeee" colspan="3" height="100"> </td> 
</tr> 
</table>

</div> 
 
<div class="win" id="mycolor" onmousedown="MM_dragLayer('mycolor','',0,0,150,18,true,false,-1,-1,-1,-1,15,320,100,'',false,'')" style="position:absolute; left:15px; top:320px; width:185px; z-index:1;display:none;"> 
<table border="1" cellpadding="0" cellspacing="0" width="180"> 
<tr> 
<td class="caption">MyColor</td> 
<td align="center" width="14">[url=http://www.1sucai.cn/article/22079.htm#]%[/url]</td> 
<td align="center" width="14">[url=http://www.1sucai.cn/article/22079.htm#]X[/url]</td> 
</tr> 
<tr id="mycolorwin"> 
<td bordercolor="#eeeeee" colspan="3" height="100"><table border="0" cellpadding="2" cellspacing="0" width="100%"> 
<tr> 
<td align="center">[url=http://www.1sucai.cn/article/22079.htm#]Default[/url]</td> 
</tr> 
<tr> 
<td align="center">[url=http://www.1sucai.cn/article/22079.htm#]StyleSheet#1[/url]</td> 
</tr> 
<tr> 
<td align="center">[url=http://www.1sucai.cn/article/22079.htm#]StyleSheet#2[/url]</td> 
</tr> 
<tr> 
<td align="center">[url=http://www.1sucai.cn/article/22079.htm#]StyleSheet#3[/url]</td> 
</tr> 
<tr> 
<td align="center">[url=http://www.1sucai.cn/article/22079.htm#]StyleSheet#4[/url]</td> 
</tr> 
<tr> 
<td align="center">[url=http://www.1sucai.cn/article/22079.htm#]StyleSheet#5[/url]</td> 
</tr> 
</table></td> 
</tr> 
</table>

</div> 
 
<div class="win" id="results" onmousedown="MM_dragLayer('results','',0,0,400,18,true,false,-1,-1,-1,-1,204,68,50,'',false,'')" style="position:absolute; left:204px; top:68px; width:575px; z-index:1;display:none;"> 
<table border="1" cellpadding="0" cellspacing="0" width="570"> 
<tr> 
<td><table border="0" cellpadding="0" cellspacing="0" width="100%"> 
<tr> 
<td class="caption">Results</td> 
<td class="button" width="12">[url=http://www.1sucai.cn/article/22079.htm#]%[/url]</td> 
<td class="button" width="12">[url=http://www.1sucai.cn/article/22079.htm#]X[/url]</td> 
</tr> 
</table></td> 
</tr> 
<tr> 
<td bordercolor="#eeeeee" height="20"><input name="url" size="100" type="text" value="http://www.google.com/search?q=ezlee"> 
[url=http://www.1sucai.cn/article/22079.htm#]Search[/url]</td> 
</tr> 
<tr id="resultswin"> 
<td class="navframe" height="318" valign="top"><aiframe frameborder="0" height="100%" id="mainframe" name="mainframe" scrolling="auto" src="http://www.google.com/search?q=ezlee" width="100%"><font color="#FF0000">Welcome!</font></aiframe></td> 
</tr> 
<tr> 
<td class="statusbar" height="14">Ready!</td> 
</tr> 
</table>

</div>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

1个非常不错的loading 效果

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

繁简体文字转换工具

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

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

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

全部评论(0)

上一篇：浅谈JS中json数据的处理
下一篇：WebApi+Bootstrap+KnockoutJs打造单页面程序

资讯排行榜
更多>>