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 相关文章推荐
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
Vue多选列表组件深入详解
Mar 02 Vue.js
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 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
js 提交和设置表单的值
2008/12/19 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
python爬虫基础之urllib的使用
2020/12/31 Python
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
保洁主管岗位职责
2013/11/20 职场文书
服装厂厂长岗位职责
2013/12/27 职场文书
市场营销求职信范文
2014/02/21 职场文书
社区工作者感言
2014/03/02 职场文书
期末学生评语大全
2014/04/24 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
小学美术教学反思
2016/02/17 职场文书
详解JAVA的控制语句
2021/11/11 Java/Android
Python何绘制带有背景色块的折线图
2022/04/23 Python