键盘控制DIV块移动

最新推荐文章于 2022-10-26 09:43:03 发布

小小黄人儿

最新推荐文章于 2022-10-26 09:43:03 发布

阅读量659

点赞数 1

分类专栏：作业文章标签： div keydown move

本文链接：https://blog.csdn.net/xiaohuangrener/article/details/78654733

版权

作业专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div1{
            width: 15px;
            height: 15px;
            /*background-color: red;*/
            border-radius: 25px;
            /*position: absolute;*/
            /*left: 10px;*/
            /*top: 30px;*/
            font-size: large;
        }
        .bei{
            position: absolute;
            left: 150px;
            top: 100px;
            width: 1024px;
            height: 527px;
            background-image: url("../img/beijing.jpg");
        }
        h1{
            text-align: center;
        }
    </style>
</head>
<body>
<h1>迷宫大战</h1>
<div class="bei">
    <div id="div1">
     <img src="../img/ren.jpg">
    </div>
</div>
    
<script type="application/javascript">
    var div1=document.getElementById("div1")
    window.onload = function() {
        window.onkeydown = function (evt) {
            if (evt.keyCode == 38) {
                div1.style.position = "absolute"
                div1.style.top = div1.offsetTop-10+"px"
            }
            else if(evt.keyCode==40){
                    div1.style.position="absolute"
                    div1.style.top = div1.offsetTop+10+"px"
                }
            else if (evt.keyCode == 37) {
                div1.style.position = "absolute"
                div1.style.left = div1.offsetLeft-10+"px"
            }
            else if (evt.keyCode == 39) {
                div1.style.position = "absolute"
                div1.style.left = div1.offsetLeft+10+"px"

            }
        }
    }



</script>
</body>
</html>