js实现键盘控制DIV移动的方法


Posted in Javascript onJanuary 10, 2015

本文实例讲述了js实现键盘控制DIV移动的方法。分享给大家供大家参考。具体分析如下:

css样式部分:

<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>

js部分:

<script type="text/javascript"> 

window.onload = function ()

{

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

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

{

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();

},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>

说明:

上:↑ 下:↓ 左:← 右:→
Ctrl + 1 : 背景变为绿色
Ctrl + 2 : 背景变为黄色
Ctrl + 3 : 背景变为蓝色
Ctrl + ↑ : 放大
Ctrl + ↓ : 缩小

html部分:

被移动的方块【DIV】

<div id="box"></div>

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

Javascript 相关文章推荐
javascript 事件绑定问题
Jan 01 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
简单实现js浮动框
Dec 13 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 Javascript
微信小程序实现签字功能
Dec 23 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 Javascript
js实现jquery的offset()方法实例
Jan 10 #Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 #Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 #Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 #Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 #Javascript
javascript获取四位数字或者字母的随机数
Jan 09 #Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 #Javascript
You might like
PHP 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
EXT中xtype的含义分析
2010/01/07 Javascript
jQuery 表单验证扩展(四)
2010/10/20 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
CSS3 实现的加载动画
2020/12/07 HTML / CSS
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
核心价值观演讲稿
2014/05/13 职场文书
医院节能减排方案
2014/06/13 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
大学生见习报告范文
2014/11/03 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
女方离婚起诉书
2015/05/18 职场文书
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA