软件开发培训班 >> 编程开发 >> JavaScript

javascript移动的盒子效果代码

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

技术文章快速查找

用In.js颗粒化管理、加载你的JavaScript模块

jQuery获取样式中的背景颜色属性值/颜色值

判断某个字符在一个字符串中是否存在的js代码

有关js的变量作用域和this指针的讨论

jQuery产品间断向下滚动效果核心代码

javascript 在firebug调试时用console.log的方法

让你的JavaScript代码也支持折叠

提取jquery的ready()方法单独使用示例

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建