用JS实现推箱子的箱子移动

孤影_ls

于 2020-01-12 14:20:31 发布

阅读量442

点赞数

分类专栏： # JS Demo 文章标签： css javascript html

本文链接：https://blog.csdn.net/Sheng_zhenzhen/article/details/103945483

版权

JS Demo 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 100px;
            height: 100px;
            background: url(./timg.jpg) no-repeat center;
            background-size: contain;
            position: relative;
            left: 100px;
            top: 100px;
        }
    </style>

</head>

<body>
    <div id="box"></div>
    <script>
        // 10px
        //229
        let box = document.getElementById("box");
        // 右侧上下左右箭头一下一下按
        window.onkeyup=function(e){
            //keyCode : 就是事件对象中的一个属性名；
            let a = getComputedStyle(box);
            if(e.keyCode===37){
                box.style.left=parseFloat(a.left)-10+"px"
            }else if(e.keyCode===38){
                box.style.top=parseFloat(a.top)-10+"px"
            }else if(e.keyCode===39){
                box.style.left=parseFloat(a.left)+10+"px"
            }else if(e.keyCode===40){
                box.style.top=parseFloat(a.top)+10+"px"
            }
        }
        //adsw  连续动
        // window.onkeypress = function (e) {
        //     e.keyCode === 119 ? box.style.top = (parseFloat(getComputedStyle(box).top) - 10) + "px" : null; //上
        //     e.keyCode === 115 ? box.style.top = (parseFloat(getComputedStyle(box).top) + 10) + "px" : null;
        //     e.keyCode === 97 ? box.style.left = (parseFloat(getComputedStyle(box).left) - 10) + "px" : null; //left
        //     e.keyCode === 100 ? box.style.left = (parseFloat(getComputedStyle(box).left) + 10) + "px" :
        //     null; //right
        // }
    </script>
</body>

</html>

孤影_ls

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JS实现推箱子的箱子移动

效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
复制链接

扫一扫