鍵盤控制元素移動案例
阿新 • • 發佈：2022-04-05
想要實現鍵盤控制圖片移動該怎麼辦呢?
1.需要獲取鍵盤2.需要獲取圖片座標
程式碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jq+img/jquery-3.6.0.js"></script>
<style type="text/css">
h1{text-align: center}
.box{
position: absolute; /*position: absolute;絕對定位*/
left: 50%;top: 50%;
width: 120px;height: 120px;
background-image: url("jq+img/yy.png");
border-radius: 50%; /*向box元素新增向圓角邊框 %以百分比定義圓角的形狀*/
}
</style>
</head>
<body>
<h1>鍵盤控制元素移動案例</h1>
<hr/>
<div class="box"></div>
<script type="text/javascript">
$(function (){
/*
* 上:38 w87
* 下:40 s83
* 左:37 a65
* 右"39 d68
*/
//計算頁面的寬,高
var pWidth=$(window).width();
var pHeight=$(window).height();
console.log(pWidth,pHeight);
//繫結鍵盤事件
$(document).keydown(function (event){
//獲取鍵的值
console.log(event.which);
var left=$('.box').offset().left;
var top=$('.box').offset().top;
//判斷按鍵
switch (event.which){
case 38: //上移
case 87: //W
$('.box').offset({
top:Math.max(top-10,0)
});
break;
case 37: //左移
case 65: //A
$('.box').offset({
left:Math.max(left-10,0)
});
break;
case 40: //下移
case 83: //S
$('.box').offset({
top:Math.min(top+10,pHeight)
});
break;
case 39: //右移
case 68: //D
$('.box').offset({
left:Math.min(left+10,pWidth-80)
});
break;
}
});
});
</script>
</body>
</html>
執行結果:
結論:offset() 方法設定或返回被選元素相對於文件的偏移座標。
返回一個帶有兩個屬性（以畫素為單位的 top 和 left 位置）的物件。