收藏一些好的前端设计细节
1、一个美观简单的输入框效果,鼠标点击输入框原有文字自动消失
1、一个美观简单的输入框效果,鼠标点击输入框原有文字自动消失
View Code
1 <title>一个美观简单的输入框效果,鼠标点击输入框原有文字自动消失</title> 2 <style type="text/css"> 3 .searchinput{ 4 border-right-width: 0px; 5 padding-left: 3px; 6 width: 168px; 7 font-family: arial; 8 float: left; 9 border-top-width: 0px; 10 border-bottom-width: 0px; 11 color: #636365; 12 margin-left: 4px; 13 font-size: 8pt; 14 vertical-align: middle; 15 border-left-width: 0px; 16 margin-right: 3px; 17 } 18 .tab_search{ 19 border-bottom: #cccccc 1px solid; 20 border-left: #cccccc 1px solid; 21 height: 25px; 22 border-top: #cccccc 1px solid; 23 border-right: #cccccc 1px solid; 24 } 25 .searchaction{ 26 width: 21px; 27 float: left; 28 height: 17px; 29 } 30 </style> 31 <form action="#" name="search"> 32 <table border="0" cellpadding="0" cellspacing="0" class="tab_search"> 33 <tr> 34 <td> 35 <input type="text" name="q" title="Search" class="searchinput" id="searchinput" onkeydown="if (event.keyCode==13) {}" onblur="if(this.value=='')value='- Search Products -';" onfocus="if(this.value=='- Search Products -')value='';" value="- Search Products -" size="10"/> 36 </td> 37 <td> 38 <input type="image" width="21" height="17" class="searchaction" onclick="if(document.forms['search'].searchinput.value=='- Search Products -')document.forms['search'].searchinput.value='';" alt="Search" src="magglass.gif" border="0" hspace="2"/> 39 </td> 40 </tr> 41 </table> 42 </form>
2、表单验证类
View Code
1 <title>表单验证类 </title> 2 <style> 3 body,td{font:normal 12px Verdana;color:#333333} 4 input,textarea,select,td{font:normal 12px Verdana;color:#333333;border:1px solid #999999;background:#ffffff} 5 table{border-collapse:collapse;} 6 td{padding:3px} 7 input{height:20;} 8 textarea{width:80%;height:50px;overfmin:auto;} 9 form{display:inline} 10 </style> 11 <table align="center"> 12 <form name="theForm" id="demo" action="" method="get" onSubmit="return Validator.Validate(this,2)"> 13 <tr> 14 <td>真实姓名：</td><td><input name="Name" dataType="Chinese" msg="真实姓名只允许中文"></td> 15 </tr> 16 <tr> 17 <td>英文名：</td><td><input name="Nick" dataType="English" require="false" msg="英文名只允许英文字母"></td> 18 </tr> 19 <tr> 20 <td>主页：</td><td><input name="Homepage" require="false" dataType="Url" msg="非法的Url"></td> 21 </tr> 22 <tr> 23 <td>密码：</td><td><input name="Password" dataType="SafeString" msg="密码不符合安全规则" type="password"></td> 24 </tr> 25 <tr> 26 <td>重复：</td><td><input name="Repeat" dataType="Repeat" to="Password" msg="两次输入的密码不一致" type="password"></td> 27 </tr> 28 <tr> 29 <td>信箱：</td><td><input name="Email" dataType="Email" msg="信箱格式不正确"></td> 30 </tr> 31 <tr> 32 <td>信箱：</td><td><input name="Email" dataType="Repeat" to="Email" msg="两次输入的信箱不一致"></td> 33 </tr> 34 <tr> 35 <td>QQ：</td><td><input name="QQ" require="false" dataType="QQ" msg="QQ号码不存在"></td> 36 </tr> 37 <tr> 38 <td>身份证：</td><td><input name="Card" dataType="IdCard" msg="身份证号码不正确"></td> 39 </tr> 40 <tr> 41 <td>年龄：</td><td><input name="Year" dataType="Range" msg="年龄必须在18~28之间" min="18" max="28"></td> 42 </tr> 43 <tr> 44 <td>年龄1：</td><td><input name="Year1" require="false" dataType="Compare" msg="年龄必须在18以上" to="18" operator="GreaterThanEqual"></td> 45 </tr> 46 <tr> 47 <td>电话：</td><td><input name="Phone" require="false" dataType="Phone" msg="电话号码不正确"></td> 48 </tr> 49 <tr> 50 <td>手机：</td><td><input name="Mobile" require="false" dataType="Mobile" msg="手机号码不正确"></td> 51 </tr> 52 <tr> 53 <td>生日：</td><td><input name="Birthday" dataType="Date" format="ymd" msg="生日日期不存在"></td> 54 </tr> 55 <tr> 56 <td>邮政编码：</td><td><input name="Zip" dataType="Custom" regexp="^[1-9]\d{5}$" msg="邮政编码不存在"></td> 57 </tr> 58 <tr> 59 <td>邮政编码：</td><td><input name="Zip1" dataType="Zip" msg="邮政编码不存在"></td> 60 </tr> 61 <tr> 62 <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> 63 </tr> 64 <tr> 65 <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> 66 </tr> 67 <tr> 68 <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> 69 </tr> 70 <td>自我介绍：</td><td><textarea name="Description" dataType="Limit" max="10" msg="自我介绍内容必须在10个字之内">中文是一个字</textarea></td> 71 </tr> 72 <td>自传：</td><td><textarea name="History" dataType="LimitB" min="3" max="10" msg="自传内容必须在[3,10]个字节之内">中文是两个字节t</textarea></td> 73 </tr> 74 <tr> 75 <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> 76 </tr> 77 </form> 78 </table> 79 <script> 80 /************************************************* 81 Validator v1.01 82 code by 我佛山人 83 wfsr@cunite.com 84 http://www.cunite.com 85 *************************************************/ 86 Validator = { 87 Require : /.+/, 88 Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, 89 Phone : /^((\(\d{3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}$/, 90 Mobile : /^((\(\d{3}\))|(\d{3}\-))?13\d{9}$/, 91 Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/, 92 IdCard : /^\d{15}(\d{2}[A-Za-z0-9])?$/, 93 Currency : /^\d+(\.\d+)?$/, 94 Number : /^\d+$/, 95 Zip : /^[1-9]\d{5}$/, 96 QQ : /^[1-9]\d{4,8}$/, 97 Integer : /^[-\+]?\d+$/, 98 Double : /^[-\+]?\d+(\.\d+)?$/, 99 English : /^[A-Za-z]+$/, 100 Chinese : /^[\u0391-\uFFE5]+$/, 101 UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/, 102 IsSafe : function(str){return !this.UnSafe.test(str);}, 103 SafeString : "this.IsSafe(value)", 104 Limit : "this.limit(value.length,getAttribute('min'), getAttribute('max'))", 105 LimitB : "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))", 106 Date : "this.IsDate(value, getAttribute('min'), getAttribute('format'))", 107 Repeat : "value == document.getElementsByName(getAttribute('to'))[0].value", 108 Range : "getAttribute('min') < value && value < getAttribute('max')", 109 Compare : "this.compare(value,getAttribute('operator'),getAttribute('to'))", 110 Custom : "this.Exec(value, getAttribute('regexp'))", 111 Group : "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))", 112 ErrorItem : [document.forms[0]], 113 ErrorMessage : ["以下原因导致提交失败：\t\t\t\t"], 114 Validate : function(theForm, mode){ 115 var obj = theForm || event.srcElement; 116 var count = obj.elements.length; 117 this.ErrorMessage.length = 1; 118 this.ErrorItem.length = 1; 119 this.ErrorItem[0] = obj; 120 for(var i=0;i<count;i++){ 121 with(obj.elements[i]){ 122 var _dataType = getAttribute("dataType"); 123 if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined") continue; 124 this.ClearState(obj.elements[i]); 125 if(getAttribute("require") == "false" && value == "") continue; 126 switch(_dataType){ 127 case "Date" : 128 case "Repeat" : 129 case "Range" : 130 case "Compare" : 131 case "Custom" : 132 case "Group" : 133 case "Limit" : 134 case "LimitB" : 135 case "SafeString" : 136 if(!eval(this[_dataType])) { 137 this.AddError(i, getAttribute("msg")); 138 } 139 break; 140 default : 141 if(!this[_dataType].test(value)){ 142 this.AddError(i, getAttribute("msg")); 143 } 144 break; 145 } 146 } 147 } 148 if(this.ErrorMessage.length > 1){ 149 mode = mode || 1; 150 var errCount = this.ErrorItem.length; 151 switch(mode){ 152 case 2 : 153 for(var i=1;i<errCount;i++) 154 this.ErrorItem[i].style.color = "red"; 155 case 1 : 156 alert(this.ErrorMessage.join("\n")); 157 this.ErrorItem[1].focus(); 158 break; 159 case 3 : 160 for(var i=1;i<errCount;i++){ 161 try{ 162 var span = document.createElement("SPAN"); 163 span.id = "__ErrorMessagePanel"; 164 span.style.color = "red"; 165 this.ErrorItem[i].parentNode.appendChild(span); 166 span.innerHTML = this.ErrorMessage[i].replace(/\d+:/,"*"); 167 } 168 catch(e){alert(e.description);} 169 } 170 this.ErrorItem[1].focus(); 171 break; 172 default : 173 alert(this.ErrorMessage.join("\n")); 174 break; 175 } 176 return false; 177 } 178 return true; 179 }, 180 limit : function(len,min, max){ 181 min = min || 0; 182 max = max || Number.MAX_VALUE; 183 return min <= len && len <= max; 184 }, 185 LenB : function(str){ 186 return str.replace(/[^\x00-\xff]/g,"**").length; 187 }, 188 ClearState : function(elem){ 189 with(elem){ 190 if(style.color == "red") 191 style.color = ""; 192 var lastNode = parentNode.childNodes[parentNode.childNodes.length-1]; 193 if(lastNode.id == "__ErrorMessagePanel") 194 parentNode.removeChild(lastNode); 195 } 196 }, 197 AddError : function(index, str){ 198 this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index]; 199 this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str; 200 }, 201 Exec : function(op, reg){ 202 return new RegExp(reg,"g").test(op); 203 }, 204 compare : function(op1,operator,op2){ 205 switch (operator) { 206 case "NotEqual": 207 return (op1 != op2); 208 case "GreaterThan": 209 return (op1 > op2); 210 case "GreaterThanEqual": 211 return (op1 >= op2); 212 case "LessThan": 213 return (op1 < op2); 214 case "LessThanEqual": 215 return (op1 <= op2); 216 default: 217 return (op1 == op2); 218 } 219 }, 220 MustChecked : function(name, min, max){ 221 var groups = document.getElementsByName(name); 222 var hasChecked = 0; 223 min = min || 1; 224 max = max || groups.length; 225 for(var i=groups.length-1;i>=0;i--) 226 if(groups[i].checked) hasChecked++; 227 return min <= hasChecked && hasChecked <= max; 228 }, 229 IsDate : function(op, formatString){ 230 formatString = formatString || "ymd"; 231 var m, year, month, day; 232 switch(formatString){ 233 case "ymd" : 234 m = op.match(new RegExp("^((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})$")); 235 if(m == null ) return false; 236 day = m[6]; 237 month = m[5]--; 238 year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10)); 239 break; 240 case "dmy" : 241 m = op.match(new RegExp("^(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))$")); 242 if(m == null ) return false; 243 day = m[1]; 244 month = m[3]--; 245 year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10)); 246 break; 247 default : 248 break; 249 } 250 if(!parseInt(month)) return false; 251 month = month==12 ?0:month; 252 var date = new Date(year, month, day); 253 return (typeof(date) == "object" && year == date.getFullYear() && month == date.getMonth() && day == date.getDate()); 254 function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;} 255 } 256 } 257 </script> 258 259
3、radio切换
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>Radio切换效果 </title> 6 <style> 7 *{margin:0;padding:0;} 8 body{margin:50px;font-size:12px;color:#666;} 9 li{list-style:none;} 10 div{width:210px;} 11 #tab1 ,#tab2{width:398px;height:34px;border:1px #cfedff solid;border-bottom:0;background:url(images/title.gif) repeat-x;} 12 #tab1 ul ,#tab2 ul{margin:0;padding:0;} 13 #tab1 li,#tab2 li{float:left;padding:0 30px;height:34px;line-height:34px;text-align:center;border-right:1px #ebf7ff solid;cursor:pointer;} 14 #tab1 li.now,#tab2 li.now{color:#5299c4;background:#fff;font-weight:bold;} 15 .tablist{width:378px;height:100px;padding:10px;font-size:14px;line-height:24px;border:1px #cfedff solid;border-top:0;display:none;} 16 .block{display:block;} 17 </style> 18 </head> 19 <body> 20 <h1>Radio切换</h1> 21 <style type="text/css"> 22 fieldset{width:378px;border:1px #B0C0D1 solid;padding:10px;} 23 legend{background:#B0C0D1;padding:4px 10px;color:#fff;} 24 #c{margin-top:10px;} 25 .c1,.c2{width:378px;line-height:20px;} 26 .c1{color:#014CC9;} 27 .c2{color:#7E6095;} 28 h3{font-size:16px;padding:5px 0;} 29 .red{color:#BD0A01;} 30 </style> 31 <script type="text/javascript"> 32 function radioShow(){ 33 var myradio=document.getElementsByName("myradio"); 34 var div=document.getElementById("c").getElementsByTagName("div"); 35 for(i=0;i<div.length;i++){ 36 if(myradio[i].checked){ 37 div[i].style.display="block"; 38 } 39 else{ 40 div[i].style.display="none"; 41 } 42 } 43 } 44 </script> 45 <form name="ck"> 46 <fieldset> 47 <legend>I'm Radio</legend> 48 <h3>请选择：</h3> 49 <label for="r1" class="red"><input name="myradio" id="r1" type="radio" value="" checked="checked" onclick="radioShow();" />XML教程</label> 50 <label for="r2" class="red"><input name="myradio" id="r2" type="radio" value="" onclick="radioShow();" />浏览器脚本</label> 51 <div id="c"> 52 <div class="c1"> 53 <label for="xml"><input name="c2" type="checkbox" id="xml" value="" />XML</label> 54 <label for="dtd"><input name="c2" id="dtd" type="checkbox" value="" />DTD</label> 55 <label for="xmldom"><input name="c2" id="xmldom" type="checkbox" value="" />XML DOM</label> 56 <label for="xsl"><input name="c2" id="xsl" type="checkbox" value="" />XSL</label> 57 <label for="xslt"><input name="c2" id="xslt" type="checkbox" value="" />XSLT</label> 58 <label for="xslfo"><input name="c2" id="xslfo" type="checkbox" value="" />XSL-FO</label> 59 <label for="xpath"><input name="c2" id="xpath" type="checkbox" value="" />XPath</label> 60 <label for="xquery"><input name="c2" id="xquery" type="checkbox" value="" />XQuery</label> 61 <label for="xlink"><input name="c2" id="xlink" type="checkbox" value="" />XLink </label> 62 <label for="xpointer"><input name="c2" id="xpointer" type="checkbox" value="" />XPointer</label> 63 <label for="schema"><input name="c2" id="schema" type="checkbox" value="" />Schema</label> 64 <label for="xforms"><input name="c2" id="xforms" type="checkbox" value="" />XForms</label> 65 </div> 66 <div class="c2" style="display:none;"> 67 <label for="js"><input name="c3" id="js" type="checkbox" value="" />JavaScript</label> 68 <label for="hd"><input name="c3" id="hd" type="checkbox" value="" />HTML DOM</label> 69 <label for="dhtml"><input name="c3" id="dhtml" type="checkbox" value="" />DHTML</label> 70 <label for="vbs"><input name="c3" id="vbs" type="checkbox" value="" />VBScript</label> 71 <label for="ajax"><input name="c3" id="ajax" type="checkbox" value="" />AJAX</label> 72 <label for="e4x"><input name="c3" id="e4x" type="checkbox" value="" />E4X</label> 73 <label for="wml"><input name="c3" id="wml" type="checkbox" value="" />WMLScript</label> 74 </div> 75 </div> 76 </fieldset> 77 </form> 78 </body> 79 </html>
4、输入框input鼠标点击自动加底色
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>表单效果之输入框换色 </title> 6 <style type="text/css"> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 body{ 12 font-size:63%; 13 color:#000; 14 } 15 /*input*/ 16 .input_on{ 17 padding:2px 8px 0pt 3px; 18 height:18px; 19 border:1px solid #999; 20 background-color:#FFFFCC; 21 } 22 .input_off{ 23 padding:2px 8px 0pt 3px; 24 height:18px; 25 border:1px solid #CCC; 26 background-color:#FFF; 27 } 28 .input_move{ 29 padding:2px 8px 0pt 3px; 30 height:18px; 31 border:1px solid #999; 32 background-color:#FFFFCC; 33 } 34 .input_out{ 35 /*height:16px;默认高度*/ 36 padding:2px 8px 0pt 3px; 37 height:18px; 38 border:1px solid #CCC; 39 background-color:#FFF; 40 } 41 /*form*/ 42 ul.input_test{ 43 margin:20px auto 0 auto; 44 width:500px; 45 list-style-type:none; 46 } 47 ul.input_test li{ 48 width:500px; 49 height:22px; 50 margin-bottom:10px; 51 } 52 .input_test label{ 53 float:left; 54 padding-right:10px; 55 width:100px; 56 line-height:22px; 57 text-align:right; 58 font-size:1.4em; 59 } 60 .input_test p{ 61 float:left; 62 _margin-top:-1px; 63 } 64 .input_test span{ 65 float:left; 66 padding-left:10px; 67 line-height:22px; 68 text-align:left; 69 font-size:1.2em; 70 color:#999; 71 } 72 </style> 73 </head> 74 <body> 75 <ul class="input_test"> 76 <li> 77 <label for="inp_name">您的大名：</label> 78 <p><input id="inp_name" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p> 79 <span>您的姓名</span> 80 </li> 81 <li> 82 <label for="inp_email">您的Email：</label> 83 <p><input id="inp_email" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p> 84 <span>请输入Email</span> 85 </li> 86 <li> 87 <label for="inp_web">你的破站：</label> 88 <p><input id="inp_web" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p> 89 <span>请输入网址</span> 90 </li> 91 </ul> 92 </body> 93 </html>
5、选择不同的按钮文本框自动出现不同的内容
View Code
1 <html> 2 <head> 3 <title>点击单选框改变输入框内容</title> 4 </head> 5 <body> 6 <script language=JavaScript> 7 var defaultValue = "" 8 function Changes() { 9 var defaultValue = "changed"; 10 } 11 ie = document.all?1:0 12 ns4 = document.layers?1:0 13 var c = 1 14 function hideIt(id) { 15 if (ie) { 16 document.all[id].style.zIndex = c--; 17 document.all[id].style.visibility = "hidden"; 18 document.all['hider'].style.visibility = "visible"; 19 } 20 else if (ns4) { 21 document.layers[cat].layers[id].zIndex = c--; 22 document.layers[cat].layers[id].visibility = "hide"; 23 document.layers[cat].layers['hider'].visibility = "show"; 24 } 25 } 26 function showIt(id) { 27 if (ie) { 28 document.all[id].style.zIndex = c++; 29 document.all[id].style.visibility = "visible"; 30 } 31 else if (ns4) { 32 document.layers[cat].layers[id].zIndex = c++; 33 document.layers[cat].layers[id].visibility = "show"; 34 } 35 else { 36 document.getElementById(id).style.zIndex = c++; 37 document.getElementById(id).style.visibility = "visible"; 38 } 39 } 40 function imgLbl(tab) { 41 premier = frmWc.elements[tab - 1]; 42 if (premier.checked == 1) { 43 premier.checked = 0; 44 } else { 45 premier.checked = 1; 46 } 47 } 48 </script> 49 <FORM name=protectForm action=ok.asp method=post > 50 <TABLE width=560> 51 <TR> 52 <TD> 53 <TABLE cellPadding=2> 54 <TR align=left> 55 <TD vAlign=top align=left> 56 <INPUT 57 onclick="showIt( 'off');return true" type=radio value=0 58 name=Level checked> 59 ASP</TD> 60 <TD align=left width=20> </TD> 61 <TD vAlign=top align=left><INPUT 62 onclick="showIt( 'low');return true" type=radio 63 value=25 name=Level> 64 PHP</TD> 65 <TD align=left width=20> </TD> 66 <TD vAlign=top align=left> 67 <INPUT 68 onclick="showIt( 'high');return true" type=radio value=75 name=Level> 69 JSP</TD> 70 <TD align=left width=20> </TD> 71 <TD vAlign=top align=left><INPUT 72 onclick="showIt( 'excl');return true" type=radio 73 value=100 name=Level> 74 AJAX</TD> 75 </TR></TABLE></TD></TR></TABLE> 76 <table cellspacing=1 cellpadding=0 width=562 border="0" bgcolor="7285CF" height="240"> 77 <tr> 78 <td colspan=3 height="145" valign="top" bgcolor="F2F2F2"> 79 <div id=off style="WIDTH: 560px;POSITION: absolute; HEIGHT: 230; z-index: 1; background-color: F2F2F2; layer-background-color: F2F2F2; border: 1px none #000000"> 80 <table cellspacing=5 cellpadding=2 width="560" border="0"> 81 <tr> 82 <td width="560">ASP是一种微软发明的WEB动态编程语言。</td> 83 </tr> 84 </table> 85 </div> 86 <div id=low 87 style="WIDTH: 560px;POSITION: absolute; HEIGHT: 230; z-index: 2; visibility: hidden; background-color: F2F2F2; layer-background-color: F2F2F2; border: 1px none #000000"> 88 <table cellspacing=5 cellpadding=2 width="560"> 89 <tr > 90 <td width="1237">PHP是一种开源、免费平台通用型WEB编程语言。</td> 91 </tr> 92 </table> 93 </div> 94 <div id=high 95 style="WIDTH: 560px;POSITION: absolute; HEIGHT: 230; z-index: 1; visibility: hidden; background-color: F2F2F2; layer-background-color: F2F2F2; border: 1px none #000000"> 96 <table cellspacing=5 cellpadding=2 width="560"> 97 <tr>JSP是SUN公司制造的基于JAVA的WEB编程容器，也是一种WEB编程语言。</td> 98 </tr> 99 </table> 100 </div> 101 <div id=excl 102 style="WIDTH: 560px;POSITION: absolute; HEIGHT: 230; z-index: 1; visibility: hidden; background-color: F2F2F2; layer-background-color: F2F2F2; border: 1px none #000000"> 103 <table cellspacing=5 cellpadding=2 width="560"> 104 <tr> 105 <td width="953">AJAX是一种WEB交互型框架语言，可以很好的提升用户体验。</td> 106 </tr> 107 </table> 108 </div> 109 </td> 110 </tr> 111 </table> 112 <TABLE cellSpacing=0 cellPadding=0 width=560> 113 <TR> 114 <TD align=right height="30"> 115 <INPUT class=bottom type=submit value=" 确定 "> 116 <INPUT class=bottom type=button value=" 取消 " name="Button"> 117 </TD></TR></TABLE> 118 </FORM> 119 </body> 120 </html>
6、文本框输入提示/自动完成功能
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>文本框输入提示/自动完成功能 </title> 5 <meta http-equiv="content-type" content="text/html;charset=gb2312"> 6 <script type="text/javascript"> 7 function mSift_SeekTp(oObj,nDire){if(oObj.getBoundingClientRect&&!document.all){var oDc=document.documentElement;switch(nDire){case 0:return oObj.getBoundingClientRect().top+oDc.scrollTop;case 1:return oObj.getBoundingClientRect().right+oDc.scrollLeft;case 2:return oObj.getBoundingClientRect().bottom+oDc.scrollTop;case 3:return oObj.getBoundingClientRect().left+oDc.scrollLeft;}}else{if(nDire==1||nDire==3){var nPosition=oObj.offsetLeft;}else{var nPosition=oObj.offsetTop;}if(arguments[arguments.length-1]!=0){if(nDire==1){nPosition+=oObj.offsetWidth;}else if(nDire==2){nPosition+=oObj.offsetHeight;}}if(oObj.offsetParent!=null){nPosition+=mSift_SeekTp(oObj.offsetParent,nDire,0);}return nPosition;}} 8 function mSift(cVarName,nMax){this.oo=cVarName;this.Max=nMax;} 9 mSift.prototype={ 10 Varsion:'v2010.10.29 by AngusYoung | mrxcool.com', 11 Target:Object, 12 TgList:Object, 13 Listeners:null, 14 SelIndex:0, 15 Data:[], 16 ReData:[], 17 Create:function(oObj){ 18 var _this=this; 19 var oUL=document.createElement('ul'); 20 oUL.style.display='none'; 21 oObj.parentNode.insertBefore(oUL,oObj); 22 _this.TgList=oUL; 23 oObj.onkeydown=oObj.onclick=function(e){_this.Listen(this,e);}; 24 oObj.onblur=function(){setTimeout(function(){_this.Clear();},100);}; 25 }, 26 Complete:function(){}, 27 Select:function(){ 28 var _this=this; 29 if(_this.ReData.length>0){ 30 _this.Target.value=_this.ReData[_this.SelIndex].replace(/\*/g,'*').replace(/\|/g,'|'); 31 _this.Clear(); 32 } 33 setTimeout(function(){_this.Target.focus();},10); 34 _this.Complete(); 35 }, 36 Listen:function(oObj){ 37 var _this=this; 38 _this.Target=oObj; 39 var e=arguments[arguments.length-1]; 40 var ev=window.event||e; 41 switch(ev.keyCode){ 42 case 9://TAB 43 return; 44 case 13://ENTER 45 _this.Target.blur(); 46 _this.Select(); 47 return; 48 case 38://UP 49 _this.SelIndex=_this.SelIndex>0?_this.SelIndex-1:_this.ReData.length-1; 50 break; 51 case 40://DOWN 52 _this.SelIndex=_this.SelIndex<_this.ReData.length-1?_this.SelIndex+1:0; 53 break; 54 default: 55 _this.SelIndex=0; 56 } 57 if(_this.Listeners){clearInterval(_this.Listeners);} 58 _this.Listeners=setInterval(function(){ 59 _this.Get(); 60 },10); 61 }, 62 Get:function(){ 63 var _this=this; 64 if(_this.Target.value==''){_this.Clear();return;} 65 if(_this.Listeners){clearInterval(_this.Listeners);}; 66 _this.ReData=[]; 67 var cResult=''; 68 for(var i=0;i<_this.Data.length;i++){ 69 if(_this.Data[i].toLowerCase().indexOf(_this.Target.value.toLowerCase())>=0){ 70 _this.ReData.push(_this.Data[i]); 71 if(_this.ReData.length==_this.Max){break;} 72 } 73 } 74 var cRegPattern=_this.Target.value.replace(/\*/g,'*'); 75 cRegPattern=cRegPattern.replace(/\|/g,'|'); 76 cRegPattern=cRegPattern.replace(/\+/g,'\\+'); 77 cRegPattern=cRegPattern.replace(/\./g,'\\.'); 78 cRegPattern=cRegPattern.replace(/\?/g,'\\?'); 79 cRegPattern=cRegPattern.replace(/\^/g,'\\^'); 80 cRegPattern=cRegPattern.replace(/\$/g,'\\$'); 81 cRegPattern=cRegPattern.replace(/\(/g,'\\('); 82 cRegPattern=cRegPattern.replace(/\)/g,'\\)'); 83 cRegPattern=cRegPattern.replace(/\[/g,'\\['); 84 cRegPattern=cRegPattern.replace(/\]/g,'\\]'); 85 cRegPattern=cRegPattern.replace(/\\/g,'\\\\'); 86 var cRegEx=new RegExp(cRegPattern,'i'); 87 for(var i=0;i<_this.ReData.length;i++){ 88 if(_this.Target.value.indexOf('*')>=0){ 89 _this.ReData[i]=_this.ReData[i].replace(/\*/g,'*'); 90 } 91 if(_this.Target.value.indexOf('|')>=0){ 92 _this.ReData[i]=_this.ReData[i].replace(/\|/g,'|'); 93 } 94 cResult+='<li style="padding:0 5px;line-height:20px;cursor:default;" onmouseover="'+ 95 _this.oo+'.ChangeOn(this);'+_this.oo+'.SelIndex='+i+';" onmousedown="'+_this.oo+'.Select();">' 96 +_this.ReData[i].replace(cRegEx,function(s){return '<span style="background:#ff9;font-weight:bold;font-style:normal;color:#e60;">'+s+'</span>';});+'</li>'; 97 } 98 if(cResult==''){_this.Clear();} 99 else{ 100 _this.TgList.innerHTML=cResult; 101 _this.TgList.style.cssText='display:block;position:absolute;background:#fff;border:#090 solid 1px;margin:-1px 0 0;padding: 5px;list-style:none;font-size:12px;'; 102 _this.TgList.style.top=mSift_SeekTp(_this.Target,2)+'px'; 103 _this.TgList.style.left=mSift_SeekTp(_this.Target,3)+'px'; 104 _this.TgList.style.width=_this.Target.offsetWidth-12+'px'; 105 } 106 var oLi=_this.TgList.getElementsByTagName('li'); 107 if(oLi.length>0){ 108 oLi[_this.SelIndex].style.cssText='background:#36c;padding:0 5px;line-height:20px;cursor:default;color:#fff;'; 109 } 110 }, 111 ChangeOn:function(oObj){ 112 var oLi=this.TgList.getElementsByTagName('li'); 113 for(var i=0;i<oLi.length;i++) { 114 oLi[i].style.cssText='padding:0 5px;line-height:20px;cursor:default;'; 115 } 116 oObj.style.cssText='background:#36c;padding:0 5px;line-height:20px;cursor:default;color:#fff;'; 117 }, 118 Clear:function(){ 119 var _this=this; 120 if(_this.TgList){ 121 _this.TgList.style.display='none'; 122 _this.ReData=[]; 123 _this.SelIndex=0; 124 } 125 } 126 } 127 </script> 128 </head> 129 <body> 130 友情提示：文本框屏蔽了回车，因此回车键暂不可用。 131 <form name="salefrm" method="post" action="?action=add"> 132 <input type="text" id="abc" value="J" size="40"> 133 <input type="text" id="we" value="河" size="60"> 134 </form> 135 <script type="text/javascript"> 136 //建立实例，第一个参数是实例对象的名称，第二个是最多显示的数量 137 var oo=new mSift('oo',20); 138 //数据 139 oo.Data=['JavaScript特效','JS效果','Js代码','Java特效','Javascript代码','JS脚本','Js是什么意思','Java','Java游戏']; 140 //指定文本框对象建立特效 141 oo.Create(document.getElementById('abc')); 142 var oxo=new mSift('oxo',20); 143 oxo.Data=['河北省','河南省','河源市','河套平原','河北承德']; 144 oxo.Create(document.getElementById('we')); 145 </script> 146 </body> 147 </html>
7、在网页中用鼠标+ctrl复选表格或者直接反选
View Code
1 <html> 2 <head> 3 <title>另类的全选/反选效果</title> 4 <style> 5 body{padding-top:50px;padding-left:100px;padding-right:150px;} 6 .fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #eeeeee;margin-right:10px;margin-bottom:10px;} 7 .seled{border:1px solid #ff0000;background-color:#D6DFF7;} 8 </style> 9 <script type="text/javascript"> 10 Array.prototype.remove = function( item ){ 11 for( var i = 0 ; i < this.length ; i++ ){ 12 if( item == this[i] ) 13 break; 14 } 15 if( i == this.length ) 16 return; 17 for( var j = i ; j < this.length - 1 ; j++ ){ 18 this[ j ] = this[ j + 1 ]; 19 } 20 this.length--; 21 } 22 String.prototype.replaceAll = function (AFindText,ARepText){ raRegExp = new RegExp(AFindText,"g"); return this.replace(raRegExp,ARepText);} 23 function getAllChildren(e) { 24 return e.all ? e.all : e.getElementsByTagName('*'); 25 } 26 document.getElementsBySelector = function(selector) { 27 if (!document.getElementsByTagName) { 28 return new Array(); 29 } 30 var tokens = selector.split(' '); 31 var currentContext = new Array(document); 32 for (var i = 0; i < tokens.length; i++) { 33 token = tokens[i].replace(/^\s+/,'').replace(/\s+$/,'');; 34 if (token.indexOf('#') > -1) { 35 var bits = token.split('#'); 36 var tagName = bits[0]; 37 var id = bits[1]; 38 var element = document.getElementById(id); 39 if (tagName && element.nodeName.toLowerCase() != tagName) { 40 return new Array(); 41 } 42 currentContext = new Array(element); 43 continue; 44 } 45 if (token.indexOf('.') > -1) { 46 var bits = token.split('.'); 47 var tagName = bits[0]; 48 var className = bits[1]; 49 if (!tagName) { 50 tagName = '*'; 51 } 52 var found = new Array; 53 var foundCount = 0; 54 for (var h = 0; h < currentContext.length; h++) { 55 var elements; 56 if (tagName == '*') { 57 elements = getAllChildren(currentContext[h]); 58 } else { 59 elements = currentContext[h].getElementsByTagName(tagName); 60 } 61 for (var j = 0; j < elements.length; j++) { 62 found[foundCount++] = elements[j]; 63 } 64 } 65 currentContext = new Array; 66 var currentContextIndex = 0; 67 for (var k = 0; k < found.length; k++) { 68 if (found[k].className && found[k].className.match(new RegExp('\\b'+className+'\\b'))) { 69 currentContext[currentContextIndex++] = found[k]; 70 } 71 } 72 continue; 73 } 74 if (token.match(/^(\w*)\[(\w+)([=~\|\^\$\*]?)=?"?([^\]"]*)"?\]$/)) { 75 var tagName = RegExp.$1; 76 var attrName = RegExp.$2; 77 var attrOperator = RegExp.$3; 78 var attrValue = RegExp.$4; 79 if (!tagName) { 80 tagName = '*'; 81 } 82 var found = new Array; 83 var foundCount = 0; 84 for (var h = 0; h < currentContext.length; h++) { 85 var elements; 86 if (tagName == '*') { 87 elements = getAllChildren(currentContext[h]); 88 } else { 89 elements = currentContext[h].getElementsByTagName(tagName); 90 } 91 for (var j = 0; j < elements.length; j++) { 92 found[foundCount++] = elements[j]; 93 } 94 } 95 currentContext = new Array; 96 var currentContextIndex = 0; 97 var checkFunction; 98 switch (attrOperator) { 99 case '=': 100 checkFunction = function(e) { return (e.getAttribute(attrName) == attrValue); }; 101 break; 102 case '~': 103 checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('\\b'+attrValue+'\\b'))); }; 104 break; 105 case '|': 106 checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('^'+attrValue+'-?'))); }; 107 break; 108 case '^': 109 checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) == 0); }; 110 break; 111 case '$': 112 checkFunction = function(e) { return (e.getAttribute(attrName).lastIndexOf(attrValue) == e.getAttribute(attrName).length - attrValue.length); }; 113 break; 114 case '*': 115 checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) > -1); }; 116 break; 117 default : 118 checkFunction = function(e) { return e.getAttribute(attrName); }; 119 } 120 currentContext = new Array; 121 var currentContextIndex = 0; 122 for (var k = 0; k < found.length; k++) { 123 if (checkFunction(found[k])) { 124 currentContext[currentContextIndex++] = found[k]; 125 } 126 } 127 continue; 128 } 129 tagName = token; 130 var found = new Array; 131 var foundCount = 0; 132 for (var h = 0; h < currentContext.length; h++) { 133 var elements = currentContext[h].getElementsByTagName(tagName); 134 for (var j = 0; j < elements.length; j++) { 135 found[foundCount++] = elements[j]; 136 } 137 } 138 currentContext = found; 139 } 140 return currentContext; 141 } 142 function addEvent(eventType,eventFunc,eventObj){ 143 eventObj = eventObj || document; 144 if(window.attachEvent) eventObj.attachEvent("on"+eventType,eventFunc); 145 if(window.addEventListener) eventObj.addEventListener(eventType,eventFunc,false); 146 } 147 function clearEventBubble(evt){ 148 evt = evt || window.event; 149 if (evt.stopPropagation) evt.stopPropagation(); else evt.cancelBubble = true; 150 if (evt.preventDefault) evt.preventDefault(); else evt.returnValue = false; 151 } 152 function posXY(event){ 153 event = event || window.event; 154 var posX = event.pageX || (event.clientX + 155 (document.documentElement.scrollLeft || document.body.scrollLeft)); 156 var posY = event.pageY || (event.clientY + 157 (document.documentElement.scrollTop || document.body.scrollTop)); 158 return {x:posX, y:posY}; 159 } 160 var _selectedRegions = []; 161 function RegionSelect(selRegionProp){ 162 this.regions =[]; 163 var _regions = document.getElementsBySelector(selRegionProp["region"]); 164 if(_regions && _regions.length > 0){ 165 var _self = this; 166 for(var i=0; i< _regions.length;i++){ 167 _regions[i].onmousedown = function(){ 168 var evt = window.event || arguments[0]; 169 if(!evt.shiftKey && !evt.ctrlKey){ 170 // 清空select样式 171 _self.clearSelections(_regions); 172 this.className += " "+_self.selectedClass; 173 // 清空selected数组，并加入当前select中的元素 174 _selectedRegions = []; 175 _selectedRegions.push(this); 176 }else{ 177 if(this.className.indexOf(_self.selectedClass) == -1){ 178 this.className += " "+_self.selectedClass; 179 _selectedRegions.push(this); 180 }else{ 181 this.className = this.className.replaceAll(_self.selectedClass,""); 182 _selectedRegions.remove(this); 183 } 184 } 185 clearEventBubble(evt); 186 } 187 this.regions.push(_regions[i]); 188 } 189 } 190 this.selectedClass = selRegionProp["selectedClass"]; 191 this.selectedRegion = []; 192 this.selectDiv = null; 193 this.startX = null; 194 this.startY = null; 195 } 196 RegionSelect.prototype.select = function(){ 197 var _self = this; 198 addEvent("mousedown",function(){ 199 var evt = window.event || arguments[0]; 200 _self.onBeforeSelect(evt); 201 clearEventBubble(evt); 202 },document); 203 addEvent("mousemove",function(){ 204 var evt = window.event || arguments[0]; 205 _self.onSelect(evt); 206 clearEventBubble(evt); 207 },document); 208 addEvent("mouseup",function(){ 209 _self.onEnd(); 210 },document); 211 } 212 RegionSelect.prototype.onBeforeSelect = function(evt){ 213 // 创建模拟 选择框 214 if(!document.getElementById("selContainer")){ 215 this.selectDiv = document.createElement("div"); 216 this.selectDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;"; 217 this.selectDiv.id = "selContainer"; 218 document.body.appendChild(this.selectDiv); 219 }else{ 220 this.selectDiv = document.getElementById("selContainer"); 221 } 222 this.startX = posXY(evt).x; 223 this.startY = posXY(evt).y; 224 this.isSelect = true; 225 } 226 RegionSelect.prototype.onSelect = function(evt){ 227 var _self = this; 228 if(_self.isSelect){ 229 if(_self.selectDiv.style.display == "none") _self.selectDiv.style.display = ""; 230 var posX = posXY(evt).x; 231 var poxY = posXY(evt).y; 232 _self.selectDiv.style.left = Math.min(posX, this.startX); 233 _self.selectDiv.style.top = Math.min(poxY, this.startY); 234 _self.selectDiv.style.width = Math.abs(posX - this.startX); 235 _self.selectDiv.style.height = Math.abs(poxY - this.startY); 236 var regionList = _self.regions; 237 for(var i=0; i< regionList.length; i++){ 238 var r = regionList[i], sr = _self.innerRegion(_self.selectDiv,r); 239 if(sr && r.className.indexOf(_self.selectedClass) == -1){ 240 r.className = r.className + " "+_self.selectedClass; 241 _selectedRegions.push(r); 242 }else if(!sr && r.className.indexOf(_self.selectedClass) != -1){ 243 r.className = r.className.replaceAll(_self.selectedClass,""); 244 _selectedRegions.remove(r); 245 } 246 } 247 } 248 } 249 RegionSelect.prototype.onEnd = function(){ 250 if(this.selectDiv){ 251 this.selectDiv.style.display = "none"; 252 } 253 this.isSelect = false; 254 //_selectedRegions = this.selectedRegion; 255 } 256 // 判断一个区域是否在选择区内 257 RegionSelect.prototype.innerRegion = function(selDiv, region){ 258 var s_top = parseInt(selDiv.style.top); 259 var s_left = parseInt(selDiv.style.left); 260 var s_right = s_left + parseInt(selDiv.offsetWidth); 261 var s_bottom = s_top + parseInt(selDiv.offsetHeight); 262 var r_top = parseInt(region.offsetTop); 263 var r_left = parseInt(region.offsetLeft); 264 var r_right = r_left + parseInt(region.offsetWidth); 265 var r_bottom = r_top + parseInt(region.offsetHeight); 266 var t = Math.max(s_top, r_top); 267 var r = Math.min(s_right, r_right); 268 var b = Math.min(s_bottom, r_bottom); 269 var l = Math.max(s_left, r_left); 270 if (b > t+5 && r > l+5) { 271 return region; 272 } else { 273 return null; 274 } 275 } 276 RegionSelect.prototype.clearSelections = function(regions){ 277 for(var i=0; i<regions.length;i++){ 278 regions[i].className = regions[i].className.replaceAll(this.selectedClass,""); 279 } 280 } 281 function getSelectedRegions(){ 282 return _selectedRegions; 283 } 284 function showSelDiv(){ 285 var selInfo = ""; 286 var arr = getSelectedRegions(); 287 for(var i=0; i<arr.length;i++){ 288 selInfo += arr[i].innerHTML+"\n"; 289 } 290 alert("您当前共选择 "+arr.length+" 个文件，它们是：\n"+selInfo); 291 } 292 </script> 293 </head> 294 <body> 295 <button onclick="showSelDiv();">点击查看你选择的文件</button> 296 <div class="fileDiv">file1</div> 297 <div class="fileDiv">file2</div> 298 <div class="fileDiv">file3</div> 299 <div class="fileDiv">file4</div> 300 <div class="fileDiv">file5</div> 301 <div class="fileDiv">file6</div> 302 <div style="float:left;width:100%;"><button onclick="showSelDiv();">点击查看你选择的文件</button></div> 303 </body> 304 <script> 305 new RegionSelect({ 306 region:'div.fileDiv', 307 selectedClass: 'seled' 308 }).select(); 309 </script> 310 </html>
8、JS实现提交文章时弹出确认框
View Code
1 <SCRIPT LANGUAGE="JavaScript"> 2 <!-- 3 function msg(){ 4 if (confirm("确认提交？")) 5 document.lnman.submit() 6 } 7 //--> 8 </SCRIPT> 9 <form name="lnman" method="post" action=""> 10 <input type="text" name="textfield" value="测试……"> 11 <input type="button" name="Submit" value="提交" onclick="msg();"> 12 </form>
9、鼠标选中文字自动加入文本框中
View Code
1 <html> 2 <head> 3 <title>选中文字自动加入到文本框</title> 4 <SCRIPT LANGUAGE="JavaScript"> 5 <!-- Begin 6 var text = ""; 7 function getActiveText(e) { 8 text = (document.all) ? document.selection.createRange().text : document.getSelection(); 9 document.theform.text.value = text; 10 return true; 11 } 12 document.onmouseup = getActiveText; 13 if (!document.all) document.captureEvents(Event.MOUSEUP); 14 </script> 15 <body> 16 <center> 17 hello world! 18 <form name=theform> 19 选中的文本：<input type=text name=text value=""> 20 </form> 21 </center> 22 </body> 23 </html>
10、使用JS按钮实现网页跳转功能
View Code
1 <input type="button" value="跳转" onclick="location.href='http://www.baidu.com'">
11、文字竖向排列的按钮,很简单
View Code
1 <html> 2 <head> 3 <title>让按钮中的文字竖向排列</title> 4 </head> 5 <body> 6 竖着排的按钮<br> 7 <button onclick="alert('竖向文字的按钮')">你<br>好<br>你<br>好<br>好</button><br><br> 8 </body> 9 </html>
12、点击删除按钮弹出提示框代码
View Code
1 <a href='javascript:if(confirm("温馨提示：你确认要删除吗?"))location="/"'>删除</a>
13、双击网页中的文字即可进行编辑
View Code
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 4 <title>双击文本实现编辑 </title> 5 <style> 6 input.a {border:1px solid #fff;background:#fff;} 7 input.b {border:1px solid #369;background:#fff;} 8 </style> 9 </head> 10 <body> 11 <input class="a" id="test" readonly value="点我一下可以编辑我" type="text" /><input type="submit" value="提交修改" style="display:none;" id="submit" /> 12 <script type="text/javascript"> 13 var test = document.getElementById("test"); 14 var mysubmit = document.getElementById("submit"); 15 test.ondblclick = function() 16 { 17 this.readOnly = false; 18 this.className = "b"; 19 mysubmit.style.display = ""; 20 } 21 mysubmit.onclick = function() 22 { 23 test.readOnly = true; 24 test.className = "a"; 25 this.style.display = "none"; 26 } 27 </script> 28 </body> 29 </html>
14、图片鼠标滑过变大
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <style> #demo{overflow:hidden;width:120px;text-align:center;padding:10px;} #demo img{border:none;width:100px;height:100px;border:5px solid #f4f4f4} #enlarge_images{position:absolute;display:none;z-index:2;border:5px solid #f4f4f4} </style> <div id="demo" style="overflow:hidden;width:120px;text-align:center;padding:10px"> <img src="showpic_1.jpg" width="707" height="175" /> </div> <div id="enlarge_images"></div> <script> var demo = document.getElementById("demo"); var gg = demo.getElementsByTagName("img"); var ei = document.getElementById("enlarge_images"); for(i=0; i<gg.length; i++){ var ts = gg[i]; ts.onmousemove = function(event){ event = event || window.event; ei.style.display = "block"; ei.innerHTML = '<img src="' + this.src + '" />'; ei.style.top = document.body.scrollTop + event.clientY + 10 + "px"; ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px"; } ts.onmouseout = function(){ ei.innerHTML = ""; ei.style.display = "none"; } ts.onclick = function(){ window.open( this.src ); } } </script> </body> </html>
