资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
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> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22JavaScript%22%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20%24(obj)%7B%20%0D%0Areturn%20document.getElementById(obj)%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A%E9%80%9A%E7%94%A8%E6%96%B9%E6%B3%95%20%0D%0Afunction%20addListener(element%2Ce%2Cfn)%7B%20%0D%0Aif(element.addEventListener)%7B%20%0D%0Aelement.addEventListener(e%2Cfn%2Cfalse)%3B%20%0D%0A%7D%20else%20%7B%20%0D%0Aelement.attachEvent(%22on%22%20%2B%20e%2Cfn)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Avar%20client_width%20%3D%20document.body.clientWidth%20%2B%20document.body.scrollLeft%3B%2F%2F%E9%A1%B5%E9%9D%A2%E7%9A%84%E5%AE%BD%E5%BA%A6%20%0D%0Avar%20client_height%20%3D%20document.body.clientHeight%20%2B%20document.body.scrollTop%3B%2F%2F%E9%A1%B5%E9%9D%A2%E7%9A%84%E9%AB%98%E5%BA%A6%20%0D%0A%0D%0A%2F%2F%E4%B8%80%E4%B8%AA%E5%8D%95%E5%87%BB%E4%BA%8B%E4%BB%B6%E7%9A%84%E8%BF%87%E7%A8%8B%E6%98%AF%EF%BC%9Akeydown%20keypress%20keyup%20%0D%0Avar%20CodeList%20%3D%20new%20Array()%3B%20%0D%0A%0D%0A%2F%2F%E5%9C%A8%E6%95%B0%E7%BB%84%E4%B8%AD%E5%85%88%E9%81%8D%E5%8E%86%E7%A7%BB%E9%99%A4keyCode%EF%BC%8C%E5%86%8D%E6%8A%8AkeyCode%E5%8A%A0%E5%88%B0%E6%9C%AB%E5%B0%BE%20%0D%0ACodeList.Put%20%3D%20function(keyCode)%7B%20%0D%0Avar%20retVal%20%3D%20CodeList.Remove(keyCode)%3B%20%0D%0ACodeList.push(keyCode)%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%E7%A7%BB%E9%99%A4%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84keyCode%20%0D%0ACodeList.Remove%20%3D%20function(keyCode)%7B%20%0D%0Afor(var%20i%20%3D%200%3Bi%20%3C%20CodeList.length%3Bi%2B%2B)%7B%20%0D%0Aif(CodeList%5Bi%5D%20%3D%3D%20keyCode)%7B%20%0D%0ACodeList.splice(i%2C1)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%E8%8E%B7%E5%8F%96%E6%8C%89%E9%94%AE%EF%BC%8C%E4%B9%9F%E5%B0%B1%E6%98%AF%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E6%9C%80%E5%90%8E%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0%20%0D%0ACodeList.getKey%20%3D%20function()%7B%20%0D%0A%2F%2F%E5%BD%93%E6%95%B0%E7%BB%84%E4%B8%AD%E6%B2%A1%E6%9C%89%E5%85%83%E7%B4%A0%E7%9A%84%E8%AF%9D%E9%82%A3%E4%B9%88%E6%98%AF0%EF%BC%8C%E4%B8%BA%E4%BB%80%E4%B9%88%E4%BC%9A%E6%98%AF%3C0%E5%91%A2%EF%BC%9F%20%0D%0Aif(CodeList.length%20%3C%3D%200)%7B%20%0D%0Areturn%20null%3B%20%0D%0A%7Delse%7B%20%0D%0Areturn%20CodeList%5BCodeList.length%20-%201%5D%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20Box()%7B%20%0D%0A%0D%0A%7D%20%0D%0ABox.prototype.KeyUp%20%3D%20function(evt)%7B%20%0D%0Avar%20evt%20%3D%20window.event%3Fwindow.event%3Aevt%3B%20%0D%0Aif(evt.keyCode%20%3E%3D37%20%26%26%20evt.keyCode%20%3C%3D%2040)%7B%20%0D%0A%2F%2F%E6%9D%BE%E5%BC%80%E6%97%B6%E7%9A%84%E6%98%AF%E6%96%B9%E5%90%91%E9%94%AE%EF%BC%8C%E6%8A%8A%E8%AF%A5%E6%96%B9%E5%90%91%E9%94%AE%E6%94%BE%E5%9C%A8%E6%95%B0%E7%BB%84%E6%9C%AB%E5%B0%BE%EF%BC%8C%E5%B9%B6%E4%B8%94%E7%A7%BB%E9%99%A4%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E8%AF%A5%E5%85%83%E7%B4%A0%20%0D%0ACodeList.Remove(evt.keyCode)%3B%20%0D%0A%0D%0A%2F%2F%E6%95%B0%E7%BB%84%E4%B8%AD%E5%B7%B2%E7%BB%8F%E6%B2%A1%E6%9C%89%E5%AD%98%E5%82%A8%E6%8C%89%E9%94%AE%E4%BF%A1%E6%81%AF%20%0D%0Aif(CodeList.getKey()%20%3D%3D%20null)%7B%20%0D%0Awindow.clearInterval(timer)%3B%20%0D%0Atimer%20%3D%20null%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0ABox.prototype.Move%20%3D%20function()%7B%20%0D%0Avar%20current_x%20%3D%20%24(%22box%22).offsetLeft%3B%2F%2F%E7%9B%92%E5%AD%90%E5%BD%93%E5%89%8Dx%E5%9D%90%E6%A0%87%20%0D%0Avar%20current_y%20%3D%20%24(%22box%22).offsetTop%3B%2F%2F%E7%9B%92%E5%AD%90%E5%BD%93%E5%89%8Dy%E5%9D%90%E6%A0%87%20%0D%0Avar%20obj%20%3D%20CodeList.getKey()%3B%20%0D%0Aif(obj%20%3D%3D%20null)%7B%20%0D%0Areturn%3B%20%0D%0A%7D%20%0D%0Aswitch(obj)%20%0D%0A%7B%20%0D%0A%2F%2F%E5%B7%A6%20%0D%0Acase%2037%3A%20%0D%0Avar%20left%20%3D%20current_x%20-%202%3B%20%0D%0A%24(%22box%22).style.left%20%3D%20left%20%2B%20%22px%22%3B%20%0D%0A%24(%22sbox%22).style.left%20%3D%20left%20-%2020%20%2B%20%22px%22%3B%20%0D%0A%24(%22sbox%22).style.top%20%3D%20current_y%20%2B%2015%20%2B%20%22px%22%3B%20%0D%0Abreak%3B%20%0D%0A%2F%2F%E4%B8%8A%20%0D%0Acase%2038%3A%20%0D%0Avar%20top%20%3D%20current_y%20-%202%3B%20%0D%0A%24(%22box%22).style.top%20%3D%20top%20%2B%20%22px%22%3B%20%0D%0A%24(%22sbox%22).style.top%20%3D%20top%20-%2020%20%2B%20%22px%22%3B%20%0D%0A%24(%22sbox%22).style.left%20%3D%20current_x%20%2B%2015%20%2B%20%22px%22%3B%20%0D%0Abreak%3B%20%0D%0A%2F%2F%E5%8F%B3%20%0D%0Acase%2039%3A%20%0D%0Avar%20left%20%3D%20current_x%20%2B%202%3B%20%0D%0A%24(%22box%22).style.left%20%3D%20left%20%2B%20%22px%22%3B%20%0D%0A%24(%22sbox%22).style.left%20%3D%20left%20%2B%2050%20%2B%20%22px%22%3B%20%0D%0A%24(%22sbox%22).style.top%20%3D%20current_y%20%2B%2015%20%2B%20%22px%22%3B%20%0D%0Abreak%3B%20%0D%0A%2F%2F%E4%B8%8B%20%0D%0Acase%2040%3A%20%0D%0Avar%20top%20%3D%20current_y%20%2B%202%3B%20%0D%0A%24(%22box%22).style.top%20%3D%20top%20%2B%20%22px%22%3B%20%0D%0A%24(%22sbox%22).style.top%20%3D%20top%20%2B%2050%20%2B%20%22px%22%3B%20%0D%0A%24(%22sbox%22).style.left%20%3D%20current_x%20%2B%2015%20%2B%20%22px%22%3B%20%0D%0Abreak%3B%20%0D%0A%0D%0A%7D%20%0D%0A%0D%0A%7D%20%0D%0A%0D%0ABox.prototype.KeyDown%20%3D%20function(evt)%7B%20%0D%0Avar%20evt%20%3D%20window.event%3Fwindow.event%3Aevt%3B%20%0D%0Aif(evt.keyCode%20%3E%3D37%20%26%26%20evt.keyCode%20%3C%3D%2040)%7B%20%0D%0A%2F%2F%E5%85%88%E7%A7%BB%E9%99%A4%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9B%B8%E5%90%8C%E7%9A%84%E5%85%83%E7%B4%A0%EF%BC%8C%E5%90%8E%E5%8A%A0%E5%88%B0%E6%95%B0%E7%BB%84%E6%9C%AB%E5%B0%BE%20%0D%0ACodeList.Put(evt.keyCode)%3B%20%0D%0A%7D%20%0D%0A%0D%0Aif(timer%20%3D%3D%20null)%7B%20%0D%0Atimer%20%3D%20window.setInterval(function()%7Bg.Move()%3B%7D%2C30)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2F%E8%84%9A%E6%9C%AC%E4%B9%8B%E5%AE%B6%20www.glzy8.com%20%E6%B5%8B%E8%AF%95%E9%80%9A%E8%BF%87%20%0D%0Avar%20g%20%3D%20new%20Box()%3B%20%0D%0AaddListener(document%2C%22keydown%22%2Cg.KeyDown)%3B%20%0D%0AaddListener(document%2C%22keyup%22%2Cg.KeyUp)%3B%20%0D%0Avar%20timer%20%3D%20null%3B%20%0D%0A%2F%2F%E5%88%9D%E5%A7%8B%E5%8C%96%20%0D%0Awindow.onload%20%3D%20function()%7B%20%0D%0A%24(%22box%22).style.top%20%3D%20%22200px%22%3B%20%0D%0A%24(%22box%22).style.left%20%3D%20client_width%2F2%20%2B%20%22px%22%3B%20%0D%0A%24(%22sbox%22).style.top%20%3D%20%22180px%22%3B%20%0D%0A%24(%22sbox%22).style.left%20%3D%20client_width%2F2%20%2B%2015%20%2B%20%22px%22%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E">
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程