JavaScript经典效果集锦

　JavaScript经典效果集锦

作者：佚名　时间： 2006-03-26　文档类型：原创　来自：蓝色理想

第 1 页 JavaScript经典效果集锦 [1]
第 2 页 JavaScript经典效果集锦 [2]
第 3 页 JavaScript经典效果集锦 [3]

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

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

进入页面<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" onclick="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 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 onmousedown='cao_x=event.x-parentNode.style.pixelLeft;cao_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='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 onclick=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" 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<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 全部选择提示：你可先修改部分代码，再按运行]

出处：蓝色理想
责任编辑：moby

上一页 JavaScript经典效果集锦 [1] 下一页 JavaScript经典效果集锦 [3]

◎进入论坛网页制作、网站综合版块参加讨论

相关文章

js版幻灯片效果

作者文章

MSN登录常见故障两则解决办法

站点最新

站点最新列表

全兼容的纯CSS级联菜单要点浅析

CSS Sprites 图片整合技术

雅安,一场中式旅行

热烈祝贺"醒狮杯"圆满结束

菊花宝典大赏大奖教程《阳台》

交互设计师怎样和产品团队合作

Photoshop打造个性潮流音乐海报

简单解读面包屑

CSS盒模型

Apple与Microsoft网站可用性研究

栏目最新

栏目最新列表

safari 4 新特性

Photoshop制作精美高光流线字

IE下img多余5像素空白解决方法

XHTML1.0与HTML兼容指引16条

JavaScript优化细节

全兼容的纯CSS级联菜单要点浅析

CSS Sprites 图片整合技术

Photoshop打造个性潮流音乐海报

CSS盒模型

45度地图编辑器及游戏开发心得