zoukankan      html  css  js  c++  java

  • 键盘控制层的移动javascript

    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>键盘控制层的移动</title> 
    <style type="text/css"> 
    <!-- 
    #Div     { 
    position    :absolute; 
    width    :238px; 
    height    :135px; 
    left    :expression((body.clientWidth - this.offsetWidth)/2); 
    top    :expression((body.clientHeight - this.offsetHeight)/2); 
    z-index    :1; 
    text-align    :center; 
    background    :#AFDBFF; 
    border    :#006699 1px solid; 
    } 
    #Txt    { 
    font-size    :9pt; 
    position    :absolute; 
    width    :200px; 
    top    :expression((Div.offsetHeight - this.offsetHeight)/2); 
    left    :expression((Div.offsetWidth - this.offsetWidth)/2); 
    } 
    #Txt p    { 
    font-size    :9pt; 
    margin    :8px; 
    } 
    #Txt font    { 
    color    :#FF0000; 
    font-size    :9pt; 
    } 
    #Layer1     { 
    border    :#006699 1px solid; 
    padding    :10px; 
    font-size    :9pt; 
    color    :#336699; 
    position    :absolute; 
    top    :expression((body.clientHeight - this.offsetHeight)/2); 
    left    :expression((body.clientWidth - this.offsetWidth)/2 + Div.offsetWidth); 
    } 
    #Layer1 Input     { 
    font-size    :9pt; 
    color    :#336699; 
    } 
    #Int     { 
    text-align    :right; 
    } 
    --> 
    </style> 
    </head> 
    <body> 
    <div id="Div"><span id="Txt">请分别按下 <font>↑</font>、<font>↓</font>、<font>←</font>、<font>→</font>， 
    试试看有什么效果？     </span></div> 
    <span id="Layer1">控制键设置:
     
    向上移动: 
    <input name="Up" type="text" value="↑" size="6">
     
    向下移动: 
    <input name="Down" type="text" value="↓" size="6">
     
    向左移动: 
    <input name="Left" type="text" value="←" size="6">
     
    向右移动: 
    <input name="Right" type="text" value="→" size="6">
     
    每次移动      <input name="Int" type="text" id="Int" value="5" size="4" maxlength="3"> 
    px;    </span> 
    </body> 
    </html> 
    <script language="javascript"> 
    <!-- 
    //alert(txt.style.top); 
    var up,down,left,right; 
    up     = 38; 
    down     = 40; 
    left     = 37; 
    right     = 39; 
    function document.onkeydown() 
    { 
    // alert(event.keyCode); 
    //    左：37 上：38 右：39 下：40 
    var int; 
    int = parseInt(document.getElementById("Int").value); 
    if(int == "NaN") 
          int = 5; 
    var str = "",press,evet; 
    var div = document.getElementById("Div"); 
    var txt = document.getElementById("Txt"); 
    if(event.srcElement.tagName == "INPUT") 
    { 
          if(event.srcElement == document.getElementById("Int")) 
      { 
          if(event.keyCode == 13) 
        document.body.focus(); 
          if((event.keyCode < 96 || event.keyCode > 105) && event.keyCode != 8 && event.keyCode != 46 && !(event.keyCode >= 37 && event.keyCode <= 40) ) 
        event.returnValue     = false; 
            return; 
      } 
          else 
      { 
          switch(event.keyCode) 
      { 
            case 37:{ 
        event.srcElement.value     = "←"; 
            break; 
        } 
            case 38:{ 
        event.srcElement.value     = "↑"; 
            break; 
        } 
            case 39:{ 
        event.srcElement.value     = "→"; 
            break; 
        } 
            case 40:{ 
        event.srcElement.value     = "↓"; 
            break; 
        } 
      } 
          switch(event.srcElement) 
      { 
            case document.getElementById("Up"):{ 
        up     = event.keyCode; 
            break; 
        } 
            case document.getElementById("Down"):{ 
        down     = event.keyCode; 
            break; 
        } 
            case document.getElementById("Left"):{ 
        left     = event.keyCode; 
            break; 
        } 
            case document.getElementById("Right"):{ 
        right     = event.keyCode; 
            break; 
        } 
      } 
      } 
    } 
    else 
    { 
          switch(event.keyCode) 
      { 
          case left:{ 
      press     = "<font> ← </font>"; 
      evet     = "<font>向 <b>左</b> 移动</font>" + " " + int + " px 。"; 
      div.style.left     = (parseInt(div.currentStyle.left) - int) + "px"; 
          if(parseInt(div.style.left) <= 0) 
      { 
        evet     = "已经到了 <font>最左边</font> ，无法再 <font>向左</font> 移动。"; 
        div.style.left     = "0px"; 
            break ; 
      } 
          break; 
      } 
          case up:{ 
      press     = "<font> ↑ </font>"; 
      evet     = "<font>向 <b>上</b> 移动</font>" + " " + int + " px 。"; 
      div.style.top     = (parseInt(div.currentStyle.top) - int) + "px"; 
          if(parseInt(div.style.top) <= 0) 
      { 
        evet     = "已经到了 <font>最上边</font> ，无法再 <font>向上</font> 移动。"; 
        div.style.top     = "0px"; 
            break ; 
      } 
          break; 
      } 
          case right:{ 
      press     = "<font> → </font>"; 
      evet     = "<font>向 <b>右</b> 移动</font>" + " " + int + " px 。"; 
      div.style.left     = (parseInt(div.currentStyle.left) + int) + "px"; 
          if(parseInt(div.style.left) >= (parseInt(document.body.clientWidth) - parseInt(div.offsetWidth))) 
      { 
        div.style.left     = parseInt(document.body.clientWidth) - parseInt(div.offsetWidth); 
        evet     = "已经到了 <font>最右边</font> ，无法再 <font>向右</font> 移动。"; 
            break ; 
      } 
          break; 
      } 
          case down:{ 
      press     = "<font> ↓ </font>"; 
      evet     = "<font>向 <b>下</b> 移动</font>" + " " + int + " px 。"; 
      div.style.top     = (parseInt(div.currentStyle.top) + int) + "px"; 
          if(parseInt(div.style.top) >= (parseInt(document.body.clientHeight) - parseInt(div.offsetHeight))) 
      { 
        div.style.top     = parseInt(document.body.clientHeight) - parseInt(div.offsetHeight); 
        evet     = "已经到了 <font>最下边</font> ，无法再 <font>向下</font> 移动。"; 
            break ; 
      } 
          break; 
      } 
          default: 
      { 
          return; 
      } 
      } 
      str     = "您按下了" + press + "键，"; 
      str     += "该图层" + evet; 
      txt.innerHTML     = str; 
    } 
    } 
    //--> 
    </script>
    该文章转载自脚本之家：http://www.jb51.net/html/200704/23/9534.htm
  • 相关阅读:
    网站页面性能优化的 34条黄金守则 (雅虎团队经验)
    进程调度算法小结
    玩转TCP连接
    数据包在网络中的流转
    浅入理解JVM虚拟机
    Leecode no.47 全排列 II
    Leecode no.143 重排链表
    关于我用设计模式对公司代码重构的这件事
    进程间通信方式小结
    Leecode no.82 删除排序链表中的重复元素 II
  • 原文地址：https://www.cnblogs.com/jenry/p/730628.html
Copyright © 2011-2022 走看看