键盘控制div移动

最新推荐文章于 2021-07-05 12:02:06 发布

静山晚风

最新推荐文章于 2021-07-05 12:02:06 发布

阅读量813

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

66 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>键盘控制div移动---www.cnblogs.com/kuikui</title>
</head>
<body>
    <script type="text/javascript">
        function Move() {
            this.init.apply(this, arguments);
        }

        Move.prototype = {
            init: function (options) {
                this.obj = document.createElement("div");
                this.obj.style.position = "absolute";
                this.obj.style.zIndex = "9999";
                this.obj.style.border = "1px solid red";
                this.setOptions(options);
                this.obj.style.width = this.options.oWidth + "px";
                this.obj.style.height = this.options.oHeight + "px";
                this.obj.style.left = this.options.oLeft + "px";
                this.obj.style.top = this.options.oTop + "px";
                this.bigCont = this.options.bigCont;
                this.step = this.options.step;
                this.bigCont.appendChild(this.obj);
                var _this = this;
                document.onkeydown = function (event) {
                    _this.moving(event);
                }
            },
            setOptions: function (options) {
                this.options = {
                    bigCont: document.body,
                    oWidth: 50,
                    oHeight: 50,
                    oLeft: 100,
                    oTop: 100,
                    step: 10
                };

                for (var p in options) {
                    this.options[p] = options[p];
                }
            },
            moving: function (event) {
                event = event || window.event;
                switch (event.keyCode) {
                    case 37:
                        this.obj.style.left = this.obj.offsetLeft - this.step + "px";
                        break;
                    case 38:
                        this.obj.style.top = this.obj.offsetTop - this.step + "px";
                        break;
                    case 39:
                        this.obj.style.left = this.obj.offsetLeft + this.step + "px";
                        break;
                    case 40:
                        this.obj.style.top = this.obj.offsetTop + this.step + "px";
                        break;
                }
                this.limit();
                return false;
            },
            limit: function () {
                var doc =  [document.documentElement.clientWidth, document.documentElement.clientHeight];
                this.obj.offsetLeft <= 0 && (this.obj.style.left = 0);
                this.obj.offsetTop <= 0 && (this.obj.style.top = 0);
                doc[0] - this.obj.offsetLeft - this.obj.offsetWidth <= 0 && (this.obj.style.left = doc[0] - this.obj.offsetWidth + "px");
                doc[1] - this.obj.offsetTop - this.obj.offsetHeight <= 0 && (this.obj.style.top = doc[1] - this.obj.offsetHeight + "px");
            }
        }

        var t = new Move();
    </script>
</body>
</html>