UDN-企业互联网技术人气社区

板块导航

浏览  : 858
回复  : 2

[原生js] js实现键盘控制DIV移动的方法

[复制链接]
牛娜的头像 楼主
发表于 2017-1-8 13:40:32 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了js实现键盘控制DIV移动的方法,以实例形式完整的讲述了js控制div移动所涉及的css、js与html使用技巧,需要的朋友可以参考下

  本文实例讲述了js实现键盘控制DIV移动的方法。分享给大家供大家参考。具体分析如下:
  
  css样式部分:
  
  复制代码 代码如下:
  1. <style type="text/css">

  2. html,body{overflow:hidden;}

  3. body{margin:0;padding:0;}

  4. pre{color:green;padding:10px 15px;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;margin:12px;}

  5. span{color:#999;}

  6. #box{position:absolute;top:50px;left:300px;width:100px;height:100px;background:red;}

  7. </style>
复制代码

  js部分:
  
  复制代码 代码如下:
  1. <script type="text/JavaScript">

  2. window.onload = function ()

  3. {

  4. var oBox = document.getElementById("box");

  5. var bLeft = bTop = bRight = bBottom = bCtrlKey = false;
  6. setInterval(function ()

  7. {

  8. if (bLeft)

  9. {

  10. oBox.style.left = oBox.offsetLeft - 10 + "px"

  11. }

  12. else if (bRight)

  13. {

  14. oBox.style.left = oBox.offsetLeft + 10 + "px"

  15. }
  16. if (bTop)

  17. {

  18. oBox.style.top = oBox.offsetTop - 10 + "px" 

  19. }

  20. else if(bBottom)

  21. {

  22. oBox.style.top = oBox.offsetTop + 10 + "px"

  23. }

  24. //防止溢出

  25. limit();

  26. },30); 
  27. document.onkeydown = function (event)

  28. {

  29. var event = event || window.event;

  30. bCtrlKey = event.ctrlKey;
  31. switch (event.keyCode)

  32. {

  33. case 37:

  34. bLeft = true;

  35. break;

  36. case 38:

  37. if(bCtrlKey)

  38. {

  39. var oldWidth = oBox.offsetWidth;

  40. var oldHeight = oBox.offsetHeight;
  41. oBox.style.width = oBox.offsetWidth * 1.5 + "px";

  42. oBox.style.height = oBox.offsetHeight * 1.5 + "px"; 
  43. oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 + "px";

  44. oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 + "px";
  45. break; 

  46. }

  47. bTop = true;

  48. break;

  49. case 39:

  50. bRight = true;

  51. break;

  52. case 40:

  53. if(bCtrlKey)

  54. {

  55. var oldWidth = oBox.offsetWidth;

  56. var oldHeight = oBox.offsetHeight;
  57. oBox.style.width = oBox.offsetWidth * 0.75 + "px";

  58. oBox.style.height = oBox.offsetHeight * 0.75 + "px"; 
  59. oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 + "px";

  60. oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 + "px";
  61. break; 

  62. }

  63. bBottom = true;

  64. break;

  65. case 49:

  66. bCtrlKey && (oBox.style.background = "green");

  67. break;

  68. case 50:

  69. bCtrlKey && (oBox.style.background = "yellow");

  70. break;

  71. case 51:

  72. bCtrlKey && (oBox.style.background = "blue");

  73. break;

  74. }
  75. return false

  76. };
  77. document.onkeyup = function (event)

  78. {

  79. switch ((event || window.event).keyCode)

  80. {

  81. case 37:

  82. bLeft = false;

  83. break;

  84. case 38:

  85. bTop = false;

  86. break;

  87. case 39:

  88. bRight = false;

  89. break;

  90. case 40:

  91. bBottom = false;

  92. break;

  93. }

  94. };
  95. //防止溢出

  96. function limit()

  97. {

  98. var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight]

  99. //防止左侧溢出

  100. oBox.offsetLeft <=0 && (oBox.style.left = 0);

  101. //防止顶部溢出

  102. oBox.offsetTop <=0 && (oBox.style.top = 0);

  103. //防止右侧溢出

  104. doc[0] - oBox.offsetLeft - oBox.offsetWidth <= 0 && (oBox.style.left = doc[0] - oBox.offsetWidth + "px");

  105. //防止底部溢出

  106. doc[1] - oBox.offsetTop - oBox.offsetHeight <= 0 && (oBox.style.top = doc[1] - oBox.offsetHeight + "px")

  107. }

  108. };

  109. </script>
复制代码

  说明:
  
  上:↑ 下:↓ 左:← 右:→
  
  Ctrl + 1 : 背景变为绿色
  
  Ctrl + 2 : 背景变为黄色
  
  Ctrl + 3 : 背景变为蓝色
  
  Ctrl + ↑ : 放大
  
  Ctrl + ↓ : 缩小
  
  html部分:
  
  复制代码 代码如下:
  1. 被移动的方块【DIV】

  2. <div id="box"></div>
复制代码

  希望本文所述对大家的JavaScript程序设计有所帮助。

相关帖子

发表于 2017-1-8 13:41:01 | 显示全部楼层
我是被标题吸引进来的
使用道具 举报

回复

发表于 2017-1-10 12:35:21 来自手机 | 显示全部楼层
js是要逆天的节奏js虽然不错,但是天生也是有缺陷,局限性。。。
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部