JavaScript键盘事件实现“英雄归位”

miraclemeister

已于 2023-07-07 09:12:44 修改

阅读量83

点赞数

文章标签： javascript css 前端

于 2023-07-06 17:18:38 首次发布

本文链接：https://blog.csdn.net/miraclemeister/article/details/131581178

版权

该设计通过CSS设置图片样式并进行相对定位，创建了一个包含六个英雄照片的布局。使用JavaScript编写了函数，允许用户通过键盘方向键移动选中的图片。每个图片都有点击事件绑定，激活键盘移动功能。此外，还设置了文字分隔线和对应的文字说明。

摘要由CSDN通过智能技术生成

需求:将图中的英雄照片归位

设计思路

思路如下:

1.设置图片、分隔线、归位的样式

 <style>
        .f{
            position: relative;
        }
        .z{
            width: 150px;
            height: 250px;
            text-align: center;
            font-size: larger; 
            border: 1px solid black;
            float: left;
            margin-left: 50px;
            position: relative;
            margin-top: 30px;
        }

        .img1{
            width: 150px;
            height: 250px;
            top: 0;
            left: 150px;
           position: absolute;

        }
        .img2{
            width: 150px;
            height: 250px;
            top: 0;
            left: 350px;
            
           position: absolute;
        }
        .img3{
            width: 150px;
            height: 250px;
            top: 0;
            left: 550px;
          position: absolute;
        }
        .img4{
            width: 150px;
            height: 250px;
            top: 0;
            left: 750px;
            position: absolute;
        }
        .img5{
            width: 150px;
            height: 250px;
            top: 0;
            left: 950px;
         position: absolute;
        }
        .img6{
            width: 150px;
            height: 250px;
            top: 0;
            left: 1150px;
            position: absolute;
        }
    </style>

2. 设置有参函数以实现键盘移动的功能

<script>

        function move1(obj){
        document.onkeydown=function(e){
        switch(e.keyCode){
            case 37:
            obj.style.left=--obj.offsetLeft +'px'
            break;
            case 39:
            obj.style.left=++obj.offsetLeft +'px'
            break;
            case 38:
            obj.style.top=--obj.offsetTop +'px'
            break;
            case 40:
            obj.style.top=++obj.offsetTop +'px'
            break;

        }
    }
    }
     </script>

3.图片绑定点击事件

 <img onclick="move1(this)" class="img1" id="img1" src="刘协.webp" alt="">
    <img onclick="move1(this)" class="img2" id="img2" src="刘备.jpg" alt="">
     <img onclick="move1(this)" class="img3" id="img3" src="关羽.webp" alt="">
     <img onclick="move1(this)" class="img4" id="img4" src="曹操.jpg" alt="">
     <img onclick="move1(this)" class="img5" id="img5" src="孙权.webp" alt="">
     <img onclick="move1(this)" class="img6" id="img6" src="貂蝉.webp" alt="">
     <hr style="position: relative; margin-top: 270px; border: 1px solid black;">
     <div class="f">
        <div class="z">刘协</div>
        <div class="z">刘备</div>
        <div class="z">关羽</div>
        <div class="z">曹操</div>
        <div class="z">孙权</div>
        <div class="z">貂蝉</div>
     </div>