一般给公司做网站怎么收费自媒体营销代理
通过 键盘按键 控制 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) = 10var leftVal = parseInt( window.getComputedStyle(oP).left ) ; var topVal = parseInt( window.getComputedStyle(oP).top ) ; // 获取 p标签对象 内容+padding+bordervar oPWidth = oP.offsetWidth;var oPHeight = oP.offsetHeight;// 获取 div标签对象 内容+paddingvar 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 ;// 设定极值 上移 最小坐标是 0if( 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-=10oPLeft = oPLeft<=0?0:oPLeftoP.style.left = oPLeft+'px'}// 上if(event.keyCode===38){oPTop-=10oPTop = oPTop<=0?0:oPTopoP.style.top = oPTop+'px'}// 右if(event.keyCode===39){oPLeft+=10oPLeft = oPLeft>oDivWidth-oPWidth?oDivWidth-oPWidth:oPLeft;oP.style.left = oPLeft+'px'}// 下if(event.keyCode===40){oPTop+=10oPTop = oPTop>oDivHeight-oPHeight?oDivHeight-oPHeight:oPTop;oP.style.top = oPTop+'px'}})