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 27 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
JS实现鼠标单击与双击事件共存
Mar 08 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 Javascript
JS实现简单九宫格抽奖
Jun 28 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错误、异常处理类
2014/03/21 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
PHP文件上传类实例详解
2016/04/08 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
php实现websocket实时消息推送
2018/03/30 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
python BeautifulSoup使用方法详解
2013/11/21 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
珍珠鸟教学反思
2014/02/01 职场文书
厂长岗位职责
2014/02/19 职场文书
高中班主任评语
2014/12/30 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL