随笔- 8  文章- 3  评论- 0  阅读- 369 
根据方向键移动
复制代码
<style type="text/css">
            #box1{
                width: 100px;
                height: 100px;
                background-color: red;
                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 = 500;
                    }
                    
                    /*
                     * 37 左
                     * 38 上
                     * 39 右
                     * 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>
复制代码
<body>
        <div id="box1"></div>
    </body>

 

 posted on   crush丶凡子  阅读(34)  评论(0)  编辑  收藏  举报
相关博文：
·  盒子随着鼠标移动
·  定时器，换图片
·  元素跟着鼠标移动
·  鼠标移动到位置显示相应信息
·  001_按键移动
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
点击右上角即可分享
微信分享提示