前端开发 键盘方向键控制移动div
摘要：前端开发常用api集合|前端开发从哪里下载素材|web前端开发最佳实践 pdf下载 代码在ie和360浏览器的兼容模式可能有问题。 html 代码 <!doctype html> <html> <head> <meta charset=̶……
前端开发常用api集合|前端开发从哪里下载素材|web前端开发最佳实践 pdf下载
代码在ie和360浏览器的兼容模式可能有问题。
html 代码
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>无标题文档</title>
<script type=”text/javascript”>
window.onkeydown = function (e) {
var block1 = document.getElementById(‘block’);
var pingwidth = document.body.clientWidth;//获取屏幕宽度
var pingheight = document.body.clientHeight;//获取屏幕高度
var en = e || event;
if (en.keyCode == 37 && block1.offsetLeft > 0) {//键盘左键头事件
block1.style.marginLeft = block1.offsetLeft – 10 + ‘px’;
}
if (en.keyCode == 39 && block1.offsetLeft < pingwidth – 60) {//键盘右键头事件
block1.style.marginLeft = block1.offsetLeft + 10 + ‘px’;
}
if (en.keyCode == 38 && block1.offsetTop > 0) {//键盘上键头事件
block1.style.marginTop = block1.offsetTop – 10 + ‘px’;
}
if (en.keyCode == 40 && block1.offsetTop < pingheight – 60) {//键盘下键头事件
block1.style.marginTop = block1.offsetTop + 10 + ‘px’;
}
}
</script>
<style type=”text/css”>
* {
margin: 0px auto;
padding: 0px;
}
body,
html {
height: 100%;
overflow: hidden;
}
#block {
width: 50px;
height: 50px;
background: #000;
}
</style>
</head>
<body>
<div id=”block”>
</div>
</body>
</html>
web前端开发常用的英文单词|中国前端开发人员年龄|前端开发人员的规划
» 本文来自：前端开发者 » 《前端开发 键盘方向键控制移动div》
» 本文链接地址：https://www.rokub.com/5203.html
» 您也可以订阅本站：https://www.rokub.com
近期评论