DIV 이동 제어

2253 단어

키보드로 DIV 이동 제어



    
        
        
        <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>
    
    
        <div id="box1"/>
    

</code></pre> 
</div>
                            </div>
                        </div>

좋은 웹페이지 즐겨찾기