精品国精品国产自在久,国产又爽又黄无码无遮挡在线观看,国产性生大片免费观看性

　JavaScript經(jīng)典效果集錦

作者：佚名　時間： 2006-03-26　文檔類型：原創(chuàng)　來自：藍(lán)色理想

第 1 頁 JavaScript經(jīng)典效果集錦 [1]
第 2 頁 JavaScript經(jīng)典效果集錦 [2]
第 3 頁 JavaScript經(jīng)典效果集錦 [3]

*****[第2頁目錄]*****
十一超級強(qiáng)大的表單驗證-----推薦
十二漂亮的腳本日歷
十三進(jìn)入,退出頁面的各種效果!
十四很酷的效果,表格被選中回變顏色
十五彈出提示的效果
十六圖片之間的切換
十七 DIV_圓邊圓角的實現(xiàn)
十八跳動的菜單
十九通過頁面抓取照片
二十客戶端靜態(tài)頁面玩分頁

十 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生成靜態(tài)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);//替換掉模塊中相應(yīng)的地方 out.print(templateContent); // 根據(jù)時間得文件名 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 全部選擇然后拷貝]

十一超級強(qiáng)大的表單驗證：

運(yùn)行代碼框
<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="密碼不符合安全規(guī)則" type="password"></td> </tr> <tr> <td>重復(fù)：</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>手機(jī)：</td><td><input name="Mobile" require="false" dataType="Mobile" msg="手機(jī)號碼不正確"></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>操作系統(tǒng)：</td><td><select name="Operation" dataType="Require" msg="未選擇所用操作系統(tǒng)" ><option value="">選擇您所用的操作系統(tǒng)</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>運(yùn)動<input name="Favorite" value="1" type="checkbox">上網(wǎng)<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="自我介紹內(nèi)容必須在10個字之內(nèi)">中文是一個字</textarea></td> </tr> <td>自傳：</td><td><textarea name="History" dataType="LimitB" min="3" max="10" msg="自傳內(nèi)容必須在[3,10]個字節(jié)之內(nèi)">中文是兩個字節(jié)t</textarea></td> </tr> <tr> <td colspan="2"><input name="Submit" type="submit" value="確定提交"><input onClick="Validator.Validate(document.getElementById('demo'))" value="檢驗?zāi)Ｊ?" type="button"><input onClick="Validator.Validate(document.getElementById('demo'),2)" value="檢驗?zāi)Ｊ?" type="button"><input onClick="Validator.Validate(document.getElementById('demo'),3)" value="檢驗?zāi)Ｊ?" 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 : ["以下原因?qū)е绿峤皇。篭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 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

十二漂亮的腳本日歷：

運(yùn)行代碼框
<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 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

十三進(jìn)入,退出頁面的各種效果:

進(jìn)入頁面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">
推出頁面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">
這個是頁面被載入和調(diào)出時的一些特效。duration表示特效的持續(xù)時間，以秒為單位。transition表示使用哪種特效，取值為1-23:
　　0 矩形縮小
　　1 矩形擴(kuò)大
　　2 圓形縮小
　　3 圓形擴(kuò)大
　　4 下到上刷新
　　5 上到下刷新
　　6 左到右刷新
　　7 右到左刷新
　　8 豎百葉窗
　　9 橫百葉窗
　　10 錯位橫百葉窗
　　11 錯位豎百葉窗
　　12 點擴(kuò)散
　　13 左右到中間刷新
　　14 中間到左右刷新
　　15 中間到上下
　　16 上下到中間
　　17 右下到左上
　　18 右上到左下
　　19 左上到右下
　　20 左下到右上
　　21 橫條
　　22 豎條
　　23 以上22種隨機(jī)選擇一種

十四很酷的效果,表格被選中回變顏色:

運(yùn)行代碼框
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <html> <head> </head> <title>Mapabc地圖無限</title> <script language="JavaScript"> var searchResult=new Array();//鼠標(biāo)滑過時顯示背景色 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>把鼠標(biāo)移過來</TD> <TD>把鼠標(biāo)移過來</TD> </TR> <TR> <TD>把鼠標(biāo)移過來</TD> <TD>把鼠標(biāo)移過來</TD> </TR> <TR> <TD>把鼠標(biāo)移過來</TD> <TD>把鼠標(biāo)移過來</TD> </TR> <TR> <TD>把鼠標(biāo)移過來</TD> <TD>把鼠標(biāo)移過來</TD> </TR> </table> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

十五彈出提示的效果：

運(yùn)行代碼框
<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) //實現(xiàn)層的拖移 { 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 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

十六圖片之間的切換：

運(yùn)行代碼框
<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 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

十七 DIV_圓邊圓角的實現(xiàn)：

運(yùn)行代碼框
<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 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

十八跳動的菜單：

運(yùn)行代碼框
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>模仿as效果的導(dǎo)航菜單</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取代傳統(tǒng)網(wǎng)站<br />3.Flash何時才能連接數(shù)據(jù)庫？</div> <div id="board3">1.程序員與小姐的10個相同。<br />2.中國的程序員與中國的足球？</div> <div id="board4">1.二十一世紀(jì)最缺的是什么?人才<br /> <a target="_blank">http://www.gamvan.com</a> <a target="_blank">http://www.gamvan.com</a></div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

十九通過頁面抓取照片：

運(yùn)行代碼框
<!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）或者其他網(wǎng)頁正在使用攝像頭,請先關(guān)閉相關(guān)程序，否則本</FONT><FONT face=宋體>網(wǎng)頁對攝像頭的功能不能使用。<BR>2、本網(wǎng)頁必須使用一個插件ezvidc60.ocx，如果你未安裝，請<A >下載安裝</A>,(把下載的文件ezvid.rar解壓到一個目錄后，雙擊執(zhí)行ezvid.bat即可)。如果您認(rèn)為這會威脅到您計算機(jī)的安全，請關(guān)閉本頁。</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）或者其他網(wǎng)頁正在使用攝像頭,請先關(guān)閉相關(guān)程序，否則本</FONT><FONT face=宋體>網(wǎng)頁對攝像頭的功能不能使用。<BR>2、本網(wǎng)頁必須使用一個插件ezvidc60.ocx，如果你未安裝，請<A >下載安裝</A>,(把下載的文件ezvid.rar解壓到一個目錄后，雙擊執(zhí)行ezvid.bat即可)。如果您認(rèn)為這會威脅到您計算機(jī)的安全，請關(guān)閉本頁。</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 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

二十客戶端靜態(tài)頁面玩分頁：

運(yùn)行代碼框
<!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 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

出處：藍(lán)色理想
責(zé)任編輯：moby

上一頁 JavaScript經(jīng)典效果集錦 [1] 下一頁 JavaScript經(jīng)典效果集錦 [3]

◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論

相關(guān)文章

js版幻燈片效果

作者文章

意大利超市里的超強(qiáng)創(chuàng)意圖片

MSN登錄常見故障兩則解決辦法


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計比賽網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點最新

站點最新列表

周大�！熬�•自然”設(shè)計大賽開啟

國際體驗設(shè)計大會7月將在京舉行

中國國防科技信息中心標(biāo)志征集

云計算如何讓安全問題可控

云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機(jī)主題設(shè)計大賽

欄目最新

欄目最新列表

淺談JavaScript編程語言的編碼規(guī)范

如何在illustrator中繪制臺歷

Ps簡單繪制一個可愛的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡單的作品展示頁面

CSS定位機(jī)制之一:普通流

25個最佳最閃亮的Eclipse開發(fā)項目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx