javascript移动的盒子效果代码- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript移动的盒子效果代码

Javascript: javascript实例教程(19) 使用HoTMetal(5); javascript实例教程(19) 使用HoTMetal(6); javascript实例教程(19) 使用HoTMetal(7); javascript实例教程(20) OLE Automation(1); javascript实例教程(20) OLE Automation(2); javascript实例教程(20) OLE Automation(3); javascript实例教程(20) OLE Automation(4); javascript实例教程(20) OLE Automation(5); javascript实例教程(20) OLE Automation(6); javascript实例教程(20) OLE Automation(7); 用javascript实现利用FLASH嵌入声音; javascript版的日期输入控件(6); javascript设计网页中的下拉菜单; javascript设计漫天雪花; javascript制作浮动的工具条; javascript制作闪烁的边框; javascript模拟游戏中的弹出菜单效果; 在IE中使用javascript; 利用javascript制作简单动画; 首页地址添加到收藏夹(javascript)

No. « ‹ 234 235 236 237 › »

技术文章搜索

关键字

Javascript 中的 javascript移动的盒子效果代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 347 ::

收藏到网摘: n/a

js实现右下角窗口弹出窗口效果 js链接确认提醒功能

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

点击运行可以看到效果:

<!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.ruanchen.com 测试通过
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实现右下角窗口弹出窗口效果 js链接确认提醒功能

Javascript 中的 javascript移动的盒子效果代码

评论 (0) All