源码网商城，靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

申请开店
全部源码分类
首页 源码街 任务需求 版权中心 备案服务 商家入驻

javascript下用键盘控制层的移动的代码

  • 时间：2021-12-07 10:36 编辑： 来源： 阅读：
  • 扫一扫，手机访问
摘要：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"><p>请分别按下 <font>↑</font>、<font>↓</font>、<font>←</font>、<font>→</font>，</p><p> 试试看有什么效果？ </p></span></div> <span id="Layer1">控制键设置:<br> 向上移动: <input name="Up" type="text" value="↑" size="6"><br> 向下移动: <input name="Down" type="text" value="↓" size="6"><br> 向左移动: <input name="Left" type="text" value="←" size="6"><br> 向右移动: <input name="Right" type="text" value="→" size="6"><br> 每次移动  <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 = "<p>您按下了" + press + "键，</p>";   str += "<p>该图层" + evet;   txt.innerHTML = str; } } //--> </script>
[Ctrl+A 全选 注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]
  • 全部评论(0)
上一篇：JS中令人发指的valueOf方法介绍
下一篇：Use Word to Search for Files
关于我们 | 广告合作 | 联系我们 | 隐私条款 | 免责声明 | 网站地图

苏ICP备2024110244号-2      苏公网安备32050702011978号      增值电信业务经营许可证编号：苏B2-20251499   |  Copyright 2018 - 2025   源码网商城 (www.ymwmall.com) 版权所有

联系客服
客服电话：
400-000-3129
微信版

扫一扫进微信版
返回顶部