你的位置:首页 > Java教程

[Java教程]通过上下左右键控制div的运行方向


通过上下左右键控制div的运行方向:
使用小键盘附近的上下左右键控制方向可能在很多应用程序中都有用到,有时候甚至特别的方便,比如有些游戏可以使用者四个键控制方位,下面就简单介绍一下javascript如何实现使用这四个键控制div的运动方向。

 

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>方向键控制div的移动-蚂蚁部落</title><style type="text/css">html, body { overflow:hidden;}body { margin:0; padding:0;}pre { color:green; padding:10px 15px; background:#f0f0f0; border:1px dotted #333; font:12px/1.5 Courier New; margin:12px;}span { color:#999;}#box { position:absolute; top:50px; left:300px; width:100px; height:100px; background:red;}</style><script type="text/javascript"> window.onload=function(){ var oBox=document.getElementById("box"); var bLeft=bTop=bRight=bBottom=bCtrlKey=false; function run() {  if(bLeft)  {   oBox.style.left=oBox.offsetLeft-10+"px"  }  else if(bRight)  {   oBox.style.left = oBox.offsetLeft+10+"px"  }  if(bTop)  {   oBox.style.top = oBox.offsetTop - 10 + "px"  }  else if(bBottom)  {   oBox.style.top = oBox.offsetTop + 10 + "px"  }  //防止溢出  limit(); }  setInterval(run,30);  document.onkeydown=function(event) {  var event=event||window.event;  bCtrlKey=event.ctrlKey;    switch (event.keyCode)  {   case 37:   bLeft=true;   break;   case 38:   if(bCtrlKey)   {    var oldWidth=oBox.offsetWidth;    var oldHeight=oBox.offsetHeight;       oBox.style.width = oBox.offsetWidth * 1.5 + "px";    oBox.style.height = oBox.offsetHeight * 1.5 + "px";         oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 + "px";    oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 + "px";       break;   }   bTop=true;   break;   case 39:   bRight = true;   break;   case 40:   if(bCtrlKey)   {    var oldWidth = oBox.offsetWidth;    var oldHeight = oBox.offsetHeight;       oBox.style.width = oBox.offsetWidth * 0.75 + "px";    oBox.style.height = oBox.offsetHeight * 0.75 + "px";         oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 + "px";    oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 + "px";       break;   }   bBottom = true;   break;   case 49:   bCtrlKey && (oBox.style.background = "green");   break;   case 50:   bCtrlKey && (oBox.style.background = "yellow");   break;   case 51:   bCtrlKey && (oBox.style.background = "blue");   break;  }  return false };  document.onkeyup=function (event) {  switch ((event || window.event).keyCode)  {   case 37:   bLeft = false;   break;   case 38:   bTop = false;   break;   case 39:   bRight = false;   break;   case 40:   bBottom = false;   break;  } };  //防止溢出 function limit() {  var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight]  //防止左侧溢出  oBox.offsetLeft <=0 && (oBox.style.left = 0);  //防止顶部溢出  oBox.offsetTop <=0 && (oBox.style.top = 0);  //防止右侧溢出  doc[0] - oBox.offsetLeft - oBox.offsetWidth <= 0 && (oBox.style.left = doc[0] - oBox.offsetWidth + "px");  //防止底部溢出  doc[1] - oBox.offsetTop - oBox.offsetHeight <= 0 && (oBox.style.top = doc[1] - oBox.offsetHeight + "px") }};</script></head><body><pre>红色方块为键盘操作区域,您可以进行如下操作:上:↑ 下:↓ 左:← 右:→Ctrl + 1 : 背景变为绿色Ctrl + 2 : 背景变为黄色Ctrl + 3 : 背景变为蓝色Ctrl + ↑ : 放大Ctrl + ↓ : 缩小</pre><div id="box"></div></body></html>

 

以上代码实现了我们需要的功能,不但可以控制div的运动方向,而且还可以设置div的背景颜色和大小。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9158

更多内容可以参阅:http://www.softwhy.com/javascript/