推箱子 

<!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>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById('one');
            var x = 100;
            var y = 100;
            document.onkeydown = function (event) {
                var e = window.event || event;
                var code = e.keyCode;
                switch (code) {
                    case 37:
                        x--;
                        break;
                    case 38:
                        y--;
                        break;
                    case 39:
                        x++;
                        break;
                    case 40:
                        y++;
                        break;
                }
                oDiv.style.left = x + 'px';
                oDiv.style.top = y + 'px';
            }
        }
    </script>
    <style>
        #one {
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
            left: 100px;
            top: 100px;
            text-align: center;
            line-height: 200px;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div id="one">大吉大利 今晚吃鸡</div>
</body>

</html>

拖拽箱子

<!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>
    <script>
        window.onload = function () {
            //获取div
            var oDiv = document.getElementById('one');
            //定义一个移动开关，默认是关闭的，只有当鼠标按下时，才开启
            var flag = false;
            //定义鼠标位置和div位置默认值
            var mousex = 0;
            var mousey = 0;
            var divx = 100;
            var divy = 100;
            //给div添加鼠标按下事件
            oDiv.onmousedown = function(ev){
                var e = window.event || ev;
                //移动开关开启
                flag = true;
                //获取div的位置，鼠标的位置
                divx = oDiv.offsetLeft;//获取div的x坐标
                divy = oDiv.offsetTop;//获取div的y坐标
                mousex = e.clientX;
                mousey = e.clientY;
                oDiv.style.cursor = 'move'; //给div添加一个鼠标样式
            }
            oDiv.onmousemove = function(ev){
                var e = window.event || ev;
                //判断移动开关
                if(flag){
                    //重新设置div的位置
                    //oDiv.style.left = e.clentx - (mousex-divx)+'px';
                    oDiv.style.left = e.clientX - mousex+divx+'px';
                    oDiv.style.top = e.clientY - mousey+divy+'px';
                }
            }
            //给 document,添加一个鼠标弹起事件，div移动关闭。
            document.onmouseup = function(){
                flag = false;
            }
        }

    </script>
    <style>
        #one {
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
            left: 100px;
            top: 100px;
            text-align: center;
            line-height: 200px;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div id="one">大吉大利 今晚吃鸡</div>
</body>

</html>

 

 箱子

posted @ 2019-08-29 15:40  za_szybko  阅读(192)  评论(0)    收藏  举报