JavaScript经典效果集锦（二） / iVAN

javascript

*****[第2页目录]*****
十一超级强大的表单验证-----推荐
十二漂亮的脚本日历
十三进入,退出页面的各种效果!
十四很酷的效果,表格被选中回变颜色
十五弹出提示的效果
十六图片之间的切换
十七 DIV_圆边圆角的实现
十八跳动的菜单
十九通过页面抓取照片
二十客户端静态页面玩分页

十 JSP页面自动生成html页面/或任何格式页面:

先建立一个模本页面: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>
[Ctrl+A 全部选择然后拷贝]

再写一个JSP页面: buildhtml.jsp:

代码拷贝框
<%@ page contentType="text/html; charset=gb2312" import="java.util.*,java.io.*"%><%try{String title="李鹏的jsp生成静态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);//替换掉模块中相应的地方out.print(templateContent);// 根据时间得文件名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 全部选择然后拷贝]

十一超级强大的表单验证：

运行代码框
<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" > <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 value="检验模式1" type="button"><input value="检验模式2" type="button"><input value="检验模式3" type="button"></td> </tr> </form> </table> <script> /*************************************************Validator v1.01code by 我佛山人wfsr@cunite.comhttp://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 全部选择提示：你可先修改部分代码，再按运行]

十二漂亮的脚本日历：

运行代码框
<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" 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" 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 > <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 ></TD>"); document.write("</TR>"); } </Script></TBODY></TABLE><Script LANGUAGE="JavaScript"> Calendar();</Script>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

十三进入,退出页面的各种效果:

进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">
推出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">
这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为1-23:
　　0 矩形缩小
　　1 矩形扩大
　　2 圆形缩小
　　3 圆形扩大
　　4 下到上刷新
　　5 上到下刷新
　　6 左到右刷新
　　7 右到左刷新
　　8 竖百叶窗
　　9 横百叶窗
　　10 错位横百叶窗
　　11 错位竖百叶窗
　　12 点扩散
　　13 左右到中间刷新
　　14 中间到左右刷新
　　15 中间到上下
　　16 上下到中间
　　17 右下到左上
　　18 右上到左下
　　19 左上到右下
　　20 左下到右上
　　21 横条
　　22 竖条
　　23 以上22种随机选择一种

十四很酷的效果,表格被选中回变颜色:

运行代码框
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><html><head></head><title>Mapabc地图无限</title><script language="JavaScript"> var searchResult=new Array();//鼠标滑过时显示背景色function borderize(what,color,color2){what.style.borderColor=colorwhat.style.backgroundColor=color2}function borderize_on(e){if (document.all)source3=event.srcElementelse if (document.getElementById)source3=e.targetif (source3.className=="zuo22"){borderize(source3,"#999999","#F6F6F8")}else{while(source3.tagName!="TABLE"){source3=document.getElementById? source3.parentNode : source3.parentElementif (source3.className=="zuo22")borderize(source3,"#999999","#F6F6F8")}}}function borderize_off(e){if (document.all)source4=event.srcElementelse if (document.getElementById)source4=e.targetif (source4.className=="zuo22")borderize(source4,"white","white")else{while(source4.tagName!="TABLE"){source4=document.getElementById? source4.parentNode : source4.parentElementif (source4.className=="zuo22")borderize(source4,"white","white")}}} </script><body ><table width="96%" border="0" class="zuo22" ><TR><TD>把鼠标移过来</TD><TD>把鼠标移过来</TD></TR><TR><TD>把鼠标移过来</TD><TD>把鼠标移过来</TD></TR><TR><TD>把鼠标移过来</TD><TD>把鼠标移过来</TD></TR><TR><TD>把鼠标移过来</TD><TD>把鼠标移过来</TD></TR></table></body></html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

十五弹出提示的效果：

运行代码框
<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 >"); 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='/UploadPic/2007-7/200777165553602.gif'><br>CAO呀,错误了...<br>[确定]</span>"); document.write(" </div>"); document.write("</div>");}function caoMove(obj) //实现层的拖移{ 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>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

十六图片之间的切换：

运行代码框
<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>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

十七 DIV_圆边圆角的实现：

运行代码框
<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>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

十八跳动的菜单：

运行代码框
<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=0function re(menu_no){if(lastNo!=menu_no){cur=menu_no+1lastNo=menu_norest()}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.6posY+=speedfor(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" >News</div><div id="hor2" >Populor</div><div id="hor3" >Sports</div><div id="hor4" >Woman</div><div id="board1">1.由AS而想起Javascript<br />2.用Jscript写ASP有没有先天性的不足？<br />3.没有了。</div><div id="board2">1.xhtml+css真的来了吗？<br />2.Flash取代传统网站<br />3.Flash何时才能连接数据库？</div><div id="board3">1.程序员与小姐的10个相同。<br />2.中国的程序员与中国的足球？</div><div id="board4">1.二十一世纪最缺的是什么?人才<br /><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 全部选择提示：你可先修改部分代码，再按运行]

十九通过页面抓取照片：

运行代码框
<!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）或者其他网页正在使用摄像头,请先关闭相关程序，否则本</FONT><FONT face=宋体>网页对摄像头的功能不能使用。<BR>2、本网页必须使用一个插件ezvidc60.ocx，如果你未安装，请<A href="http://nnyc.vicp.net:4099/schoolstation/source/ezvid.rar">下载安装</A>,(把下载的文件ezvid.rar解压到一个目录后，双击执行ezvid.bat即可)。如果您认为这会威胁到您计算机的安全，请关闭本页。</FONT></FONT></TD><TD style="HEIGHT: 222px" borderColor=#ffffff align=middle><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=middle 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）或者其他网页正在使用摄像头,请先关闭相关程序，否则本</FONT><FONT face=宋体>网页对摄像头的功能不能使用。<BR>2、本网页必须使用一个插件ezvidc60.ocx，如果你未安装，请<A href="http://nnyc.vicp.net:4099/schoolstation/source/ezvid.rar">下载安装</A>,(把下载的文件ezvid.rar解压到一个目录后，双击执行ezvid.bat即可)。如果您认为这会威胁到您计算机的安全，请关闭本页。</FONT></FONT></TD><TD style="HEIGHT: 222px" borderColor=#ffffff align=middle><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=middle 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>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

二十客户端静态页面玩分页：

运行代码框
<!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>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

时间： 2024-09-12 11:27:54

JavaScript经典效果集锦（二）

JavaScript经典效果集锦（二）的相关文章

JavaScript经典效果集锦（三）

JavaScript经典效果集锦（一）

JavaScript经典效果集锦_javascript技巧

JavaScript 经典效果集_javascript技巧

javascript高亮效果的二种实现方法_javascript技巧

Javascript动画效果（3）_javascript技巧

JavaScript 经典实例日常收集整理(常用经典)_javascript技巧

JavaScript经典语句及其基本应用

JavaScript事件学习小结(二)js事件处理程序_javascript技巧