犬馬 2021-07-25 19:53 采纳率: 20%
浏览 31
已结题

怎么用原生JavaScript写一个切换背景的键盘事件

1、背景是一张图片，内容也是一张图片

2、通过上下左右切换内容的背景

img

只能写到这了，下面就没思路了
img

  • 写回答

2条回答 默认 最新

  • 老实巴交的小农民 2021-07-26 11:01
    关注
    
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            background-color: #ccc;
        }

        #top {
            position: absolute;
            top: 80px;
            left: 140px;
            width: 50px;
            height: 50px;
            border: 3px solid #ccc
        }

        #bottom {
            position: absolute;
            top: 200px;
            left: 140px;
            width: 50px;
            height: 50px;
            border: 3px solid #ccc
        }

        #left {
            position: absolute;
            top: 140px;
            left: 80px;
            width: 50px;
            height: 50px;
            border: 3px solid #ccc
        }

        #right {
            position: absolute;
            top: 140px;
            left: 200px;
            width: 50px;
            height: 50px;
            border: 3px solid #ccc
        }

        #center {
            position: absolute;
            top: 140px;
            left: 140px;
            width: 50px;
            height: 50px;
            border: 3px solid #ccc
        }
    </style>
</head>

<body>
    <div id="top">top</div>
    <div id="bottom">bottom</div>
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="center" class="active">center</div>
    <script>
        var divTop = document.getElementById('top')
        var divBottom = document.getElementById('bottom')
        var divLeft = document.getElementById('left')
        var divRight = document.getElementById('right')
        var divCenter = document.getElementById('center')
        function cc() {
            var arr = document.getElementsByTagName('div')
            for (var i = 0; len = arr.length, i < len; i++) {
                arr[i].className = "";
            }
        }
        document.onkeydown = function (event) {
            var id = document.getElementsByClassName('active')[0].id
            switch (event.keyCode) {
                case 37:
                    console.log('左');
                    console.log(id);
                    if (id == 'center') {
                        cc()
                        divLeft.className = 'active'
                    } else if (id == 'right') {
                        cc()
                        divCenter.className = 'active'
                    } else {
                        return false
                    }
                    break;
                case 38:
                    console.log('上');
                    console.log(id);

                    if (id == 'center') {
                        cc()
                        divTop.className = 'active'
                    } else if (id == 'bottom') {
                        cc()
                        divCenter.className = 'active'
                    } else {
                        return false
                    }
                    break;
                case 39:
                    console.log('右');
                    console.log(id);

                    if (id == 'center') {
                        cc()
                        divRight.className = 'active'
                    } else if (id == 'left') {
                        cc()
                        divCenter.className = 'active'
                    } else {
                        return false
                    }
                    break;
                case 40:
                    console.log('下');
                    console.log(id);
                    if (id == 'center') {
                        cc()
                        divBottom.className = 'active'
                    }
                    else if (id == 'top') {
                        cc()
                        divCenter.className = 'active'
                    } else {
                        return false
                    }
                    break;
            }
        }
    </script>
</body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 8月3日
  • 已采纳回答 7月26日
  • 创建了问题 7月25日

悬赏问题

  • ¥15 如何在3D高斯飞溅的渲染的场景中获得一个可控的旋转物体
  • ¥88 实在没有想法，需要个思路
  • ¥15 MATLAB报错输入参数太多
  • ¥15 python中合并修改日期相同的CSV文件并按照修改日期的名字命名文件
  • ¥15 有赏，i卡绘世画不出
  • ¥15 如何用stata画出文献中常见的安慰剂检验图
  • ¥15 c语言链表结构体数据插入
  • ¥40 使用MATLAB解答线性代数问题
  • ¥15 COCOS的问题COCOS的问题
  • ¥15 FPGA-SRIO初始化失败