如何使用键盘的上下左右键控制一组图片的上下左右移动（图片界面如下）

图片界面地址：http://photo.blog.sina.com.cn/photo/4e721d91h8d963a874218谢谢各位大侠！

解决方案 »

  1.   

    给上下左右键注册事件控制图片的位置即可。
    这位说的挺好的：http://blog.csdn.net/cnkiminzhuhu/archive/2009/08/25/4481947.aspx
      

  2.   

    就是keypress事件，event.keyCode = 37,38,39,40
    其他就是图片坐标的移动top、left设置值，position: absolute;
      

  3.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var stap = 5;
    function show() {
    var curTop = document.getElementById("imag").style.pixelTop;
    var curLeft = document.getElementById("imag").style.pixelLeft;
    if (event.keyCode == 37) {
    curLeft = curLeft - stap;
    } 
    if (event.keyCode == 38) {
    curTop = curTop - stap;
    }
    if (event.keyCode == 40) {
    curTop = curTop + stap;
    } if (event.keyCode == 39) {
    curLeft = curLeft + stap;
    }  document.getElementById("imag").style.pixelTop = curTop;
    document.getElementById("imag").style.pixelLeft = curLeft;
    }

    //--></SCRIPT>
    </HEAD><BODY onkeydown="show()">
    <img src="" style="position: absolute;" id="imag">
    event.keyCode = 37左,38上,39右,40下
    </BODY>
    </HTML>
      

  4.   

    document.onkeydown   =   doSubmit;   
      function doSubmit(){
      var curTop = document.getElementById("img1").style;
            var curLeft = document.getElementById("img1").style;
            if (event.keyCode == 37) {
                curLeft.pixelLeft = curLeft.pixelLeft - 3;
            } 
            if (event.keyCode == 38) {
                curTop.pixelTop = curTop.pixelTop - 3;
            }
            if (event.keyCode == 40) {
                curTop.pixelTop = curTop.pixelTop + stap;
            }        if (event.keyCode == 39) {
                curLeft.pixelLeft = curLeft.pixelLeft + stap;
            }   }
      

  5.   

    五楼错误太多，四楼的能用，<head></head>中间要加入<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />要不然上下左右四个字不对