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>仿苹果电脑任务栏菜单</title>
  6. <style type="text/css">
  7. body{margin:0;padding:0}
  8. #menu{position:absolute;width:100%;bottom:0;text-align:center;}
  9. </style>
  10. <script type="text/javascript">
  11. window.onload = function ()
  12. {
  13.     var oMenu = document.getElementById("menu");
  14.     var aImg = oMenu.getElementsByTagName("img");
  15.     var aWidth = [];
  16.     var i = 0;
  17.     //保存原宽度, 并设置当前宽度
  18.     for (i = 0; i < aImg.length; i++)
  19.     {
  20.         aWidth.push(aImg[i].offsetWidth);
  21.         aImg[i].width = parseInt(aImg[i].offsetWidth / 2);
  22.     }
  23.     //鼠标移动事件
  24.     document.onmousemove = function (event)
  25.     {
  26.         var event = event || window.event;
  27.         for (i = 0; i < aImg.length; i++)
  28.         {
  29.             var a = event.clientX - aImg[i].offsetLeft - aImg[i].offsetWidth / 2;
  30.             var b = event.clientY - aImg[i].offsetTop - oMenu.offsetTop - aImg[i].offsetHeight / 2;
  31.             var iScale = 1 - Math.sqrt(a * a + b * b) / 300;
  32.             if (iScale < 0.5) iScale = 0.5;
  33.             aImg[i].width = aWidth[i] * iScale
  34.         }
  35.     };
  36. };
  37. </script>
  38. </head>
  39. <body>
  40. <div id="menu">
  41.     <img src="img/1.png" />
  42.     <img src="img/2.png" />
  43.     <img src="img/3.png" />
  44.     <img src="img/4.png" />
  45.     <img src="img/5.png" />
  46.     <img src="img/6.png" />
  47.     <img src="img/7.png" />
  48.     <img src="img/8.png" />
  49. </div>
  50. </body>
  51. </html>
  1. 拼图小游戏
  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>拼图小游戏</title>
  6. <style type="text/css">
  7. body,ul,li{margin:0;padding:0;}
  8. body{font:30px/1.5 Tahoma;background:url(img/bg.png);}
  9. #box{position:relative;width:410px;height:570px;margin:10px auto;}
  10. #box li{float:left;width:82px;height:190px;overflow:hidden;}
  11. #box li img{width:82px;height:190px;}
  12. #box li.hig{width:78px;height:186px;overflow:hidden;border:2px dashed yellow;}
  13. #box li.hig img{width:78px;height:186px;opacity:0.5;filter:alpah(opacity=50);}
  14. #mask{position:absolute;top:0;left:0;width:410px;height:570px;background:red;opacity:0;filter:alpha(opacity=0);}
  15. input{cursor:pointer;}
  16. #photo{text-align:center;margin:10px 0;}
  17. #photo img{width:100px;height:100px;border-radius:5px;margin:0 5px;opacity:0.5;filter:alpha(opacity=50);cursor:pointer;}
  18. #photo img.hover{opacity:1;filter:alpha(opacity=100);}
  19. #photo img.selected{border:2px solid yellow;width:96px;height:96px;opacity:1;filter:alpha(opacity=100);}
  20. </style>
  21. <script type="text/javascript">
  22. var zIndex = 1;
  23. window.onload = function ()
  24. {
  25.     var oPhoto = document.getElementById("photo");
  26.     var aThumb = oPhoto.getElementsByTagName("img");
  27.     var oBox = document.getElementById("box");
  28.     var aLi = oBox.getElementsByTagName("li");
  29.     var oInput = document.getElementsByTagName("input")[0];
  30.     var i = 0;
  31.     var imgPath = 0;
  32.     var oDateStart = null;
  33.     var aPos = [];
  34.     var aData = [];
  35.     for (i = 0; i < 15; i++)aData.push(i+1);
  36.  
  37.     //缩略图
  38.     for (i = 0; i < aThumb.length; i++)
  39.     {
  40.         aThumb[i].index = i;
  41.         aThumb[i].onmouseover = function ()
  42.         {
  43.             this.className += " hover"
  44.         };
  45.         aThumb[i].onmouseout = function ()
  46.         {
  47.             this.className = this.className.replace(/\shover/, "")
  48.         };
  49.         aThumb[i].onclick = function ()
  50.         {
  51.             for (i = 0; i < aThumb.length; i++)aThumb[i].className = "";
  52.             this.className = "selected";
  53.             imgPath = this.index;
  54.             oBox.innerHTML = "";
  55.             oInput.value = "开始游戏";
  56.             createMask();
  57.             aData.sort(function (a, b) {return a - b});
  58.             GAME(false)
  59.         }
  60.     }
  61.  
  62.     //创建遮罩层
  63.     function createMask()
  64.     {
  65.         var oMask = document.createElement("div");
  66.         oMask.id = "mask";
  67.         oMask.style.zIndex = zIndex;
  68.         oBox.appendChild(oMask)
  69.     }
  70.     createMask();
  71.  
  72.     //游戏处理函数
  73.     function GAME(ran)
  74.     {
  75.         //随机排列数组
  76.         ran && aData.sort(function (a, b) {return Math.random() > 0.5 ? -1 : 1});
  77.  
  78.         //插入结构
  79.         var oFragment = document.createDocumentFragment();
  80.         for (i = 0; i < aData.length; i++)
  81.         {
  82.             var oLi = document.createElement("li");
  83.             var oImg = document.createElement("img");
  84.             oImg.src = "img/girl" + imgPath + "/" + aData[i] + ".png";
  85.             oLi.appendChild(oImg);
  86.             oFragment.appendChild(oLi)
  87.         }
  88.         oBox.appendChild(oFragment);
  89.         oBox.style.background = "url(img/girl"+imgPath+"/bg.png)  no-repeat";
  90.  
  91.         //布局转换
  92.         for (i = 0; i < aLi.length; i++)
  93.         {
  94.             aLi[i].index = i;
  95.             aLi[i].style.top = aLi[i].offsetTop + "px";
  96.             aLi[i].style.left = aLi[i].offsetLeft + "px";
  97.             aPos.push({"left":aLi[i].offsetLeft, "top":aLi[i].offsetTop})
  98.         }
  99.         for (i = 0; i < aLi.length; i++)
  100.         {
  101.             aLi[i].style.position = "absolute";
  102.             aLi[i].style.margin = "0";
  103.             drag(aLi[i])
  104.         }
  105.  
  106.         //拖拽函数
  107.         function drag(obj, handle)
  108.         {
  109.             var handle = handle || obj;
  110.             handle.style.cursor = "move";
  111.             handle.onmousedown = function (event)
  112.             {
  113.                 var event = event || window.event;
  114.                 var disX = event.clientX - this.offsetLeft;
  115.                 var disY = event.clientY - this.offsetTop;
  116.                 var oNear = null;
  117.                 obj.style.zIndex = zIndex++;
  118.                 document.onmousemove = function (event)
  119.                 {
  120.                     var event = event || window.event;
  121.                     var iL = event.clientX - disX;
  122.                     var iT = event.clientY - disY;
  123.                     var maxL = obj.parentNode.clientWidth - obj.offsetWidth;
  124.                     var maxT = obj.parentNode.clientHeight - obj.offsetHeight;            
  125.  
  126.                     iL < 0 && (iL = 0);
  127.                     iT < 0 && (iT = 0);
  128.                     iL > maxL && (iL = maxL);
  129.                     iT > maxT && (iT = maxT);
  130.                     obj.style.left = iL + "px";
  131.                     obj.style.top = iT + "px";                
  132.  
  133.                     for (i = 0; i < aLi.length; i++) aLi[i].className = "";
  134.  
  135.                     oNear = findNearest(obj);
  136.  
  137.                     oNear && (oNear.className = "hig");
  138.  
  139.                     return false
  140.                 };
  141.                 document.onmouseup = function ()
  142.                 {
  143.                     document.onmousemove = null;
  144.                     document.onmouseup = null;
  145.                     if (oNear)
  146.                     {
  147.                         var tIndex = obj.index;
  148.                         obj.index = oNear.index;
  149.                         oNear.index = tIndex;
  150.                         startMove(obj, aPos[obj.index]);
  151.                         startMove(oNear, aPos[oNear.index],function ()
  152.                         {
  153.                             if (finish())
  154.                             {
  155.                                 var iHour = iMin = iSec = 0;
  156.                                 var oDateNow = new Date();
  157.                                 var iRemain = parseInt((oDateNow.getTime() - oDateStart.getTime()) / 1000);
  158.  
  159.                                 iHour = parseInt(iRemain / 3600);
  160.                                 iRemain %= 3600;
  161.                                 iMin = parseInt(iRemain / 60);
  162.                                 iRemain %= 60;
  163.                                 iSec = iRemain;
  164.  
  165.                                 alert("\u606d\u559c\u60a8\uff0c\u62fc\u56fe\u5b8c\u6210\uff01\n\n\u7528\u65f6\uff1a" + iHour  + "\u5c0f\u65f6" + iMin + "\u5206" + iSec + "\u79d2");
  166.                                 createMask();
  167.                             }
  168.                         });
  169.                         oNear.className = "";
  170.                     }
  171.                     else
  172.                     {
  173.                         startMove(obj, aPos[obj.index])
  174.                     }
  175.                     handle.releaseCapture && handle.releaseCapture()
  176.                 };
  177.                 this.setCapture && this.setCapture();
  178.                 return false
  179.             }
  180.         }
  181.  
  182.         //找出相遇点中最近的元素
  183.         function findNearest(obj)
  184.         {
  185.             var filterLi = [];
  186.             var aDistance = [];
  187.  
  188.             for (i = 0; i < aLi.length; i++) aLi[i] != obj && (isButt(obj, aLi[i]) && (aDistance.push(getDistance(obj, aLi[i])), filterLi.push(aLi[i])));    
  189.  
  190.             var minNum = Number.MAX_VALUE;
  191.             var minLi = null;
  192.  
  193.             for (i = 0; i < aDistance.length; i++) aDistance[i] < minNum && (minNum = aDistance[i], minLi = filterLi[i]);    
  194.  
  195.             return minLi
  196.         }
  197.     }
  198.     GAME();
  199.  
  200.     //开始游戏
  201.     oInput.onclick = function ()
  202.     {
  203.         oDateStart = new Date();
  204.         oBox.innerHTML = "";
  205.         this.value = "\u91cd\u65b0\u5f00\u59cb";
  206.         GAME(true)
  207.     };
  208.  
  209.     //判断是否完成
  210.     function finish()
  211.     {
  212.         var aTemp = [];
  213.         var success = true;
  214.         aTemp.length = 0;
  215.         for (i = 0; i < aLi.length; i++)
  216.         {
  217.             for (var j = 0; j < aLi.length; j++)
  218.             i == aLi[j]["index"] && aTemp.push(aLi[j].getElementsByTagName("img")[0].src.match(/(\d+)\./)[1])
  219.         }
  220.         for (i = 1; i <= aTemp.length; i++)
  221.         {
  222.             if(i != aTemp[i-1])
  223.             {
  224.                 success = false;
  225.                 break
  226.             }
  227.         }
  228.         return success
  229.     }
  230. };
  231. //求两点之间的距离
  232. function getDistance(obj1, obj2)
  233. {
  234.     var a = (obj1.offsetLeft + obj1.offsetWidth / 2) - (obj2.offsetLeft + obj2.offsetWidth / 2);
  235.     var b = (obj1.offsetTop + obj1.offsetHeight / 2) - (obj2.offsetTop + obj2.offsetHeight / 2);
  236.     return Math.sqrt(a * a + b * b)
  237. }
  238.  
  239. //碰撞检测
  240. function isButt(obj1, obj2)
  241. {
  242.     var l1 = obj1.offsetLeft;
  243.     var t1 = obj1.offsetTop;
  244.     var r1 = obj1.offsetLeft + obj1.offsetWidth;
  245.     var b1 = obj1.offsetTop + obj1.offsetHeight;
  246.  
  247.     var l2 = obj2.offsetLeft;
  248.     var t2 = obj2.offsetTop;
  249.     var r2 = obj2.offsetLeft + obj2.offsetWidth;
  250.     var b2 = obj2.offsetTop + obj2.offsetHeight;
  251.  
  252.     return !(r1 < l2 || b1 < t2 || r2 < l1 || b2 < t1)
  253. }
  254.  
  255. //获取最终样式
  256. function getStyle(obj, attr)
  257. {
  258.     return parseFloat(obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr])
  259. }
  260.  
  261. //运动框架
  262. function startMove(obj, pos, onEnd)
  263. {
  264.     clearInterval(obj.timer);
  265.     obj.timer = setInterval(function ()
  266.     {
  267.         doMove(obj, pos, onEnd)
  268.     }, 30)
  269. }
  270. function doMove(obj, pos, onEnd)
  271. {
  272.     var iCurL = getStyle(obj, "left");
  273.     var iCurT = getStyle(obj, "top");
  274.     var iSpeedL = (pos.left - iCurL) / 5;
  275.     var iSpeedT = (pos.top - iCurT) / 5;
  276.     iSpeedL = iSpeedL > 0 ? Math.ceil(iSpeedL) : Math.floor(iSpeedL);
  277.     iSpeedT = iSpeedT > 0 ? Math.ceil(iSpeedT) : Math.floor(iSpeedT);
  278.     if (pos.left == iCurL && pos.top == iCurT)
  279.     {
  280.         clearInterval(obj.timer);
  281.         onEnd && onEnd()
  282.     }
  283.     else
  284.     {
  285.         obj.style.left = iCurL + iSpeedL + "px";
  286.         obj.style.top = iCurT + iSpeedT + "px";
  287.     }
  288. }
  289. </script>
  290. </head>
  291. <body>
  292. <div id="photo"><img src="img/girl0/girl.jpg" class="selected" /><img src="img/girl1/girl.jpg" /><img src="img/girl2/girl.jpg" /></div>
  293. <center><input type="button" value="开始游戏" /></center>
  294. <ul id="box"></ul>
  295. </body>
  296. </html>
  1. 模拟表单控件
  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>模拟表单控件</title>
  6. <style type="text/css">
  7. /* ----表单控件CSS开始---- ↓ */
  8. .WellForm *{margin:0;padding:0;}
  9. .WellForm{font-size:12px;font-family:arial;line-height:21px;}
  10. .WellForm pre{float:left;margin-right:10px;}
  11. /*background*/
  12. .WellForm .TextL,.WellForm .TextR,.WellForm .WellText,
  13. .WellForm .SelectL,.WellForm .SelectR,.WellForm .WellSelect,
  14. .WellForm .WellTextArea .T,
  15. .WellForm .WellTextArea .T .TL,
  16. .WellForm .WellTextArea .T .TM,
  17. .WellForm .WellTextArea .B,
  18. .WellForm .WellTextArea .B .BL,
  19. .WellForm .WellTextArea .B .BM,
  20. .WellForm .WellRadio,
  21. .WellForm .WellCheckBox,
  22. .WellForm .ButtonL,.WellForm .ButtonR,.WellForm .WellButton
  23. {background:url(WellForm/WellForm.gif) no-repeat;}
  24. /*WellText*/
  25. .WellForm .TextL,.WellForm .TextR,.WellForm .WellText{float:left;width:5px;height:21px;}
  26. .WellForm .TextL{background-position:0 0;}.WellForm .TextR{background-position:right 0;}
  27. .WellForm .TextLH{background-position:0 -21px;}.WellForm .TextRH{background-position:right -21px;}
  28. .WellForm .WellText{border:0;width:auto;height:17px;padding:2px 0;padding:3px 0 1px\9;*padding:3px 0 1px;font-family:arial;background-repeat:repeat-x;background-position:0 -42px;}
  29. .WellForm .WellTextH{background-position:0 -63px;}
  30. /*WellSelect*/
  31. .WellForm .SelectL,.WellForm .SelectR,.WellForm .WellSelect{float:left;height:21px;}
  32. .WellForm .SelectL{width:3px;background-position:0 -84px;}
  33. .WellForm .SelectR{width:16px;cursor:pointer;background-position:right -84px;margin-right:5px;}
  34. .WellForm .WellSelect{position:relative;cursor:pointer;background-repeat:repeat-x;background-position:0 -105px;}
  35. .WellForm .WellSelect select{display:none;}
  36. .WellForm .WellSelect em{position:absolute;top:0;left:3px;color:#fff;height:21px;display:block;line-height:21px;font-style:normal;}
  37. .WellForm .WellSelect ul{list-style-type:none;position:absolute;top:18px;left:0;z-index:1000;display:none;background:#6C6D70;}
  38. .WellForm .WellSelect ul li {color:#fff;height:20px;cursor:pointer;line-height:20px;padding-left:3px;}
  39. .WellForm .WellSelect ul li.hover{background:#333;}
  40. /*WellTextArea*/
  41. .WellForm .WellTextArea{float:left;}
  42. .WellForm .WellTextArea .T,
  43. .WellForm .WellTextArea .T .TL,
  44. .WellForm .WellTextArea .T .TM,
  45. .WellForm .WellTextArea .B,
  46. .WellForm .WellTextArea .B .BL,
  47. .WellForm .WellTextArea .B .BM
  48. {height:5px;overflow:hidden;}
  49. .WellForm .WellTextArea .T{float:left;width:100%;background-position:right -126px;}
  50. .WellForm .WellTextArea .TH{float:left;width:100%;background-position:right -131px;}
  51. .WellForm .WellTextArea .T .TL{background-position:0 -126px;}
  52. .WellForm .WellTextArea .TH .TL{background-position:0 -131px;}
  53. .WellForm .WellTextArea .T .TM{margin:0 5px;background-repeat:repeat-x;background-position:0 -136px;}
  54. .WellForm .WellTextArea .TH .TM{margin:0 5px;background-repeat:repeat-x;background-position:0 -141px;}
  55. .WellForm .WellTextArea .B{float:left;width:100%;background-position:right -146px;}
  56. .WellForm .WellTextArea .BH{float:left;width:100%;background-position:right -151px;}
  57. .WellForm .WellTextArea .B .BL{background-position:0 -146px;}
  58. .WellForm .WellTextArea .BH .BL{background-position:0 -151px;}
  59. .WellForm .WellTextArea .B .BM{margin:0 5px;background-repeat:repeat-x;background-position:0 -156px;}
  60. .WellForm .WellTextArea .BH .BM{margin:0 5px;background-repeat:repeat-x;background-position:0 -161px;}
  61. .WellForm .WellTextArea .M,
  62. .WellForm .WellTextArea .M .MR
  63. {float:left;background:url(WellForm/TextArea-1.gif) repeat-y;}
  64. .WellForm .WellTextArea .M{background-position:0 0;}
  65. .WellForm .WellTextArea .M .MR{background-position:right 0;}
  66. .WellForm .WellTextArea .MH,
  67. .WellForm .WellTextArea .MH .MR
  68. {float:left;background:url(WellForm/TextArea-2.gif) repeat-y;}
  69. .WellForm .WellTextArea .MH{background-position:0 0;}
  70. .WellForm .WellTextArea .MH .MR{background-position:right 0;}
  71. .WellForm .WellTextArea textarea{float:left;border:0;margin:0 5px;overflow:auto;background:url(WellForm/TextArea.gif);font-family:arial;font-size:12px;resize:none;}
  72. /*WellRadio*/
  73. .WellForm .WellRadio{float:left;width:13px;height:13px;cursor:pointer;overflow:hidden;margin:4px 5px 0 0;background-position:-15px -270px;}
  74. .WellForm .WellRadioH{background-position:-15px -284px;}
  75. .WellForm .WellRadio input{margin-top:13px;display:none;}
  76. /*WellCheckBox*/
  77. .WellForm .WellCheckBox{float:left;    width:12px;height:12px;cursor:pointer;overflow:hidden;margin:4px 5px 0 0;background-position:0 -270px;}
  78. .WellForm .WellCheckBoxH{background-position:0 -283px;}
  79. .WellForm .WellCheckBox input{margin-top:12px;display:none;}
  80. /*WellButton*/
  81. .WellForm .ButtonL,.WellForm .ButtonR,.WellForm .WellButton{cursor:pointer;float:left;width:5px;height:26px;}
  82. .WellForm .ButtonL{background-position:0 -166px;}.WellForm .ButtonR{background-position:right -166px;margin-right:10px;}
  83. .WellForm .ButtonLH{background-position:0 -192px;}.WellForm .ButtonRH{background-position:right -192px;}
  84. .WellForm .WellButton{border:0;width:auto;font-size:12px;color:#fff!important;height:26px;padding:0 10px 3px;*padding-bottom:0;padding-bottom:0\9;font-family:arial;background-repeat:repeat-x;background-position:0 -218px;}
  85. .WellForm .WellButtonH{background-position:0 -244px;}
  86. /* ----表单控件CSS结束---- ↑ */
  87.  
  88. form{float:left;padding:20px;border:2px dashed #ccc;margin:20px 0 0 40px;width:380px;}
  89. form .item{float:left;clear:both;width:100%;margin-bottom:10px;}
  90. .WellForm label{float:left;width:4em;height:21px;text-align:right;}
  91. </style>
  92. <script type="text/javascript">
  93. window.onload = function ()
  94. {
  95.     var aForm = document.getElementsByTagName("form");
  96.     //多个表单
  97.     for (var i = 0; i < aForm.length; i++) WellForm(aForm[i]);
  98. };
  99.  
  100. /*------------------------------------------------- +
  101.   可以将以下JS保存为文件, 方便调用
  102.   使用方法：WellForm(element) //element 为表单元素
  103.  +------------------------------------------------- */
  104.  
  105. // 获取class
  106. function getClass(sClass, oParent)
  107. {
  108.     var aClass = [];
  109.     var reClass = new RegExp("(^| )" + sClass + "( |$)");
  110.     var aElem = (oParent || document).getElementsByTagName("*");
  111.     for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
  112.     return aClass
  113. }
  114. // class是否存在
  115. function hasClass(obj, sClass)
  116. {
  117.     var reg = new RegExp("(^|\\s)" + sClass + "(\\s|$)");
  118.     return reg.test(obj.className)
  119. }
  120. // 添加class
  121. function addClass(obj, sClass)
  122. {
  123.     hasClass(obj, sClass) || (obj.className += " "+sClass)
  124. }
  125. // 删除class
  126. function removeClass(obj, sClass)
  127. {
  128.     if (hasClass(obj, sClass))
  129.     {
  130.         var reg = new RegExp("(^|\\s)" + sClass + "(\\s|$)");
  131.         obj.className = obj.className.replace(reg, "");
  132.     }
  133. }
  134. // 上一个元素
  135. function prevElement(obj)
  136. {
  137.     return obj.previousSibling || obj.previousElementSibling || null
  138. }
  139. // 下一个元素
  140. function nextElement(obj)
  141. {
  142.     return obj.nextSibling || obj.nextElementSibling || null
  143. }
  144. // 自定义表单函数
  145. function WellForm(form)
  146. {
  147.     var i = 0;
  148.     var zIndex = 1;
  149.     var aInput = form.getElementsByTagName("input");
  150.     var aSelect = form.getElementsByTagName("select");
  151.     var aTextArea = form.getElementsByTagName("textarea");
  152.     form.className = "WellForm";
  153.  
  154.     /* 单行文本框 */
  155.     var aText = [];
  156.     for (i = 0; i < aInput.length; i++) (aInput[i]["type"] == "text" || aInput[i]["type"] == "password") && aText.push(aInput[i]);
  157.  
  158.     for (i = 0; i < aText.length; i++)
  159.     {
  160.         var oTextL = document.createElement("div");
  161.         var oTextR = document.createElement("div");
  162.         oTextL.className = "TextL";
  163.         oTextR.className = "TextR";
  164.         aText[i].className = "WellText";
  165.         aText[i].parentNode.insertBefore(oTextL, aText[i]);
  166.         aText[i].parentNode.insertBefore(oTextR, nextElement(aText[i]));
  167.         //获取焦点
  168.         aText[i].onfocus = function ()
  169.         {
  170.             addClass(this, "WellTextH");
  171.             addClass(prevElement(this), "TextLH");
  172.             addClass(nextElement(this), "TextRH")
  173.         };
  174.         //失去焦点
  175.         aText[i].onblur = function ()
  176.         {
  177.             removeClass(this, "WellTextH");
  178.             removeClass(prevElement(this), "TextLH");
  179.             removeClass(nextElement(this), "TextRH")
  180.         }
  181.     }
  182.  
  183.     /* 多行文本框 */
  184.     for (i = 0; i < aTextArea.length; i++)
  185.     {
  186.         var oTextArea = document.createElement("div");
  187.         oTextArea.className = "WellTextArea";
  188.  
  189.         //上边框
  190.         var oT = document.createElement("div");
  191.         var oTL = document.createElement("div");
  192.         var oTM = document.createElement("div");
  193.         oT.className = "T";
  194.         oTL.className = "TL";
  195.         oTM.className = "TM";
  196.         oTL.appendChild(oTM);
  197.         oT.appendChild(oTL);
  198.         //中间边框
  199.         var oM = document.createElement("div");
  200.         var oMR = document.createElement("div");
  201.         oM.className = "M";
  202.         oMR.className = "MR";
  203.         oM.appendChild(oMR);
  204.         //下边框
  205.         var oB = document.createElement("div");
  206.         var oBL = document.createElement("div");
  207.         var oBM = document.createElement("div");
  208.         oB.className = "B";
  209.         oBL.className = "BL";
  210.         oBM.className = "BM";
  211.         oBL.appendChild(oBM);
  212.         oB.appendChild(oBL);
  213.         //插入结构
  214.         aTextArea[i].parentNode.insertBefore(oTextArea, aTextArea[i]);
  215.         oMR.appendChild(aTextArea[i]);
  216.         oTextArea.appendChild(oT);
  217.         oTextArea.appendChild(oM);
  218.         oTextArea.appendChild(oB);
  219.         oTextArea.style.width = oMR.offsetWidth + "px";
  220.         //获取焦点
  221.         aTextArea[i].onfocus = function ()
  222.         {
  223.             var M = this.parentNode.parentNode;
  224.             addClass(M, "MH");
  225.             addClass(prevElement(M), "TH");
  226.             addClass(nextElement(M), "BH")
  227.         };
  228.         aTextArea[i].onblur = function ()
  229.         {
  230.             var M = this.parentNode.parentNode;
  231.             removeClass(M, "MH");
  232.             removeClass(prevElement(M), "TH");
  233.             removeClass(nextElement(M), "BH")
  234.         }
  235.     }
  236.  
  237.     /* 单选框 */
  238.     var aRadio = [];
  239.     for (i = 0; i < aInput.length; i++) aInput[i]["type"] == "radio" && aRadio.push(aInput[i]);
  240.  
  241.     for (i = 0; i < aRadio.length; i++)
  242.     {
  243.         var oRadio = document.createElement("div");
  244.         oRadio.className = "WellRadio";    
  245.  
  246.         aRadio[i].parentNode.insertBefore(oRadio, aRadio[i]);
  247.         oRadio.appendChild(aRadio[i]);
  248.  
  249.         aRadio[i].checked && addClass(aRadio[i].parentNode, "WellRadioH");
  250.  
  251.         oRadio.onclick = function ()
  252.         {
  253.             var siblings = getClass("WellRadio", this.parentNode);
  254.             for (i = 0; i < siblings.length; i++)
  255.             {
  256.                 removeClass(siblings[i], "WellRadioH");
  257.                 siblings[i].children[0].checked = false;
  258.             }
  259.             addClass(this, "WellRadioH");
  260.             this.children[0].checked = true
  261.         }
  262.     }
  263.  
  264.     /* 复选框 */
  265.     var aCheckBox = [];
  266.     for (i = 0; i < aInput.length; i++) aInput[i]["type"] == "checkbox" && aCheckBox.push(aInput[i]);
  267.  
  268.     for (i = 0; i < aCheckBox.length; i++)
  269.     {
  270.         var oCheckBox = document.createElement("div");
  271.         oCheckBox.className = "WellCheckBox";    
  272.  
  273.         aCheckBox[i].parentNode.insertBefore(oCheckBox, aCheckBox[i]);
  274.         oCheckBox.appendChild(aCheckBox[i]);
  275.  
  276.         aCheckBox[i].checked && addClass(aCheckBox[i].parentNode, "WellCheckBoxH");
  277.  
  278.         oCheckBox.onclick = function ()
  279.         {
  280.             this.children[0].checked = !this.children[0].checked;
  281.             this.children[0].checked ? addClass(this, "WellCheckBoxH") : removeClass(this, "WellCheckBoxH")
  282.         }
  283.     }
  284.  
  285.     /* 按钮 */
  286.     var aButton = [];
  287.     for (i = 0; i < aInput.length; i++) (aInput[i]["type"] == "button" || aInput[i]["type"] == "submit") && aButton.push(aInput[i]);
  288.  
  289.     for (i = 0; i < aButton.length; i++)
  290.     {
  291.         var oBtnL = document.createElement("div");
  292.         var oBtnR = document.createElement("div");
  293.         oBtnL.className = "ButtonL";
  294.         oBtnR.className = "ButtonR";
  295.         aButton[i].className = "WellButton";
  296.         aButton[i].parentNode.insertBefore(oBtnL, aButton[i]);
  297.         aButton[i].parentNode.insertBefore(oBtnR, nextElement(aButton[i]));
  298.         //鼠标移入
  299.         aButton[i].onmouseover = function ()
  300.         {
  301.             addClass(this, "WellButtonH");
  302.             addClass(prevElement(this), "ButtonLH");
  303.             addClass(nextElement(this), "ButtonRH");
  304.         };
  305.         //鼠标移出
  306.         aButton[i].onmouseout = function ()
  307.         {
  308.             removeClass(this, "WellButtonH");
  309.             removeClass(prevElement(this), "ButtonLH");
  310.             removeClass(nextElement(this), "ButtonRH");
  311.         }
  312.     }
  313.  
  314.     /* 下拉菜单 */
  315.     for (i = 0; i < aSelect.length; i++)
  316.     {
  317.         var oFragment = document.createDocumentFragment();
  318.         var oSelectL = document.createElement("div");
  319.         var oSelectR = document.createElement("div");
  320.         var oWellSelect = document.createElement("div");
  321.         var oEm = document.createElement("em");
  322.         var oUl = document.createElement("ul");
  323.         oSelectL.className = "SelectL";
  324.         oSelectR.className = "SelectR";
  325.         oWellSelect.className = "WellSelect";
  326.         //插入结构
  327.         aSelect[i].parentNode.insertBefore(oSelectL, aSelect[i]);
  328.         aSelect[i].parentNode.insertBefore(oSelectR, nextElement(aSelect[i]));
  329.         oUl.style.width = oWellSelect.style.width =  aSelect[i].offsetWidth - oSelectR.offsetWidth / 2 + "px";        
  330.  
  331.         for (var j = 0; j < aSelect[i].options.length; j++)
  332.         {
  333.             var oLi = document.createElement("li");
  334.             oLi.innerHTML = aSelect[i].options[j].text;
  335.             oLi["sValue"] = aSelect[i].options[j].value;
  336.             oFragment.appendChild(oLi);
  337.             aSelect[i].options[j].selected && (oEm.innerHTML = aSelect[i].options[j].text)
  338.         }
  339.         oUl.appendChild(oFragment);
  340.         oWellSelect.appendChild(oEm);
  341.         oWellSelect.appendChild(oUl);
  342.         aSelect[i].parentNode.insertBefore(oWellSelect, aSelect[i]);
  343.         oWellSelect.appendChild(aSelect[i]);
  344.  
  345.         oWellSelect.onclick = oSelectR.onclick = function (event)
  346.         {
  347.             var o = this.getElementsByTagName("ul")[0] || prevElement(this).getElementsByTagName("ul")[0];
  348.             var aUl = form.getElementsByTagName("ul");
  349.             this.parentNode.style.position = "relative";
  350.             this.parentNode.style.zIndex = zIndex++;
  351.             o.style.display = o.style.display == "block" ? "none" : "block";
  352.             for (i = 0; i < aUl.length; i++)
  353.             {
  354.                 if (o == aUl[i]) continue;
  355.                 aUl[i].style.display = "none";
  356.             }
  357.             var aLi = o.getElementsByTagName("li");
  358.  
  359.             for (i = 0; i < aLi.length; i++)
  360.             {
  361.                 aLi[i].onmouseover = function ()
  362.                 {
  363.                     this.className = "hover"
  364.                 };
  365.                 aLi[i].onmouseout = function ()
  366.                 {
  367.                     this.className = ""
  368.                 };
  369.                 aLi[i].onclick = function ()
  370.                 {
  371.                     prevElement(this.parentNode).innerHTML = this.innerHTML;
  372.                     nextElement(this.parentNode).value = this.sValue
  373.                 }
  374.             }
  375.  
  376.             (event || window.event).cancelBubble = true;
  377.  
  378.             document.onclick = function ()
  379.             {
  380.                 o.style.display = "none"
  381.             }
  382.         }
  383.     }
  384. }
  385. </script>
  386. </head>
  387. <body>
  388. <form>
  389.     <div class="item"><label>姓名：</label><input type="text" name="name" /></div>
  390.     <div class="item"><label>电话：</label><input type="text" name="tel" /></div>
  391.     <div class="item">
  392.         <label>性别：</label>
  393.         <select name="sex">
  394.             <option value="男孩">男孩</option>
  395.             <option value="女孩" selected="selected">女孩</option>
  396.             <option value="人妖">人妖</option>
  397.         </select>
  398.     </div>
  399.     <div class="item">
  400.         <label>生日：</label>
  401.         <select name="month">
  402.             <option value="1">1月</option>
  403.             <option value="2">2月</option>
  404.             <option value="3">3月</option>
  405.             <option value="4">4月</option>
  406.             <option value="5">5月</option>
  407.             <option value="6">6月</option>
  408.             <option value="7" selected="selected">7月</option>
  409.             <option value="8">8月</option>
  410.             <option value="9">9月</option>
  411.             <option value="10">10月</option>
  412.         </select>
  413.         <select name="day">
  414.             <option value="1">1号</option>
  415.             <option value="2">2号</option>
  416.             <option value="3">3号</option>
  417.             <option value="4">4号</option>
  418.             <option value="5">5号</option>
  419.             <option value="6" selected="selected">6号</option>
  420.             <option value="7">7号</option>
  421.             <option value="8">8号</option>
  422.             <option value="9">9号</option>
  423.             <option value="10">10号</option>
  424.             <option value="11">11号</option>
  425.             <option value="12">12号</option>
  426.             <option value="13">13号</option>
  427.             <option value="14">14号</option>
  428.             <option value="15">15号</option>
  429.             <option value="16">16号</option>
  430.         </select>
  431.         <select name="year">
  432.             <option value="2000">2000年</option>
  433.             <option value="2001">2001年</option>
  434.             <option value="2002">2002年</option>
  435.             <option value="2003">2003年</option>
  436.             <option value="2004">2004年</option>
  437.             <option value="2005">2005年</option>
  438.             <option value="2006">2006年</option>
  439.             <option value="2007">2007年</option>
  440.             <option value="2008">2008年</option>
  441.             <option value="2009">2009年</option>
  442.             <option value="2010" selected="selected">2010年</option>
  443.             <option value="2011">2011年</option>
  444.             <option value="2012">2012年</option>
  445.             <option value="2013">2013年</option>
  446.         </select>
  447.     </div>
  448.     <div class="item">
  449.         <label>婚姻：</label>
  450.         <input type="radio" name="marry" value="已婚" /><pre>已婚</pre>
  451.         <input type="radio" name="marry" value="未婚" checked="checked" /><pre>未婚</pre>
  452.     </div>
  453.     <div class="item">
  454.         <label>爱好：</label>
  455.         <input type="checkbox" name="like" value="吃饭" /><pre>吃饭</pre>
  456.         <input type="checkbox" name="like" value="睡觉" /><pre>睡觉</pre>
  457.         <input type="checkbox" name="like" value="上网" checked="checked" /><pre>上网</pre>
  458.         <input type="checkbox" name="like" value="打游戏" checked="checked" /><pre>打游戏</pre>
  459.     </div>
  460.     <div class="item"><label>地址：</label><input type="text" style="width:300px;" name="address" /></div>
  461.     <div class="item"><label>备注：</label><textarea cols="50" rows="5" style="width:300px;" name="remark"></textarea></div>
  462.     <div class="item"><label>说明：</label><textarea cols="50" rows="5" style="width:300px;" name="desc"></textarea></div>
  463.     <div class="item"><label></label><input type="submit" value="提交" /></div>
  464. </form>
  465. <form>
  466.     <div class="item"><label>用户名：</label><input type="text" name="username" /></div>
  467.     <div class="item"><label>密码：</label><input type="password" name="pwd" /></div>
  468.     <div class="item"><label>验证码：</label><input type="text" name="code" style="width:60px;" /></div>
  469.     <div class="item"><label></label><input type="submit" value="提交" /></div>
  470. </form>
  471. </body>
  472. </html>

仿苹果电脑任务栏菜单&&拼图小游戏&&模拟表单控件的更多相关文章

  1. 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）

    DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type       使用options[index]返回具体选项所对应的常用属性:defa ...

  2. JavaScript版拼图小游戏

    慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例 拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较 ...

  3. 使用NGUI实现拖拽功能（拼图小游戏）

    上一次用UGUI实现了拼图小游戏,这次,我们来用NGUI来实现 实现原理 NGUI中提供了拖拽的基类UIDragDropItem,所以我们要做的就是在要拖拽的图片上加一个继承于该类的脚本,并实现其中的 ...

  4. jQuery实现拼图小游戏

    小熊维尼拼图                                                                                    2017-07-23 ...

  5. jQuery拼图小游戏

    jQuery拼图小游戏 最后样式 核心代码部分 <script type="text/javascript" > $(function () { $("td& ...

  6. 在HTML页面中有jQuery实现实现拼图小游戏

    1.用jQuery实现拼图小游戏 2.首先获得td的点击事件.再进行交换位置 3.下面这种仅供参考 4.下面这些是HTMl标签 当这个世界变得越来越复杂的时候,内心最需保持一份简单一份纯真:

  7. swift 拼图小游戏

    依据这位朋友的拼图小游戏改编 http://tangchaolizi.blog.51cto.com/3126463/1571616 改编主要地方是: 原本着我仁兄的代码时支持拖动小图块来移动的,我參照 ...

  8. 教你用Python自制拼图小游戏，一起来制作吧

    摘要: 本文主要为大家详细介绍了python实现拼图小游戏,文中还有示例代码介绍,感兴趣的小伙伴们可以参考一下. 开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Pyt ...

  9. 打造专属自己的html5拼图小游戏

    最近公司刚好有个活动是要做一版 html5的拼图小游戏,于是自己心血来潮,自己先实现了一把,也算是尝尝鲜了.下面就把大体的思路介绍一下,希望大家都可以做出一款属于自己的拼图小游戏,必须是更炫酷,更好玩 ...

随机推荐

  1. java：网络编程（InetAddress，InetSocketAddress，URL，TCP（Socket与SeverSocket），TCP与UDP的区别）

    InerAddress: /**IP地址:在网络上唯一标示一台计算机 * 端口号:标示计算机上不同的应用程序 * java.net.InetAddress类:此类表示互联网协议 (IP) 地址. * ...

  2. gluPerspective（解释得很好）

    http://www.cppblog.com/COOOOOOOOL/archive/2009/12/28/104255.html 函数原型gluPerspective(GLdouble fovy,GL ...

  3. 和菜鸟一起学linux之V4L2摄像头应用流程【转】

    转自:http://blog.csdn.net/eastmoon502136/article/details/8190262/ 上篇文章,知道了,C代码编译后存放在内存中的位置,那么C代码的整个编译过 ...

  4. 6.安装和配置OpenStack图片服务组件

    安装和配置图片服务组件 这里是安装在控制器上 安装和配置图片服务组件 yum install –y openstack-glance python-glanceclient 编辑/etc/glance ...

  5. sh脚本变量赋值时同时执行命令时的环境问题

    在v2ex看到一个问题: 允许在一个命令之前立即发生一个或多个变量赋值,这些赋值为跟随着的命令更改环境变量,这个赋值的影响是暂时的. 那为什么: int=100 int=10 echo $(($int ...

  6. 优化html中mp4视频加载速度

    如果使用参数faststart就会在生成完上边结构之后将moov移动到mdat前面:ffmpeg –i input.flv –c copy –f mp4 –movflags faststart out ...

  7. 新疆大学ACM-ICPC程序设计竞赛五月月赛（同步赛）F 猴子排序的期望【Java/高精度/组合数学+概率论】

    链接:https://www.nowcoder.com/acm/contest/116/F 来源:牛客网 题目描述 我们知道有一种神奇的排序方法叫做猴子排序,就是把待排序的数字写在卡片上,然后让猴子把 ...

  8. java中的BigInteger

    头文件 import java.io.*; import java.math.*; 读入 Scanner cin = Scann(System.in); while(cin.hasNext()) &l ...

  9. luogu P1072 Hankson的趣味题

    题目链接 luogu P1072 Hankson 的趣味题 题解 啊,还是noip的题好做 额,直接推式子就好了 \(gcd(x,a_0)=a_1=gcd(\frac{x}{a_1},\frac{a_ ...

  10. 四. Java继承和多态8.Java final关键字：阻止继承和多态

    在 Java 中,声明类.变量和方法时,可使用关键字 final 来修饰.final 所修饰的数据具有“终态”的特征,表示“最终的”意思.具体规定如下: final 修饰的类不能被继承. final ...