javascript移動的盒子效果代碼

2019-11-21 01:38:52

字體：大中小

來源：轉載

供稿：網友

<!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); } } //武林網 m.survivalescaperooms.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鏈接確認提醒功能

下一篇：js實現右下角窗口彈出窗口效果