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

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

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
类似与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>  <sty1e> 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 {  text-decoration: underline; } span.key { text-decoration: underline; } </style> </head> <body>  <ul id="menuList"> <li class="menubar"> 图秀地带收藏夹 <ul id="productsMenu" class="menu"> <li> 我的好友 <ul id="newPhonesMenu" class="submenu"> <li>张三[10000001]</li> <li>李四[10000002]</li> <li>张三[10000001]</li> <li>李四[10000002]</li> </ul> </li> <li> 陌生人 <ul id="compareMenu" class="submenu"> <li>张三[10000001]</li> <li>李四[10000002]</li> <li>张三[10000001]</li> <li>李四[10000002]</li> </ul> </li> </ul> </li> </ul>  </body> </BODY> </HTML>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
超级强大的表单验证

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
漂亮的脚本日历

<sty1e> 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"> 3 <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,'')"> 月 4 </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需再刷新一下页面才能执行]
跳动的菜单

[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">  <sty1e type="text/css">  </style> </head> <body>  <table width="180" border="1" cellpadding="0" cellspacing="0"> <tr> <td class="caption">SeekAssist</td> <td width="14" align="center">%</td> <td width="14" align="center">X</td> </tr> <tr id="assistwin"> <td height="100" colspan="3" bordercolor="#eeeeee"> </td> </tr> </table>     <table width="180" border="1" cellpadding="0" cellspacing="0"> <tr> <td class="caption">SeekRank</td> <td width="14" align="center">%</td> <td width="14" align="center">X</td> </tr> <tr id="rankwin"> <td height="100" colspan="3" bordercolor="#eeeeee"> </td> </tr> </table>     <table width="180" border="1" cellpadding="0" cellspacing="0"> <tr> <td class="caption">MyColor</td> <td width="14" align="center">%</td> <td width="14" align="center">X</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">Default</td> </tr> <tr> <td align="center">StyleSheet#1</td> </tr> <tr> <td align="center">StyleSheet#2</td> </tr> <tr> <td align="center">StyleSheet#3</td> </tr> <tr> <td align="center">StyleSheet#4</td> </tr> <tr> <td align="center">StyleSheet#5</td> </tr> </table></td> </tr> </table>     <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">%</td> <td width="12" class="button">X</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"> Search</td> </tr> <tr id="resultswin"> <td height="318" valign="top" class="navframe"><font color="#FF0000">Welcome!</font></aiframe></td> </tr> <tr> <td height="14" class="statusbar">Ready!</td> </tr> </table>    </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
1个非常不错的loading 效果

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
繁简体文字转换工具

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
无图片实现圆角框
++RunCode_BLOCK_cW6×4t++
取得页面的大小宽高等各种信息

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

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

JavaScript相关栏目本月热门文章