通过 键盘按键 控制 p标签的位移
- 上按键 38 p标签 top 累减 数值
- 下按键 40 p标签 top 累加 数值
- 左按键 37 p标签 left 累减 数值
- 右按键 39 p标签 left 累加 数值
数值的改变 应该是 在 原始数值基础上完成的
极值的设定:
- 最小值是 0
- 最大值是 父级标签占位(内容+padding) - 当前标签占位(内容+padding+border)
clientWidth clientHeight offsetWidth offsetHeight
<div>
<p></p>
</div>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
border: 3px solid #000;
margin: 50px auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding:20px;
}
p{
width: 30px;
height: 30px;
background: pink;
position: absolute;
padding: 20px;
border: 5px solid red;
}
// 获取标签对象
var oDiv = document.querySelector('div');
var oP = document.querySelector('p');
// 获取 p标签对象 原始定位数据 parseInt(10px) = 10
var leftVal = parseInt( window.getComputedStyle(oP).left ) ;
var topVal = parseInt( window.getComputedStyle(oP).top ) ;
// 获取 p标签对象 内容+padding+border
var oPWidth = oP.offsetWidth;
var oPHeight = oP.offsetHeight;
// 获取 div标签对象 内容+padding
var oDivWidth = oDiv.clientWidth;
var oDivHeight = oDiv.clientHeight;
// 给 document 添加 键盘事件
document.addEventListener( 'keydown' , function(e){
// console.log( e.keyCode );
if( e.keyCode === 37 ){
// 按键编号 是 37 按 左键
// left 减等 数值
leftVal -= 10 ;
// 设定极值 左移 最小坐标是 0
if( leftVal <= 0 ){
leftVal = 0 ;
}
// 将数值 赋值给 标签的定位属性
oP.style.left = leftVal + 'px';
}else if( e.keyCode === 39 ){
// 按键编号 是 39 按 右键
// left 加等 数值
leftVal += 10 ;
// 设定极值 左移 最大坐标是 div占位(内容+padding) - p占位(内容+padding+border)
if( leftVal > oDivWidth - oPWidth ){
leftVal = oDivWidth - oPWidth ;
}
// 将数值 赋值给 标签的定位属性
oP.style.left = leftVal + 'px';
}else if( e.keyCode === 38 ){
// 按键编号 是 38 按 上键
// top 减等 数值
topVal -= 10 ;
// 设定极值 上移 最小坐标是 0
if( topVal < 0 ){
topVal = 0;
}
// 将数值 赋值给 标签的定位属性
oP.style.top = topVal + 'px';
}else if( e.keyCode === 40 ){
// 按键编号 是 40 按 下键
// top 加等 数值
topVal += 10 ;
// 设定极值 左移 最大坐标是 div占位(内容+padding) - p占位(内容+padding+border)
if( topVal > oDivHeight - oPHeight ){
topVal = oDivHeight - oPHeight ;
}
// 将数值 赋值给 标签的定位属性
oP.style.top = topVal + 'px';
}
})
用到了之前写的offsetWidth offsetHeight clientWidth clientHeight offsetTop offsetLeft
https://blog.csdn.net/qq_14993591/article/details/120155072
也可以使用oP.offsetLeft;
代替parseInt( window.getComputedStyle(oP).left )
var oDiv = document.querySelector('div')
var oP = document.querySelector('p')
var oPLeft = oP.offsetLeft;
var oDivWidth = oDiv.clientWidth;
var oPWidth = oP.offsetWidth;
var oPTop = oP.offsetTop;
var oDivHeight = oDiv.clientHeight;
var oPHeight = oP.offsetHeight;
document.addEventListener('keydown',function(event){
console.log(event.keyCode)
// 左
if(event.keyCode===37){
oPLeft-=10
oPLeft = oPLeft<=0?0:oPLeft
oP.style.left = oPLeft+'px'
}
// 上
if(event.keyCode===38){
oPTop-=10
oPTop = oPTop<=0?0:oPTop
oP.style.top = oPTop+'px'
}
// 右
if(event.keyCode===39){
oPLeft+=10
oPLeft = oPLeft>oDivWidth-oPWidth?oDivWidth-oPWidth:oPLeft;
oP.style.left = oPLeft+'px'
}
// 下
if(event.keyCode===40){
oPTop+=10
oPTop = oPTop>oDivHeight-oPHeight?oDivHeight-oPHeight:oPTop;
oP.style.top = oPTop+'px'
}
})