`
bluedusk
  • 浏览: 272826 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript键盘事件表单交互

JavaScriptF#中国移动MicrosoftHTML 
阅读更多
键盘选择表单
  1.   <style type="text/css">
  2.   *{
  3.   margin:0px;padding:0px;font-size:12px;
  4.   }
  5.   input{
  6.       width:100px;height:20px;border:1px solid #ccc;
  7.     }
  8. TD { cursor: hand; }   
  9.   </style>
  10.   <script language="javascript" type="text/javascript">   
  11.     function document.onkeydown(){  
  12.      if(document.all('oTable')){
  13.          var rowsArray = document.all('oTable').rows;  
  14.          for(var i=0;i<rowsArray.length;i++){  
  15.               if(rowsArray[i].children[0].style.backgroundColor=='#dcdcdc'){  
  16.                  switch(window.event.keyCode){  
  17.                      case 38 :  
  18.                          if(i-1>=0){  
  19.                            rowsArray[i-1].children[0].style.backgroundColor = '#dcdcdc';   
  20.                            rowsArray[i].children[0].style.backgroundColor = '';  
  21.                          }  
  22.                          break;  
  23.                      case 40 :  
  24.                          if(i+1<=rowsArray.length-1){  
  25.                             rowsArray[i+1].children[0].style.backgroundColor = '#dcdcdc';    
  26.                             rowsArray[i].children[0].style.backgroundColor = '';  
  27.                          }  
  28.                          break;                           
  29.                      case 13 :  
  30.                  var str = rowsArray[i].childNodes[0].innerHTML;
  31.                document.getElementById("username").value = str;
  32.                document.getElementById("tips").style.display='none';            
  33.                         break;   
  34.                  break;  
  35.               }  
  36.          }  
  37.          }
  38.       }  
  39.       function document.onclick(){  
  40.        if(document.all('oTable')){
  41.           if(window.event.srcElement.tagName!='TD'){ return; }  
  42.           var rowsArray = document.all('oTable').rows;  
  43.           for(var i=0;i<rowsArray.length;i++){  
  44.                if(rowsArray[i].cells[0]==window.event.srcElement){  
  45.                   rowsArray[i].cells[0].style.backgroundColor = '#dcdcdc';  
  46.                }else{  
  47.                   rowsArray[i].cells[0].style.backgroundColor = '';  
  48.                }  
  49.           }   
  50.         }         
  51.       }  
  54.   function doaaa(id)
  55.   {
  57.   var str = id.childNodes[0].innerHTML;
  58.   alert(str);
  59.     document.getElementById("username").value = str;
  60.     document.getElementById("tips").style.display='none';
  61.   return true;
  62.   }
  63. var aid = new Array("人民币","美刀","英镑","欧元","港币");
  64. function tips(id,str){
  65. var l=document.getElementById(id).offsetLeft+120;
  66. var t=document.getElementById(id).offsetTop;
  67. var htmlstring ="<table id=\"oTable\" width=\"100\">";
  68. for(var i=0;i<aid.length;i++){
  69. if(i==0){htmlstring = htmlstring+"<tr height=\"20\" onclick=\"doaaa(this);\"><td style=\"background-color:#dcdcdc;\">0"+i+":"+aid[i]+"</td></tr>";}
  70. else{htmlstring = htmlstring+"<tr height=\"20\" onclick=\"doaaa(this);\"><td>0"+i+":"+aid[i]+"</td></tr>";}
  72. }
  73. htmlstring = htmlstring+"</table>";
  74. var inheight = aid.length*22+"px";
  75. document.getElementById("tips").innerHTML=htmlstring;
  76. document.getElementById("tips").style.left=l+"px";
  77. document.getElementById("tips").style.top=t+"px";
  78. document.getElementById("tips").style.height=inheight;
  79. document.getElementById("tips").style.display="block";
  80. }
  81. function outtips(){
  82. for(var i=0;i<aid.length;i++){
  83.  if(document.getElementById("username").value=="0"+i) 
  84.   document.getElementById("username").value=aid[i];
  85. }
  86.     //if(document.getElementById("username").value==0+"") 
  87.   //  document.getElementById("tips").style.display='none';
  88. }
  89. </script>
  90. </head>
  91. <body>
  93.                     
  94. <div id="tips" style="position:absolute;border:1px solid #ccc;padding:0px 3px;color:#f00;display:none;height:200px;line-height:20px;background:#fcfcfc"></div>
  95. <br />
  96. 姓名：<input type="text" id="username" onfocus="tips('username','姓名长度最多16个字符')" onblur="outtips()" />
  97. <br />
  98. 密码：<input type="password" id="password" onfocus="tips('password','密码长度必须在3-18位之间')" onblur="outtips()" />
  100. </body>
  101. </html>

Msdn Menu

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>MSND menu</title>
  5. <meta name="Generator" content="EditPlus">
  6. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  7. <meta name="Author" content="">
  8. <meta name="Keywords" content="">
  9. <meta name="Description" content="">
  10. <style>
  11. .LocaleManagementFlyoutPopup {
  12.  font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
  13.   border:1px solid #666666;
  14.   padding: 3px 3px 3px 3px;
  15.   text-align: left;
  16.   background-color: #FFFFFF;
  17.   z-index: 10;
  18.   opacity: .95;
  19.   filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=2,OffY=2,Color='silver',Positive='true') alpha(opacity=95);
  20. }
  22. .LocaleManagementFlyoutPopup A, .LocaleManagementFlyoutPopup A:visited {
  23.   font-size: 10px;
  24.   color: #000000;
  25.   cursor: hand;
  26.   border: 1px solid #FFFFFF;
  27.   padding: 1px 3px 1px 3px;
  28.   height: 15px;
  29.   text-align: left;
  30.   text-decoration: none;
  31.   white-space: nowrap;
  32.   display: block;
  33. }
  35. .LocaleManagementFlyoutPopup A:hover {
  36.   background-color: #f0f7fd;
  37.   color: #000000;
  38.   cursor: hand;
  39.   border: 1px solid #addbef;
  40.   padding: 1px 3px 1px 3px;
  41.   height: 15px;
  42.   text-decoration: none;
  43.   white-space: nowrap;
  44.   display: block;
  45. }
  47. .LocaleManagementFlyoutPopupHr {
  48.  height: 1px;
  49.  background: #d0e0f0;
  50.  margin: 0px 11px 21px 11px;
  51. }
  53. .LocaleManagementFlyoutPopArrow {
  54.   margin: 4px 0px 0px 0px;
  55. }
  57. .LocaleManagementFlyoutStatic_msdn {
  58.  border: 1px solid #ffffff;
  59. }
  61. .LocaleManagementFlyoutStaticHover_msdn {
  62.  border: 1px solid #addbef;
  63. }
  65. .TFlyPopupAnimate {
  66.  position: absolute;
  67.  display: block;
  68.  border: 1px solid gray;
  69.  overflow: hidden;
  70.  visibility: hidden;
  71.  margin: 0;
  72.  padding: 0;
  73.  z-index: 1;
  74. }
  75. </style>
  76. <script>
  77. /*
  78. name 对象的 id 值
  79. offsetLeft 定位：左 - 偏移量
  80. offsetTop 定位：顶部 - 偏移量
  81. alignment 对齐方式{-1: left; 0: center; 1: right}
  82. anyIter 显示方式(<=0: 普通样式; >0: 缩放样式)
  83. anyTime 动画时间间隔
  84. staticHover 鼠标覆盖时的样式
  85. popupHover 显示内容鼠标覆盖时的样式
  86. popupLatency 显示内容延时
  87. hideLatency 隐藏内容延时
  88. onInit 初始化
  89. onPopup 显示内容时行为
  90. onHide 隐藏内容时行为
  91. */
  92. function TFly_Init(name, offsetLeft, offsetTop, alignment, anyIter, anyTime, staticHover, popupHover, popupLatency, hideLatency, onInit, onPopup, onHide) {
  93.  var TFly = document.getElementById(name);
  94.  TFly.DT = document.getElementById(name + "_Popup"); // 显示内容对象
  95.  TFly.F = document.getElementById(name + "_Anim"); // 动画效果对象
  96.  TFly.oX = offsetLeft;
  97.  TFly.oY = offsetTop;
  98.  TFly.alignment = alignment;
  99.  TFly.AnyIter = anyIter;
  100.  TFly.AnyTime = anyTime;
  102.  TFly.popupLatency = popupLatency;
  103.  TFly.hideLatency = hideLatency;
  104.  TFly.onPopup = onPopup;
  105.  TFly.onHide = onHide;
  107.  TFly.onmouseover = function() {
  108.  if (staticHover != '') { // 替换样式，并储存原来的样式
  109.      TFly.className_ = TFly.className;
  110.       TFly.className = staticHover;
  111.     }
  112.  TFly_Popup(TFly, true);
  113.   }
  115.  TFly.onmouseout = function() {
  116.    if (staticHover != '') { // 恢复原来的样式
  117.      TFly.className = TFly.className_;
  118.     }
  119.     TFly_Popup(TFly, false);
  120.   }
  122.  if (document.all) {
  123.  TFly.onactivate = TFly.onmouseover;
  124.  TFly.ondeactivate = TFly.onmouseout;
  125.  } else {
  126.  TFly.onfocus = TFly.onmouseover;
  127.  TFly.onblur = TFly.onmouseout;
  128.  }
  130.  TFly.DT.onmouseover = function() {
  131.  if (popupHover != '') {
  132.      TFly.DT.className_ = TFly.DT.className;
  133.       TFly.DT.className = popupHover;
  134.     }
  135.     TFly_Popup(TFly, true);
  136.   }
  138.  TFly.DT.onmouseout = function() {
  139.    if (popupHover != '') {
  140.  TFly.DT.className = TFly.DT.className_;
  141.     }
  142.    TFly_Popup(TFly, false);
  143.  }
  145.  TFly_CallClientFunction(onInit, TFly);
  146. }
  148. // 调用初始化程序
  149. function TFly_CallClientFunction(name, TFly) {
  150.  if (name != null && name != "")
  151.  eval(name + "(TFly);");
  152. }
  154. // 定位
  155. function TFly_SetPosition(TFly, obj) {
  156.  obj.style.top = TFly.oY + TFly.offsetHeight + "px";
  157.  obj.style.left = TFly.oX + (TFly.offsetWidth - obj.offsetWidth ) * (1 + TFly.alignment) / 2 + "px";
  158. }
  160. function TFly_Popup(TFly, value) {
  161.  if (TFly.timer != null) window.clearTimeout(TFly.timer); // 清除超时
  163.  if (value) { // 判断状态
  164.  if (TFly.status == "on") return;
  166.  // 如果 popup 已经显示，则显示延时为 0
  167.     // 例如从一个菜单移动到另外一个菜单
  168.     var timeout = (TFly.status == "active") ? 0 : TFly.popupLatency;
  170.  if (TFly.AnyIter > 0 && TFly.AnyTime > 0)
  171.  TFly.timer = window.setTimeout(function() {TFly_AnimateStart(TFly, true, TFly.F.curIter);}, timeout);
  172.  else
  173.  TFly.timer = window.setTimeout(function() {TFly_SetVisibility(TFly, true);}, timeout);
  175.  } else {
  176.  if (TFly.status == "off") return;
  178.  var timeout = (TFly.status == "active") ? 0 : TFly.hideLatency;
  180.  if (TFly.AnyIter > 0 && TFly.AnyTime > 0)
  181.  TFly.timer = window.setTimeout(function() {TFly_AnimateStart(TFly, false, TFly.F.curIter);}, timeout);
  182.  else
  183.  TFly.timer = window.setTimeout(function() {TFly_SetVisibility(TFly, false);}, timeout);
  184.  }
  185. }
  187. // 设置弹出内容的可见性
  188. function TFly_SetVisibility(TFly, value) {
  189.  if (value == true) {
  190.  TFly_SetPosition(TFly, TFly.DT);
  191.  TFly.DT.style.visibility = "visible";
  192.  TFly.style.zIndex = "999";
  193.  } else {
  194.  TFly.DT.style.visibility = "hidden";
  195.  TFly.style.zIndex = "0";
  196.  TFly.DT.style.left = "-10000px";
  197.  }
  198. }
  200. function TFly_AnimateStart (TFly, inout, curIter) {
  201.  if (TFly.F.timer != null) window.clearTimeout(TFly.F.timer);
  203.  if (curIter == null) curIter=0;
  205.  if (TFly.status != "active") {
  206.  TFly.status = "active";
  207.  TFly.F.style.visibility = "visible";
  208.  TFly.DT.style.visibility = "hidden";
  209.  }
  211.  if (curIter < 0 || curIter > TFly.AnyIter) {
  212.  TFly.F.curIter = (curIter < 1) ? 0 : TFly.AnyIter;
  213.  TFly.status = (TFly.F.curIter == TFly.AnyIter) ? "on": "off";
  214.  TFly.F.style.visibility = "hidden";
  215.  TFly_SetPosition(TFly, TFly.DT);
  216.  TFly.style.zIndex = (TFly.F.curIter == TFly.AnyIter) ? "999" : "0";
  218.  if (TFly.F.curIter == TFly.AnyIter) {
  219.  TFly.status = "on";
  220.  TFly_SetVisibility(TFly, true);
  221.  TFly_CallClientFunction(TFly.onPopup, TFly);
  222.  } else {
  223.  TFly.status = "off";
  224.  TFly_SetVisibility(TFly, false);
  225.  TFly_CallClientFunction(TFly.onHide, TFly);
  226.  }
  227.  } else {
  228.  var per = curIter * (95 / TFly.AnyIter) + 5;
  229.  TFly.F.style.visibility = "hidden";
  230.  TFly.F.style.width = TFly.DT.offsetWidth / 100 * per + "px";
  231.  TFly.F.style.height = TFly.DT.offsetHeight / 100 * per + "px";
  232.  TFly_SetPosition(TFly, TFly.F);
  233.  TFly.F.style.visibility = "visible";
  234.  var timeout = (per == 100 ) ? 0 : TFly.AnyTime - (TFly.AnyTime / (TFly.AnyIter) * (curIter));
  235.  curIter += (inout) ? 1 : -1;
  236.  TFly.F.timer = window.setTimeout(function() {TFly_AnimateStart(TFly, inout, curIter)}, timeout);
  237.  TFly.F.curIter = curIter;
  238.  }
  239. }
  240. </script>
  241. </head>
  243. <body>
  244.           
  246. <div style="display:inline;vertical-align:middle">
  247.   <div class="LocaleManagementFlyoutStatic_msdn" style="position:relative;" id="LocaleManagement">
  248.     <a class="LocaleManagementFlyoutStaticLink_msdn" href="javascript:void(0)">United States - English </a><img class="LocaleManagementFlyoutPopArrow" src="http://msdn2.microsoft.com/msdn/Controls/UserRecognitionFlyout/en-us/popdownarrow-msdn-left.gif" alt="Dropdown Arrow" style="height:4px;width:7px;border-width:0px;" /><div id="LocaleManagement_Popup" class="LocaleManagementFlyoutPopup" style="position: absolute;visibility:hidden;left:-65534px;">
  249.       <table border="0" style="width:175px;">
  250.         <tr>
  251.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl05','')">Australia (English)</a></td>
  252.         </tr><tr>
  253.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl06','')">Brasil (Portugués)</a></td>
  255.         </tr><tr>
  256.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl07','')">Canada (English)</a></td>
  257.         </tr><tr>
  258.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl08','')">Canada (Fran?ais)</a></td>
  259.         </tr><tr>
  260.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl09','')">中国 (简体中文)</a></td>
  261.         </tr><tr>
  263.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl10','')">Deutschland (Deutsch)</a></td>
  264.         </tr><tr>
  265.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl11','')">France (Fran?ais)</a></td>
  266.         </tr><tr>
  267.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl12','')">India (English)</a></td>
  268.         </tr><tr>
  269.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl13','')">Россия (Pусский)</a></td>
  271.         </tr><tr>
  272.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl14','')">United Kingdom (English)</a></td>
  273.         </tr><tr>
  274.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl15','')">United States (English)</a></td>
  275.         </tr><tr>
  276.           <td class="LocaleManagementFlyoutPopupHr"></td>
  277.         </tr><tr>
  278.       
  279.             <td><a href="#" target=_blank>更多</a></td>
  280.         </tr>
  281.       </table></div>
  282.       <div id="LocaleManagement_Anim" class="TFlyPopupAnimate"></div>
  283.   </div>
  284.   
  285. </div>
  287. <script>
  288. TFly_Init('LocaleManagement', 0, 0, -1, 2, 60, 'LocaleManagementFlyoutStaticHover_msdn', '', 100, 400, '', '', '');
  289. </script>
  290. </body>
  291. </html>

再来一个例子

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>MSND menu</title>
  5. <meta name="Generator" content="EditPlus">
  6. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  7. <meta name="Author" content="">
  8. <meta name="Keywords" content="">
  9. <meta name="Description" content="">
  10. <style>
  11. .LocaleManagementFlyoutPopup {
  12.  font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
  13.   border:1px solid #666666;
  14.   padding: 3px 3px 3px 3px;
  15.   text-align: left;
  16.   background-color: #FFFFFF;
  17.   z-index: 10;
  18.   opacity: .95;
  19.   filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=2,OffY=2,Color='silver',Positive='true') alpha(opacity=95);
  20. }
  22. .LocaleManagementFlyoutPopup A, .LocaleManagementFlyoutPopup A:visited {
  23.   font-size: 10px;
  24.   color: #000000;
  25.   cursor: hand;
  26.   border: 1px solid #FFFFFF;
  27.   padding: 1px 3px 1px 3px;
  28.   height: 15px;
  29.   text-align: left;
  30.   text-decoration: none;
  31.   white-space: nowrap;
  32.   display: block;
  33. }
  35. .LocaleManagementFlyoutPopup A:hover {
  36.   background-color: #f0f7fd;
  37.   color: #000000;
  38.   cursor: hand;
  39.   border: 1px solid #addbef;
  40.   padding: 1px 3px 1px 3px;
  41.   height: 15px;
  42.   text-decoration: none;
  43.   white-space: nowrap;
  44.   display: block;
  45. }
  47. .LocaleManagementFlyoutPopupHr {
  48.  height: 1px;
  49.  background: #d0e0f0;
  50.  margin: 0px 11px 21px 11px;
  51. }
  53. .LocaleManagementFlyoutPopArrow {
  54.   margin: 4px 0px 0px 0px;
  55. }
  57. .LocaleManagementFlyoutStatic_msdn {
  58.  border: 1px solid #ffffff;
  59. }
  61. .LocaleManagementFlyoutStaticHover_msdn {
  62.  border: 1px solid #addbef;
  63. }
  65. .TFlyPopupAnimate {
  66.  position: absolute;
  67.  display: block;
  68.  border: 1px solid gray;
  69.  overflow: hidden;
  70.  visibility: hidden;
  71.  margin: 0;
  72.  padding: 0;
  73.  z-index: 1;
  74. }
  75. </style>
  76. <script>
  77. /*
  78. name 对象的 id 值
  79. offsetLeft 定位：左 - 偏移量
  80. offsetTop 定位：顶部 - 偏移量
  81. alignment 对齐方式{-1: left; 0: center; 1: right}
  82. anyIter 显示方式(<=0: 普通样式; >0: 缩放样式)
  83. anyTime 动画时间间隔
  84. staticHover 鼠标覆盖时的样式
  85. popupHover 显示内容鼠标覆盖时的样式
  86. popupLatency 显示内容延时
  87. hideLatency 隐藏内容延时
  88. onInit 初始化
  89. onPopup 显示内容时行为
  90. onHide 隐藏内容时行为
  91. */
  92. function TFly_Init(name, offsetLeft, offsetTop, alignment, anyIter, anyTime, staticHover, popupHover, popupLatency, hideLatency, onInit, onPopup, onHide) {
  93.  var TFly = document.getElementById(name);
  94.  TFly.DT = document.getElementById(name + "_Popup"); // 显示内容对象
  95.  TFly.F = document.getElementById(name + "_Anim"); // 动画效果对象
  96.  TFly.oX = offsetLeft;
  97.  TFly.oY = offsetTop;
  98.  TFly.alignment = alignment;
  99.  TFly.AnyIter = anyIter;
  100.  TFly.AnyTime = anyTime;
  102.  TFly.popupLatency = popupLatency;
  103.  TFly.hideLatency = hideLatency;
  104.  TFly.onPopup = onPopup;
  105.  TFly.onHide = onHide;
  107.  TFly.onmouseover = function() {
  108.  if (staticHover != '') { // 替换样式，并储存原来的样式
  109.      TFly.className_ = TFly.className;
  110.       TFly.className = staticHover;
  111.     }
  112.  TFly_Popup(TFly, true);
  113.   }
  115.  TFly.onmouseout = function() {
  116.    if (staticHover != '') { // 恢复原来的样式
  117.      TFly.className = TFly.className_;
  118.     }
  119.     TFly_Popup(TFly, false);
  120.   }
  122.  if (document.all) {
  123.  TFly.onactivate = TFly.onmouseover;
  124.  TFly.ondeactivate = TFly.onmouseout;
  125.  } else {
  126.  TFly.onfocus = TFly.onmouseover;
  127.  TFly.onblur = TFly.onmouseout;
  128.  }
  130.  TFly.DT.onmouseover = function() {
  131.  if (popupHover != '') {
  132.      TFly.DT.className_ = TFly.DT.className;
  133.       TFly.DT.className = popupHover;
  134.     }
  135.     TFly_Popup(TFly, true);
  136.   }
  138.  TFly.DT.onmouseout = function() {
  139.    if (popupHover != '') {
  140.  TFly.DT.className = TFly.DT.className_;
  141.     }
  142.    TFly_Popup(TFly, false);
  143.  }
  145.  TFly_CallClientFunction(onInit, TFly);
  146. }
  148. // 调用初始化程序
  149. function TFly_CallClientFunction(name, TFly) {
  150.  if (name != null && name != "")
  151.  eval(name + "(TFly);");
  152. }
  154. // 定位
  155. function TFly_SetPosition(TFly, obj) {
  156.  obj.style.top = TFly.oY + TFly.offsetHeight + "px";
  157.  obj.style.left = TFly.oX + (TFly.offsetWidth - obj.offsetWidth ) * (1 + TFly.alignment) / 2 + "px";
  158. }
  160. function TFly_Popup(TFly, value) {
  161.  if (TFly.timer != null) window.clearTimeout(TFly.timer); // 清除超时
  163.  if (value) { // 判断状态
  164.  if (TFly.status == "on") return;
  166.  // 如果 popup 已经显示，则显示延时为 0
  167.     // 例如从一个菜单移动到另外一个菜单
  168.     var timeout = (TFly.status == "active") ? 0 : TFly.popupLatency;
  170.  if (TFly.AnyIter > 0 && TFly.AnyTime > 0)
  171.  TFly.timer = window.setTimeout(function() {TFly_AnimateStart(TFly, true, TFly.F.curIter);}, timeout);
  172.  else
  173.  TFly.timer = window.setTimeout(function() {TFly_SetVisibility(TFly, true);}, timeout);
  175.  } else {
  176.  if (TFly.status == "off") return;
  178.  var timeout = (TFly.status == "active") ? 0 : TFly.hideLatency;
  180.  if (TFly.AnyIter > 0 && TFly.AnyTime > 0)
  181.  TFly.timer = window.setTimeout(function() {TFly_AnimateStart(TFly, false, TFly.F.curIter);}, timeout);
  182.  else
  183.  TFly.timer = window.setTimeout(function() {TFly_SetVisibility(TFly, false);}, timeout);
  184.  }
  185. }
  187. // 设置弹出内容的可见性
  188. function TFly_SetVisibility(TFly, value) {
  189.  if (value == true) {
  190.  TFly_SetPosition(TFly, TFly.DT);
  191.  TFly.DT.style.visibility = "visible";
  192.  TFly.style.zIndex = "999";
  193.  } else {
  194.  TFly.DT.style.visibility = "hidden";
  195.  TFly.style.zIndex = "0";
  196.  TFly.DT.style.left = "-10000px";
  197.  }
  198. }
  200. function TFly_AnimateStart (TFly, inout, curIter) {
  201.  if (TFly.F.timer != null) window.clearTimeout(TFly.F.timer);
  203.  if (curIter == null) curIter=0;
  205.  if (TFly.status != "active") {
  206.  TFly.status = "active";
  207.  TFly.F.style.visibility = "visible";
  208.  TFly.DT.style.visibility = "hidden";
  209.  }
  211.  if (curIter < 0 || curIter > TFly.AnyIter) {
  212.  TFly.F.curIter = (curIter < 1) ? 0 : TFly.AnyIter;
  213.  TFly.status = (TFly.F.curIter == TFly.AnyIter) ? "on": "off";
  214.  TFly.F.style.visibility = "hidden";
  215.  TFly_SetPosition(TFly, TFly.DT);
  216.  TFly.style.zIndex = (TFly.F.curIter == TFly.AnyIter) ? "999" : "0";
  218.  if (TFly.F.curIter == TFly.AnyIter) {
  219.  TFly.status = "on";
  220.  TFly_SetVisibility(TFly, true);
  221.  TFly_CallClientFunction(TFly.onPopup, TFly);
  222.  } else {
  223.  TFly.status = "off";
  224.  TFly_SetVisibility(TFly, false);
  225.  TFly_CallClientFunction(TFly.onHide, TFly);
  226.  }
  227.  } else {
  228.  var per = curIter * (95 / TFly.AnyIter) + 5;
  229.  TFly.F.style.visibility = "hidden";
  230.  TFly.F.style.width = TFly.DT.offsetWidth / 100 * per + "px";
  231.  TFly.F.style.height = TFly.DT.offsetHeight / 100 * per + "px";
  232.  TFly_SetPosition(TFly, TFly.F);
  233.  TFly.F.style.visibility = "visible";
  234.  var timeout = (per == 100 ) ? 0 : TFly.AnyTime - (TFly.AnyTime / (TFly.AnyIter) * (curIter));
  235.  curIter += (inout) ? 1 : -1;
  236.  TFly.F.timer = window.setTimeout(function() {TFly_AnimateStart(TFly, inout, curIter)}, timeout);
  237.  TFly.F.curIter = curIter;
  238.  }
  239. }
  240. </script>
  241. </head>
  243. <body>
  244.           
  246. <div style="display:inline;vertical-align:middle">
  247.   <div class="LocaleManagementFlyoutStatic_msdn" style="position:relative;" id="LocaleManagement">
  248.     <a class="LocaleManagementFlyoutStaticLink_msdn" href="javascript:void(0)">United States - English </a><img class="LocaleManagementFlyoutPopArrow" src="http://msdn2.microsoft.com/msdn/Controls/UserRecognitionFlyout/en-us/popdownarrow-msdn-left.gif" alt="Dropdown Arrow" style="height:4px;width:7px;border-width:0px;" /><div id="LocaleManagement_Popup" class="LocaleManagementFlyoutPopup" style="position: absolute;visibility:hidden;left:-65534px;">
  249.       <table border="0" style="width:175px;">
  250.         <tr>
  251.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl05','')">Australia (English)</a></td>
  252.         </tr><tr>
  253.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl06','')">Brasil (Portugués)</a></td>
  255.         </tr><tr>
  256.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl07','')">Canada (English)</a></td>
  257.         </tr><tr>
  258.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl08','')">Canada (Fran?ais)</a></td>
  259.         </tr><tr>
  260.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl09','')">中国 (简体中文)</a></td>
  261.         </tr><tr>
  263.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl10','')">Deutschland (Deutsch)</a></td>
  264.         </tr><tr>
  265.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl11','')">France (Fran?ais)</a></td>
  266.         </tr><tr>
  267.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl12','')">India (English)</a></td>
  268.         </tr><tr>
  269.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl13','')">Россия (Pусский)</a></td>
  271.         </tr><tr>
  272.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl14','')">United Kingdom (English)</a></td>
  273.         </tr><tr>
  274.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl15','')">United States (English)</a></td>
  275.         </tr><tr>
  276.           <td class="LocaleManagementFlyoutPopupHr"></td>
  277.         </tr><tr>
  278.       
  279.             <td><a href="#" target=_blank>更多</a></td>
  280.         </tr>
  281.       </table></div>
  282.       <div id="LocaleManagement_Anim" class="TFlyPopupAnimate"></div>
  283.   </div>
  284.   
  285. </div>
  287. <script>
  288. TFly_Init('LocaleManagement', 0, 0, -1, 2, 60, 'LocaleManagementFlyoutStaticHover_msdn', '', 100, 400, '', '', '');
  289. </script>
  292. </body>
  293. </html>
分享到：
| Javascript 弹出窗口大全（转载三篇）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript网页键盘交互式代码

    以上内容只是JavaScript键盘交互的基础。实际上，你可以通过更多的技术，如防抖(debounce)或节流(throttle)来优化性能，或者利用CSS和HTML5 API来增强用户体验。总之，JavaScript提供了强大的能力，使网页能够响应...

    javascript表单事件汇总

    在深入探讨《javascript表单事件汇总》这一主题之前，我们首先需要理解JavaScript作为一种广泛应用于网页开发的脚本语言，如何通过处理各种事件来增强用户体验、实现动态交互效果。本文将详细解析一系列重要的...

    javascript键盘响应事件

    一、原生JavaScript键盘事件 1. `keydown`事件：当用户按下键盘上的一个键时触发。 2. `keyup`事件：当用户释放键盘上的一个键时触发。 3. `keypress`事件：对于可打印字符，此事件在`keydown`之后、`keyup`之前...

    javascript键盘事件全面控制脚本代码.docx

    ### JavaScript键盘事件全面控制脚本知识点解析 #### 一、概述 在JavaScript中，通过键盘事件可以捕捉用户的键盘输入行为，这对于开发具有交互性的Web应用至关重要。本文将深入探讨如何利用JavaScript来全面控制...

    JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例

    在JavaScript中，事件（Events）是用户或浏览器与页面交互时触发的特定动作，比如点击按钮、按下键盘上的键或者移动鼠标。本文将详细介绍如何使用JavaScript处理HTML事件、键盘事件和鼠标事件。 ### HTML事件处理 ...

    javaScript鼠标键盘事件

    ### JavaScript鼠标键盘事件详解 在Web开发中，JavaScript是实现用户交互的重要手段之一。通过监听用户的鼠标和键盘操作，开发者可以构建出响应式且交互丰富的网页应用。本文将重点介绍几种常用的鼠标和键盘事件...

    JavaScript 操作键盘的Enter事件（键盘任何事件），兼容多浏览器.docx

    在 Web 开发中，JavaScript 操作键盘的 Enter 事件是一种常见的交互方式，例如，在登录页面中，按下 Enter 键 submitting 表单。在多浏览器环境下，实现这种交互方式需要特殊处理。本文将介绍如何使用 JavaScript ...

    jquery 监听 键盘 事件

    在JavaScript的世界里，jQuery库为开发者提供了方便快捷的方式来操作DOM、处理事件、执行动画和Ajax交互。其中，监听键盘事件是常见的用户交互处理之一。本文将深入探讨如何使用jQuery来监听键盘事件，以及相关的...

    JavaScript+jQuery交互式Web前端开发-源代码.zip

    JavaScript 和 jQuery 是现代 Web 前端开发中的两个核心工具，它们共同为创建动态、交互式的网页提供了强大的功能。在本教程中，我们将深入探讨如何将这两种技术与 HTML 和 CSS 结合，以实现高效的网页设计。 ...

    JS网页键盘交互式代码.zip

    通过学习和理解这些代码，开发者可以更好地掌握JavaScript中的键盘事件处理，并将其运用到自己的项目中，提升网页的交互性和用户体验。 总的来说，JS网页键盘交互式代码是JavaScript编程中的一个重要组成部分，它...

    JavaScript程序设计——事件处理实验报告.docx

    实验报告详细介绍了JavaScript事件处理的相关知识，这在Web开发中是非常关键的一部分，因为事件是用户与网页交互的主要方式。以下是对各个知识点的详细说明： 1. **JavaScript事件基本概念**： - **事件**：是用户...

    asp.net控制键盘keycode事件

    键盘事件是浏览器中的JavaScript事件，它们允许我们对用户的键盘操作做出响应。常见的键盘事件有`keydown`、`keyup`和`keypress`。`keydown`事件在用户按下键盘键时触发，`keyup`则在用户释放键时触发，`keypress`...

    javascript的事件大全

    JavaScript事件是JavaScript编程中非常重要的一个概念，它涉及到用户与网页交互的响应机制。事件是用户或浏览器执行特定操作时触发的代码执行点。以下是对JavaScript事件大全的详细解释： 1. 鼠标事件： - onClick...

    Javascript接收键盘输入

    在探讨“Javascript接收键盘输入”这一主题时，我们首先需要理解JavaScript如何与用户进行交互，尤其是在接收用户通过键盘输入信息的场景下。JavaScript是一种广泛应用于网页开发中的脚本语言，它能够实现动态交互...

    JavaScript常用事件

    JavaScript事件是编程中的一种机制，它允许我们对用户在网页上的交互进行响应。这些事件可以是用户的行为，如点击按钮、滚动页面或填写表单，也可以是浏览器内部的状态变化，如页面加载完成或图片加载失败。理解并...

    javascript表单美化和验证插件

    JavaScript 表单美化和验证插件是Web开发中不可或缺的一部分，尤其在构建用户友好且具有交互性的网页时。这类插件通常提供丰富的功能，以提升表单的视觉吸引力和用户体验，同时确保数据的有效性。本插件具备以下关键...

    Javascript软键盘

    1. 自定义脚本：开发者可以手动编写JavaScript代码，定义键盘布局、按键功能以及响应用户交互的事件处理函数。这种方法需要一定的JavaScript基础，但具有高度的灵活性和可定制性。 2. 使用现成的库：市面上存在许多...

    html.rar_html javascript_键盘

    HTML 和 JavaScript 是构建网页交互性的重要工具，而键盘事件是实现用户与网页动态交互的关键环节。在本主题中，我们将深入探讨如何利用 HTML 和 JavaScript 实现对用户键盘输入的监听和处理。 首先，HTML 是超文本...

    Javascript鼠标事件汇总

    ### JavaScript鼠标事件汇总详解 #### 一、基本概念与作用 在前端开发中，JavaScript（简称JS）作为主要的脚本语言，对于处理用户交互至关重要。鼠标事件是JS中最常见的一种事件类型，它能帮助开发者捕捉用户的...

    javascript 和HTML交互.ppt

    3. **键盘和鼠标事件**：键盘事件如`keydown`、`keyup`和`keypress`，鼠标事件如`click`、`mouseover`、`mouseout`、`mousedown`和`mouseup`，它们提供了对用户输入的响应机制，使网页具备更丰富的交互体验。...

Magicbox
Global site tag (gtag.js) - Google Analytics