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

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

Javascript: 很多人都是用下面的js刷新站IP和PV; javascript仿126邮箱TAB切换效果; js右下角弹出窗口,点击可关闭效果; javascript使用window.name解决跨域问题; DIV层之拖动、关闭、打开效果代码; Javascript条件判断使用小技巧总结; javascript获取不重复的随机数的方法比较; Firefox下设为主页的JavaScript代码; JavaScript编制留言簿程序代码; javascript表格随机排序代码; javascript一些不错的函数脚本代码; javascript之textarea打字机效果提示代码推荐; js实现的类似QQ的等级的代码; js检查是否全是中文; [原创]js判断是否有中文的脚本_js判断中文方法集合; js判断输入是否中文，数字，身份证等等js函数集合; js直接编辑当前cookie的脚本; jquery 必填项判断表单是否为空的方法; javascript高亮效果的二种实现方法; JavaScript基本入门语法集合

No. « ‹ 108 109 110 111 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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