JavaScript经典效果集锦(二)

最新推荐文章于 2022-07-28 22:05:07 发布

jeseechen

最新推荐文章于 2022-07-28 22:05:07 发布

阅读量1.2k

点赞数

分类专栏： JavaScript特效文章标签： javascript function calendar input transition border

本文链接：https://blog.csdn.net/jeseechen/article/details/759252

版权

JavaScript特效专栏收录该内容

11 篇文章 0 订阅

订阅专栏

十一超级强大的表单验证-----推荐
十二漂亮的脚本日历
十三进入,退出页面的各种效果!
十四很酷的效果,表格被选中回变颜色
十五弹出提示的效果
十六图片之间的切换
十七 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" 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 全部选择提示：你可先修改部分代码，再按运行]

十二漂亮的脚本日历：

运行代码框
<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" οnkeydοwn="if (event.keyCode==13){setDate()}" οnkeyup="this.value=this.value.replace(/[^0-9]/g,'')" οnpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 年 <input name="month" type="text" size="1" maxlength="2" οnkeydοwn="if (event.keyCode==13){setDate()}" οnkeyup="this.value=this.value.replace(/[^0-9]/g,'')" οnpaste="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 全部选择提示：你可先修改部分代码，再按运行]

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

进入页面<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=color what.style.backgroundColor=color2 } function borderize_on(e){ if (document.all) source3=event.srcElement else if (document.getElementById) source3=e.target if (source3.className=="zuo22"){ borderize(source3,"#999999","#F6F6F8") } else{ while(source3.tagName!="TABLE"){ source3=document.getElementById? source3.parentNode : source3.parentElement if (source3.className=="zuo22") borderize(source3,"#999999","#F6F6F8") } } } function borderize_off(e){ if (document.all) source4=event.srcElement else if (document.getElementById) source4=e.target if (source4.className=="zuo22") borderize(source4,"white","white") else{ while(source4.tagName!="TABLE"){ source4=document.getElementById? source4.parentNode : source4.parentElement if (source4.className=="zuo22") borderize(source4,"white","white") } } } </script> <body > <table width="96%" border="0" onMouseOver="borderize_on(event)" onMouseOut="borderize_off(event)" class="zuo22" οnclick="javascript:clickfun('123')"> <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 οnclick=document.getElementById('cao1').style.display='block' οnfοcus=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 οnmοusedοwn='cao_x=event.x-parentNode.style.pixelLeft;cao_y=event.y-parentNode.style.pixelTop;setCapture();' οnmοuseup='releaseCapture();' οnmοusemοve='caoMove(this.parentNode)' style='cursor:move;'>"); document.write("<tr align=center>"); document.write("<td align=left>提示:CAO888</td>"); document.write("</tr>"); document.write("</table>"); document.write("<span style= cursor:hand οnclick=this.parentNode.parentNode.style.display='none';><img src='http://pic1.blueidea.com/bbs/topic5.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=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" οnclick="re(1);huke()">News</div> <div id="hor2" οnclick="re(2);huke()">Populor</div> <div id="hor3" οnclick="re(3);huke()">Sports</div> <div id="hor4" οnclick="re(4);huke()">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 οnclick=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 οnclick=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 全部选择提示：你可先修改部分代码，再按运行]

jeseechen

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript经典效果集锦(二)

十一超级强大的表单验证-----推荐十二漂亮的脚本日历十三进入,退出页面的各种效果!十四很酷的效果,表格被选中回变颜色十五弹出提示的效果十六图片之间的切换十七 DIV_圆边圆角的实现十八跳动的菜单十九通过页面抓取照片二十客户端静态页面玩分页十 JSP页面自动生成html页面/或任何格式页面:先建立一个模本页面:template.htm代码拷贝框###tit
复制链接

扫一扫