div按键左右上下移动 

<!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 type="text/css">
        #box1{
            width: 100px;
            height: 100px;
            background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
            position: absolute;
        }
    </style>
    <script type="text/javascript">

        // 使div可以根据不同的方向键向不同的方向移动
        /* 
            按左键，div向左移
            按右键，div向右移
        */
        window.onload=function(){

            // 为document绑定一个按键松下的事件
            document.onkeydown=function(event){
            event=event||window.event;

            // 定义一个变量，来表示移动的速度
            var speed=10;

            // 当用户按了ctrl以后，速度加快
            if(event.ctrlKey){
                speed=50;
            }

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

原始状态

 

 

posted @ 2020-12-26 10:31  Hhhr  阅读(463)  评论(0)  编辑  收藏  举报