javascript移动的盒子效果代码

更新时间：2008年09月04日 13:42:53 作者：

不错的应用，用方向键控制小方块的移动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <title>移动的盒子 练习</title> <style type="text/css"> *{padding:0;margin:0;} </style> </head> <body> <div style="margin;0 auto;border:2px solid red;width:500px;height:500px;"> <div style="position:absolute;border:1px solid red;width:50px;height:50px;" id="box"></div> <div style="position:absolute;width:20px;height:20px;background:red;" id="sbox"></div> </div> </body> </html> <script language="JavaScript" type="text/javascript"> function $(obj){ return document.getElementById(obj); } //事件绑定通用方法 function addListener(element,e,fn){ if(element.addEventListener){ element.addEventListener(e,fn,false); } else { element.attachEvent("on" + e,fn); } } var client_width = document.body.clientWidth + document.body.scrollLeft;//页面的宽度 var client_height = document.body.clientHeight + document.body.scrollTop;//页面的高度 //一个单击事件的过程是：keydown keypress keyup var CodeList = new Array(); //在数组中先遍历移除keyCode，再把keyCode加到末尾 CodeList.Put = function(keyCode){ var retVal = CodeList.Remove(keyCode); CodeList.push(keyCode); } //移除数组中的keyCode CodeList.Remove = function(keyCode){ for(var i = 0;i < CodeList.length;i++){ if(CodeList[i] == keyCode){ CodeList.splice(i,1); } } } //获取按键，也就是数组中的最后一个元素 CodeList.getKey = function(){ //当数组中没有元素的话那么是0，为什么会是<0呢？ if(CodeList.length <= 0){ return null; }else{ return CodeList[CodeList.length - 1]; } } function Box(){ } Box.prototype.KeyUp = function(evt){ var evt = window.event?window.event:evt; if(evt.keyCode >=37 && evt.keyCode <= 40){ //松开时的是方向键，把该方向键放在数组末尾，并且移除数组中的该元素 CodeList.Remove(evt.keyCode); //数组中已经没有存储按键信息 if(CodeList.getKey() == null){ window.clearInterval(timer); timer = null; } } } Box.prototype.Move = function(){ var current_x = $("box").offsetLeft;//盒子当前x坐标 var current_y = $("box").offsetTop;//盒子当前y坐标 var obj = CodeList.getKey(); if(obj == null){ return; } switch(obj) { //左 case 37: var left = current_x - 2; $("box").style.left = left + "px"; $("sbox").style.left = left - 20 + "px"; $("sbox").style.top = current_y + 15 + "px"; break; //上 case 38: var top = current_y - 2; $("box").style.top = top + "px"; $("sbox").style.top = top - 20 + "px"; $("sbox").style.left = current_x + 15 + "px"; break; //右 case 39: var left = current_x + 2; $("box").style.left = left + "px"; $("sbox").style.left = left + 50 + "px"; $("sbox").style.top = current_y + 15 + "px"; break; //下 case 40: var top = current_y + 2; $("box").style.top = top + "px"; $("sbox").style.top = top + 50 + "px"; $("sbox").style.left = current_x + 15 + "px"; break; } } Box.prototype.KeyDown = function(evt){ var evt = window.event?window.event:evt; if(evt.keyCode >=37 && evt.keyCode <= 40){ //先移除数组中相同的元素，后加到数组末尾 CodeList.Put(evt.keyCode); } if(timer == null){ timer = window.setInterval(function(){g.Move();},30); } } //脚本之家 www.jb51.net 测试通过 var g = new Box(); addListener(document,"keydown",g.KeyDown); addListener(document,"keyup",g.KeyUp); var timer = null; //初始化 window.onload = function(){ $("box").style.top = "200px"; $("box").style.left = client_width/2 + "px"; $("sbox").style.top = "180px"; $("sbox").style.left = client_width/2 + 15 + "px"; } </script>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

ionic2.0双击返回键退出应用
这篇文章主要为大家详细介绍了ionic2.0双击返回键退出应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
js实现适配移动端的拖动效果
这篇文章主要为大家详细介绍了js实现适配移动端的拖动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
JavaScript 消息框效果【实现代码】
下面小编就为大家带来一篇JavaScript 消息框效果【实现代码】。小编觉得挺不错的，现在分享给大家，也给大家做个参考
2016-04-04
JS将滑动门改为选项卡（需鼠标点击）的实现方法
这篇文章主要介绍了JS将滑动门改为选项卡（需鼠标点击）的实现方法,涉及JavaScript页面元素遍历及样式替换的相关技巧,再通过onmouseover与onclick即可分别实现滑动门与选项卡两种效果,需要的朋友可以参考下
2015-09-09
JavaScript中小数点精度丢失的原因以及解决方法
计算机再大的内存它也存不下,所以不能存储一个相对于数学来说的值,只能存储一个近似值,所以当计算机存储后再取出来用时就会出现精度问题,下面这篇文章主要给大家介绍了关于JavaScript中小数点精度丢失的原因以及解决方法,需要的朋友可以参考下
2023-10-10
Javascript学习笔记-详解in运算符
in运算符是javascript语言中比较特殊的一个，可以单独使用作为判断运算符，也常被用于for...in循环中遍历对象属性
2011-09-09
JavaScript中诡异的delete操作符
这篇文章主要介绍了JavaScript中诡异的delete操作符,本文讲解了删除对象的属性、对数组的操作、对于变量的操作等内容,需要的朋友可以参考下
2015-03-03
用js小类库获取浏览器的高度和宽度信息
在做项目时碰到了要在页面上显示一个浮动DIV层的效果。本来做的是在页面居中时显示的，但后来经过自己的测试发现，当网页中出现了滚动条之后，那个浮动的DIV却还是在页面的顶部显示的
2012-01-01
JavaScript数据分析之交集,并集,对称差集
这篇文章主要介绍了JavaScript数据分析之交集,并集,对称差集，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-07-07
JavaScript Function函数类型介绍
在JS中,Function(函数)类型实际上是对象;每个函数都是Function类型的实例;而且都与其他引用类型一样具有属性和方法
2015-04-04