用jquery 和 jquery.simulate.js 实现模拟键盘事件，点击上下左右div相当于点击键盘的上下左右键

#box {

width: 50px;

height: 50px;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

background: lightskyblue;

}

.box-wrapper {

width: 100px;

height: 100px;

position: fixed;

bottom: 0;

left: 0;

background: blue;

}

.box {

float: left;

background-color: orange;

font-size: 30px;

width: 50px;

text-align: center;

height: 50px;

}

.box:nth-child(1){

background-color: pink;

}

.box:nth-child(4){

background-color: blueviolet;

}

window.onload = function() {

var box1 = document.getElementById("box");

document.onkeydown = function(event) {

event = event || window.event; /*||为或语句，当IE不能识别event时候，就执行window.event 赋值*/

console.log(event.keyCode);

switch(event.keyCode) { /*keyCode:字母和数字键的键码值*/

/*37、38、39、40分别对应左上右下*/

case 37:

box1.style.left = box1.offsetLeft - 10 + "px"; /*图形左移*/

break;

case 38:

box1.style.top = box1.offsetTop - 10 + "px"; /*图形上移*/

break;

case 39:

// alert("你点击了右键");

// alert(box1.offsetLeft + 10 + "px");

box1.style.left = box1.offsetLeft + 10 + "px"; /*图形右移*/

break;

case 40:

box1.style.top = box1.offsetTop + 10 + "px"; /*图形下移*/

break;

}

}

}

function arrow_click(k_type, type) {

var t = jQuery.simulate.keyCode;

var e = $('#box');

var k_event = k_type == 1 ? 'keydown' : 'keyup';

switch(type) {

case 'right':

$(e).simulate(k_event, {

keyCode: t.RIGHT

});

break;

case 'left':

$(e).simulate(k_event, {

keyCode: t.LEFT

});

break;

case 'up':

$(e).simulate(k_event, {

keyCode: t.UP

});

break;

case 'down':

$(e).simulate(k_event, {

keyCode: t.DOWN

});

break;

case 'space':

$(e).simulate(k_event, {

keyCode: t.SPACE

});

break;

}

}