正文

初识 jquery.simulate.js 模拟键盘事件

IP云
IP云V管理员/5 阅读
08/11
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
#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;
}
</style>
</head>
<script type="text/javascript">
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;
}
}
}
</script> <body>
<div id="box"> </div>
<div class="box-wrapper">
<div class="box" ontouchend="arrow_click(2,'up')" ontouchstart="arrow_click(1,'up')">
↑
</div>
<div class="box" ontouchend="arrow_click(2,'down')" ontouchstart="arrow_click(1,'down')">
↓
</div>
<div class="box" ontouchend="arrow_click(2,'left')" ontouchstart="arrow_click(1,'left')">
←
</div>
<div class="box" ontouchend="arrow_click(2,'right')" ontouchstart="arrow_click(1,'right')">
→
</div>
</div> </body>
<script src="jq3.1.1.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.simulate.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
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;
}
}
</script></html>