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

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

Javascript: JavaScript 渐变效果页面图片控制; JavaScript blog式日历控件新算法; Javascript 读后台cookie代码; js 弹簧效果代码; JavaScript滑移效果代码; javascript字符串拆分成单个字符相加和不超过10，求最终值; Prototype中dom对象方法汇总; Jquery与Prototype混合用法对比; javascript下IE与FF兼容函数收集; 突破winxp sp2/win2003 sp2超强弹窗代码; js点击出现场层层外点击层消失的代码; Javascript模拟scroll滚动效果脚本; javascript各种复制代码收集; javascript的trim,ltrim,rtrim自定义函数; 仿3721首页模块拖曳移动效果js代码[可拖曳层移动层]; Javascript拖拽系列文章1之offsetParent属性; Discuz! 6.1_jQuery兼容问题; js日历控件（可精确到分钟）; javascript DOM实用学习资料; javascript实现的树型下拉框改进版

No. « ‹ 109 110 111 112 › »

技术文章搜索

关键字

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

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

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