跟随鼠标移动丨方向键控制

最新推荐文章于 2025-03-04 15:09:50 发布

weixin_30323631

最新推荐文章于 2025-03-04 15:09:50 发布

阅读量255

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/byxiaohaimian/p/6428517.html

有很多不是很好，请大家多多批评。

代码以下：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<style>
#haimian {
position: absolute;
/*绝对定位*/
width: 300px;
height: 200px;
/*我的是图片太大 ,设置图片的大小*/
}
</style>
</head>

<script>
function DivFlying() {
var baobao = document.getElementById("haimian");
if(!baobao) { return; }
// window.event 事件对象的状态
var intX = window.event.clientX;
var intY = window.event.clientY;
baobao.style.left = intX + "px";
baobao.style.top = intY + "px";
}
document.onmousemove = DivFlying;
</script>

<script>
var x = 0;
var y = 0;
document.onkeydown = function(e) {
console.log(e.keyCode);
//上 38
//下 40
//左 37
//右 39
if(e.keyCode == 38) {
y = y - 10;
}
if(e.keyCode == 40) {
y = y + 10;
}
if(e.keyCode == 37) {
x = x - 10;
}
if(e.keyCode == 39) {
x = x + 10;
}
var baobao = document.getElementById("haimian");
baobao.style.top = y + "px";
baobao.style.left = x + "px";