控制DIV移動

時間 2019-12-20

標籤控制 div 移動欄目 CSS 简体版

原文原文鏈接

鍵盤控制DIV移動

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box1 {
                width: 100px;
                height: 100px;
                background-color: skyblue;
                position: absolute;

            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                // 使div能夠根據不一樣的方向鍵向不一樣方向移動？
                /*
                按左鍵，div向左移動
                按右鍵，div向右移動
                */
                // 爲document綁定一個按鍵按下的事件
                document.onkeydown = function(event) {
                    event = event || window.event;

                    // 定義一個變量,來表示移動的速度
                    var speed = 10;
                    // 若是用戶按下Ctrl之後  速度加快
                    if(event.ctrlKey){
                        speed=50;
                    }

                    /*
                    37 左
                    38 上
                    39 右
                    40 下
                    
                    */
                    switch (event.keyCode) {
                        case 37:
                            // alert("向左");left值減少
                            box1.style.left = box1.offsetLeft - speed + "px";
                            break;
                        case 38:
                            // alert("向上");
                            box1.style.top = box1.offsetTop - speed + "px";
                            break;
                        case 39:
                            // alert("向右");
                            box1.style.left = box1.offsetLeft + speed + "px";
                            break;
                        case 40:
                            // alert("向下");
                            box1.style.top = box1.offsetTop + speed + "px";
                            break;
                    }
                };
            };
        </script>
    </head>
    <body>
        <div id="box1"></div>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。