zoukankan      html  css  js  c++  java
  • JavaScript 键盘流畅移动div

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                #d01{
                     100px;
                    height: 100px;
                    background-color: red;
                    position: absolute;
                }
            </style>
        </head>
        <body>
            <div id="d01"></div>
        </body>
        <script type="text/javascript">
            /*键盘移动
             * 按左键,d01左移。。。
             */
            var d01=document.getElementById("d01");
            var speed=10;
            document.onkeydown=function(event){
                
                if(event.ctrlKey){
                    speed=40;   //按住ctrl移动速度改变
                }else{
                    speed=10;
                }
    //            //左上右下对应编码37-40
    //            switch(event.keyCode){
    //                case 37:
    ////                    alert("向左");
    //                    d01.style.left=d01.offsetLeft-speed+"px";
    //                    berak;
    //                case 38:
    ////                    alert("向上");
    //                    d01.style.top=d01.offsetTop-speed+"px";
    //                    berak;
    //                case 39:
    ////                    alert("向右");
    //                    d01.style.left=d01.offsetLeft+speed+"px";
    //                    berak;
    //                case 40:
    ////                    alert("向下");
    //                    d01.style.top=d01.offsetTop+speed+"px";
    //                    berak;
    //                
    //            }
                d=event.keyCode;
                e=event.ctrlKey;
            }
                    //使松开停止移动
            document.onkeyup=function(){
                d=0;//
            }
            //来干掉按住移动不连贯(浏览器默认的按住第二下后才连贯),所有要放到document.onkeydown外面来
            
            
            var timer=setInterval(function(){
                //左上右下对应编码37-40
                switch(d){
                    case 37:
    //                    alert("向左");
                        d01.style.left=d01.offsetLeft-speed+"px";
                        berak;
                    case 38:
    //                    alert("向上");
                        d01.style.top=d01.offsetTop-speed+"px";
                        berak;
                    case 39:
    //                    alert("向右");
                        d01.style.left=d01.offsetLeft+speed+"px";
                        berak;
                    case 40:
    //                    alert("向下");
                        d01.style.top=d01.offsetTop+speed+"px";
                        berak;
                    
                }
            },30);
            
        </script>
    </html>
  • 相关阅读:
    NOJ-1581 筷子 (线性DP)
    UVA-242 Stamps and Envelope Size (DP)
    POJ 1860 (SPFA判断正环)
    POJ 3268 最短路水题
    STL----priority_queue
    STL----unique
    POJ 2031(最小生成树Kruskal算法+几何判断)
    POJ 3468(线段树区间修改+区间求和)
    学习线段树
    POJ 1251(最小生成树裸题)
  • 原文地址:https://www.cnblogs.com/wangdongwei/p/11304318.html
Copyright © 2011-2022 走看看