87,910
社区成员
发帖
与我相关
我的任务
分享有关DOM节点渲染后就近选择算法
<!DOCTYPE html>
<html>
<head>
<style>
*{padding: 0;margin: 0;}
html,body{height:100%;}
div{padding:20px;border:1px solid #ccc;}
.cur{background-color: #f9f9f9;}
.cur1{background-color: #ccc;}
</style>
</head>
<body>
<div style="position: relative; width: 90%;height:100%;margin:0 auto;">
<div style="position: relative;height:100%;" class="screen cur">
<div class="item" style="position: absolute; top: 10px; left: 20px;"></div>
<div class="item cur1" style="position: absolute; top: 80px; left: 200px;"></div>
<div class="item" style="position: absolute; top: 190px; left: 120px;"></div>
<div class="item" style="position: absolute; top: 400px; left: 210px;"></div>
</div>
<div style="position: relative;height:100%;" class="screen">
<div class="item cur1" style="position: absolute; bottom: 10px; right: 20px;"></div>
<div class="item" style="position: absolute; bottom: 80px; right: 200px;"></div>
<div class="item" style="position: absolute; bottom: 190px; right: 120px;"></div>
<div class="item" style="position: absolute; bottom: 400px; right: 210px;"></div>
</div>
</div>
</body>
<script>
/**
*
* 如以上DOM：当前屏幕选中一定(cur),屏幕内子元素一定(cur1)
* 现根据上下左右键改变cur或cur1
* 子元素item position 上下左右值不定
*
* 如第一个screen盒子
* 按上cur1同级第一个item
* 按左或下cur1同级第三个item
* 按右无反应
*
* 如第二个screen盒子
* 按上或左cur1同级第二个item(按右无效),再按上或右cur1同级第三个item(按左无效),再按上或左cur1同级第四个item(按右无效),再按上cur1第一screen第四个item
*
*/
document.onkeydown = onKeyDown;
function onKeyDown(event) {
switch (event.which) {
case 38:
onUp();
return false;
case 39:
onRight();
return false;
case 40:
onDown();
return false;
case 37:
onLeft();
return false;
case 13:
onConfirm();
return false;
}
return true;
}
function onUp() {
console.log('onUp')
}
function onRight() {
console.log('onRight')
}
function onLeft() {
console.log('onLeft')
}
function onDown() {
console.log('onDown')
}
function onConfirm() {
console.log('onConfirm')
}
</script>
</html>
...全文
请发表友善的回复…
发表回复
daswcszxw 2021-01-21
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* {
padding: 0;
margin: 0;
}
.screen{
border:2px solid green;
}
html, body {
height: 100%;
}
div.item {
padding: 10px;
border: 1px solid #ccc;
background-color:blueviolet;
}
.cur {
background-color: #b5ef9a;
}
.cur1 {
background-color: #ff6a00 !important;
}
</style>
</head>
<body style="position:relative;">
<div style="position:absolute; top:20px; left:10px; border:1px solid green; width:100px; height:500px; overflow:auto;">
<ol id="log"></ol>
</div>
<div style="position: absolute; width: 700px;height:500px;margin:0 auto; top:20px; left:150px;">
<div style="position: relative;height:100%; width:300px; float:left;" class="screen cur" onclick="onScreenClick(this);">
<div class="item" style="position: absolute; top: 10px; left: 140px;">1</div>
<div class="item" style="position: absolute; top: 40px; left: 40px;">2</div>
<div class="item" style="position: absolute; top: 40px; left: 230px;">3</div>
<div class="item" style="position: absolute; top: 280px; left: 80px;">4</div>
<div class="item" style="position: absolute; top: 280px; left: 160px;">5</div>
<div class="item" style="position: absolute; top: 320px; left: 80px;">6</div>
<div class="item" style="position: absolute; top: 320px; left: 160px;">7</div>
<div class="item" style="position: absolute; top: 360px; left: 80px;">8</div>
<div class="item cur1" style="position: absolute; top: 360px; left: 160px;">9</div>
</div>
</div>
</body>
<script>
document.onkeydown = onKeyDown;
var loger = document.getElementById('log');
function onScreenClick(obj) {
document.querySelector('.cur').classList.remove('cur');
obj.classList.add('cur');
}
function log(msg) {
var item = document.createElement('li');
item.innerHTML = msg;
loger.append(item);
}
function onKeyDown(event) {
switch (event.which) {
case 38:
onUp();
return false;
case 39:
onRight();
return false;
case 40:
onDown();
return false;
case 37:
onLeft();
return false;
case 13:
onConfirm();
return false;
}
return true;
}
function onUp() {
log('onUp');
var currItem = document.querySelector('.cur').querySelector('.cur1');
var top = currItem.offsetTop, left = currItem.offsetLeft, minItem = null;
var curSquare = top * left;
var minOffset = curSquare;
document.querySelector('.cur').querySelectorAll('.item:not(.cur1)').forEach(function (a, b) {
var thisTop = a.offsetTop;
var thisLeft = a.offsetLeft;
var thisSquare = thisTop * thisLeft;
console.log(curSquare,currItem,thisSquare,a, top, thisTop)
if (thisSquare < curSquare && curSquare - thisSquare < minOffset && top > thisTop) {
minOffset = curSquare - thisSquare;
minItem = a;
}
});
if (minItem != null) {
currItem.classList.remove('cur1');
minItem.classList.add('cur1');
}
}
function onRight() {
log('onRight')
var currItem = document.querySelector('.cur').querySelector('.cur1');
var top = currItem.offsetTop, left = currItem.offsetLeft, minItem = null;
var curSquare = top * left;
var minOffset = 1000000000;
document.querySelector('.cur').querySelectorAll('.item:not(.cur1)').forEach(function (a, b) {
var thisTop = a.offsetTop;
var thisLeft = a.offsetLeft;
var thisSquare = thisTop * thisLeft;
console.log(curSquare,currItem,thisSquare,a);
if (thisSquare > curSquare && thisSquare-curSquare < minOffset) {
minOffset = thisSquare - curSquare;
minItem = a;
}
});
if (minItem != null) {
currItem.classList.remove('cur1');
minItem.classList.add('cur1');
}
}
function onLeft() {
log('onLeft')
var currItem = document.querySelector('.cur').querySelector('.cur1');
var top = currItem.offsetTop, left = currItem.offsetLeft, minItem = null;
var curSquare = top * left;
var minOffset = 1000000000;
document.querySelector('.cur').querySelectorAll('.item:not(.cur1)').forEach(function (a, b) {
var thisTop = a.offsetTop;
var thisLeft = a.offsetLeft;
var thisSquare = thisTop * thisLeft;
console.log(curSquare,currItem,thisSquare,a);
if (thisSquare < curSquare && -thisSquare + thisSquare < minOffset) {
minOffset = -thisSquare + thisSquare;
minItem = a;
}
});
if (minItem != null) {
currItem.classList.remove('cur1');
minItem.classList.add('cur1');
}
}
function onDown() {
log('onDown')
var currItem = document.querySelector('.cur').querySelector('.cur1');
var top = currItem.offsetTop, left = currItem.offsetLeft, minItem = null;
var curSquare = top * left;
var minOffset = -1;
document.querySelector('.cur').querySelectorAll('.item:not(.cur1)').forEach(function (a, b) {
var thisTop = a.offsetTop;
var thisLeft = a.offsetLeft;
var thisSquare = thisTop * thisLeft;
console.log(curSquare,currItem,thisSquare,a,thisTop, top);
if (thisSquare > curSquare && (minOffset == -1 || -curSquare + thisSquare < minOffset) && thisTop > top) {
minOffset = -curSquare + thisSquare;
minItem = a;
}
});
if (minItem != null) {
currItem.classList.remove('cur1');
minItem.classList.add('cur1');
}
}
function onConfirm() {
console.log('onConfirm')
}
</script>
</html>
Hello World, 2021-01-21
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<title>KeyMoveTest</title>
<style>
* {
padding: 0;
margin: 0;
}
.screen {
border: 2px solid green;
}
html, body {
height: 100%;
}
div.item {
padding: 20px;
border: 1px solid #ccc;
background-color: blueviolet;
}
.cur {
background-color: #b5ef9a;
}
.cur1 {
background-color: #ff6a00 !important;
}
</style>
</head>
<body style="position:relative;">
<div style="position:absolute; top:20px; left:10px; border:1px solid green; width:100px; height:500px; overflow:auto;">
<ol id="log"></ol>
</div>
<div style="position: absolute; width: 700px;height:500px;margin:0 auto; top:20px; left:150px;">
<div style="position: relative;height:100%; width:300px; float:left;" class="screen cur" onclick="onScreenClick(this);">
<div class="item" style="position: absolute; top: 10px; left: 140px;">1</div>
<div class="item cur1" style="position: absolute; top: 40px; left: 40px;">2</div>
<div class="item" style="position: absolute; top: 40px; left: 230px;">3</div>
<div class="item" style="position: absolute; top: 280px; left: 80px;">4</div>
<div class="item" style="position: absolute; top: 280px; left: 160px;">5</div>
<div class="item" style="position: absolute; top: 320px; left: 80px;">6</div>
<div class="item" style="position: absolute; top: 320px; left: 160px;">7</div>
<div class="item" style="position: absolute; top: 360px; left: 80px;">8</div>
<div class="item" style="position: absolute; top: 360px; left: 160px;">9</div>
</div>
<div style="position: relative;height:100%; width:300px; float:right;" class="screen" onclick="onScreenClick(this);">
<div class="item cur1" style="position: absolute; bottom: 10px; right: 20px;"></div>
<div class="item" style="position: absolute; bottom: 80px; right: 200px;"></div>
<div class="item" style="position: absolute; bottom: 190px; right: 120px;"></div>
<div class="item" style="position: absolute; bottom: 400px; right: 210px;"></div>
</div>
</div>
</body>
</html>
<script>
/**
*
* 如以上DOM：当前屏幕选中一定(cur),屏幕内子元素一定(cur1)
* 现根据上下左右键改变cur或cur1
* 子元素item position 上下左右值不定
*
* 如第一个screen盒子
* 按上cur1同级第一个item
* 按左或下cur1同级第三个item
* 按右无反应
*
* 如第二个screen盒子
* 按上或左cur1同级第二个item(按右无效),再按上或右cur1同级第三个item(按左无效),再按上或左cur1同级第四个item(按右无效),再按上cur1第一screen第四个item
*
*/
document.onkeydown = onKeyDown;
var loger = document.getElementById('log');
function onScreenClick(obj) {
document.querySelector('.cur').classList.remove('cur');
obj.classList.add('cur');
}
function log(msg) {
var item = document.createElement('li');
item.innerHTML = msg;
loger.append(item);
}
function onKeyDown(event) {
switch (event.which) {
case 38:
onUp();
return false;
case 39:
onRight();
return false;
case 40:
onDown();
return false;
case 37:
onLeft();
return false;
case 13:
onConfirm();
return false;
}
return true;
}
function onUp() {
log('onUp');
var currItem = document.querySelector('.cur').querySelector('.cur1');
var center = getCenter(currItem), minOffset = 10000, minItem = null;
document.querySelector('.cur').querySelectorAll('.item:not(.cur1)').forEach(function (a, b) {
var thisCenter = getCenter(a);
var distance = getDistance(center, thisCenter);
if (thisCenter.y < center.y && distance < minOffset) {
minOffset = distance;
minItem = a;
}
});
if (minItem != null) {
currItem.classList.remove('cur1');
minItem.classList.add('cur1');
}
}
function onRight() {
log('onRight')
var currItem = document.querySelector('.cur').querySelector('.cur1');
var center = getCenter(currItem), minOffset = 10000, minItem = null;
document.querySelector('.cur').querySelectorAll('.item:not(.cur1)').forEach(function (a, b) {
var thisCenter = getCenter(a);
var distance = getDistance(center, thisCenter);
if (thisCenter.x > center.x && distance < minOffset) {
minOffset = distance;
minItem = a;
}
});
if (minItem != null) {
currItem.classList.remove('cur1');
minItem.classList.add('cur1');
}
}
function onLeft() {
log('onLeft')
var currItem = document.querySelector('.cur').querySelector('.cur1');
var center = getCenter(currItem), minOffset = 10000, minItem = null;
document.querySelector('.cur').querySelectorAll('.item:not(.cur1)').forEach(function (a, b) {
var thisCenter = getCenter(a);
var distance = getDistance(center, thisCenter);
if (thisCenter.x < center.x && distance < minOffset) {
minOffset = distance;
minItem = a;
}
});
if (minItem != null) {
currItem.classList.remove('cur1');
minItem.classList.add('cur1');
}
}
function onDown() {
log('onDown')
var currItem = document.querySelector('.cur').querySelector('.cur1');
var center = getCenter(currItem), minOffset = 10000, minItem = null;
document.querySelector('.cur').querySelectorAll('.item:not(.cur1)').forEach(function (a, b) {
var thisCenter = getCenter(a);
var distance = getDistance(center, thisCenter);
if (thisCenter.y > center.y && (distance < minOffset)) {
minOffset = distance;
minItem = a;
}
});
if (minItem != null) {
currItem.classList.remove('cur1');
minItem.classList.add('cur1');
}
}
function onConfirm() {
console.log('onConfirm')
}
function getCenter(obj) {
return { x: obj.offsetLeft + obj.offsetWidth * 0.5, y: obj.offsetTop + obj.offsetHeight }
}
function getDistance(centerA, centerB) {
return Math.sqrt(Math.pow(centerA.x - centerB.x, 2) + Math.pow(centerA.y - centerB.y, 2));
}
</script>
daswcszxw 2021-01-20
- 打赏
- 举报
<!--现有以下DOM节点 -->
div style="position: relative;height:100%; width:300px; float:left;" class="screen cur" onclick="onScreenClick(this);">
<div class="item" style="position: absolute; top: 10px; left: 140px;">1</div>
<div class="item cur1" style="position: absolute; top: 40px; left: 40px;">2</div>
<div class="item" style="position: absolute; top: 40px; left: 230px;">3</div>
<div class="item" style="position: absolute; top: 280px; left: 80px;">4</div>
<div class="item" style="position: absolute; top: 280px; left: 160px;">5</div>
<div class="item" style="position: absolute; top: 320px; left: 80px;">6</div>
<div class="item" style="position: absolute; top: 320px; left: 160px;">7</div>
<div class="item" style="position: absolute; top: 360px; left: 80px;">8</div>
<div class="item" style="position: absolute; top: 360px; left: 160px;">9</div>
</div>
Hello World, 2020-12-31
- 打赏
- 举报
这个还是距离判断的问题，不过是优先选取的策略是什么样子，比如向下的时候是不是取左右最近的优先？是的话就加一个左右距离的判断上去就好了
Hello World, 2020-12-30
- 打赏
- 举报
就是根据位置来判断，哪一个符合方向要求并且最近就选择，没有就不选择？
是的话按照这个思路来查找就好了
daswcszxw 2020-12-30
- 打赏
- 举报
非常感谢！这就是我需要的功能。
我把每个screen下的item 四周距离 存入了数组，再进行计算处理。
因为需要增加一些更人性化的规则，
比如
<div class="item" style="position: absolute; top: 400px; left: 20px;">1</div>
<div class="item" style="position: absolute; top: 180px; left: 200px;">2</div>
<div class="item" style="position: absolute; top: 90px; left: 120px;">3</div>
<div class="item cur1" style="position: absolute; top: 40px; left: 210px;">4</div>
Hello World, 2020-12-30
- 打赏
- 举报
也不知道你具体要的是什么效果，看看是不是这样的？
<!DOCTYPE html>
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
}
.screen{
border:2px solid green;
}
html, body {
height: 100%;
}
div.item {
padding: 20px;
border: 1px solid #ccc;
background-color:blueviolet;
}
.cur {
background-color: #b5ef9a;
}
.cur1 {
background-color: #ff6a00 !important;
}
</style>
</head>
<body style="position:relative;">
<div style="position:absolute; top:20px; left:10px; border:1px solid green; width:100px; height:500px; overflow:auto;">
<ol id="log"></ol>
</div>
<div style="position: absolute; width: 700px;height:500px;margin:0 auto; top:20px; left:150px;">
<div style="position: relative;height:100%; width:300px; float:left;" class="screen cur" onclick="onScreenClick(this);">
<div class="item" style="position: absolute; top: 10px; left: 20px;"></div>
<div class="item cur1" style="position: absolute; top: 80px; left: 200px;"></div>
<div class="item" style="position: absolute; top: 190px; left: 120px;"></div>
<div class="item" style="position: absolute; top: 400px; left: 210px;"></div>
</div>
<div style="position: relative;height:100%; width:300px; float:right;" class="screen" onclick="onScreenClick(this);">
<div class="item cur1" style="position: absolute; bottom: 10px; right: 20px;"></div>
<div class="item" style="position: absolute; bottom: 80px; right: 200px;"></div>
<div class="item" style="position: absolute; bottom: 190px; right: 120px;"></div>
<div class="item" style="position: absolute; bottom: 400px; right: 210px;"></div>
</div>
</div>
</body>
<script>
/**
*
* 如以上DOM：当前屏幕选中一定(cur),屏幕内子元素一定(cur1)
* 现根据上下左右键改变cur或cur1
* 子元素item position 上下左右值不定
*
* 如第一个screen盒子
* 按上cur1同级第一个item
* 按左或下cur1同级第三个item
* 按右无反应
*
* 如第二个screen盒子
* 按上或左cur1同级第二个item(按右无效),再按上或右cur1同级第三个item(按左无效),再按上或左cur1同级第四个item(按右无效),再按上cur1第一screen第四个item
*
*/
document.onkeydown = onKeyDown;
var loger = document.getElementById('log');
function onScreenClick(obj) {
document.querySelector('.cur').classList.remove('cur');
obj.classList.add('cur');
}
function log(msg) {
var item = document.createElement('li');
item.innerHTML = msg;
loger.append(item);
}
function onKeyDown(event) {
switch (event.which) {
case 38:
onUp();
return false;
case 39:
onRight();
return false;
case 40:
onDown();
return false;
case 37:
onLeft();
return false;
case 13:
onConfirm();
return false;
}
return true;
}
function onUp() {
log('onUp');
var currItem = document.querySelector('.cur').querySelector('.cur1');
var top = currItem.offsetTop, minOffset = top, minItem = null;
document.querySelector('.cur').querySelectorAll('.item:not(.cur1)').forEach(function (a, b) {
var thisTop = a.offsetTop;
if (thisTop < top && top - thisTop < minOffset) {
minOffset = top - thisTop;
minItem = a;
}
});
if (minItem != null) {
currItem.classList.remove('cur1');
minItem.classList.add('cur1');
}
}
function onRight() {
log('onRight')
var currItem = document.querySelector('.cur').querySelector('.cur1');
var left = currItem.offsetLeft, minOffset = 10000, minItem = null;
document.querySelector('.cur').querySelectorAll('.item:not(.cur1)').forEach(function (a, b) {
var thisLeft = a.offsetLeft;
if (thisLeft > left && thisLeft-left < minOffset) {
minOffset = thisLeft - left;
minItem = a;
}
});
if (minItem != null) {
currItem.classList.remove('cur1');
minItem.classList.add('cur1');
}
}
function onLeft() {
log('onLeft')
var currItem = document.querySelector('.cur').querySelector('.cur1');
var left = currItem.offsetLeft, minOffset = 10000, minItem = null;
document.querySelector('.cur').querySelectorAll('.item:not(.cur1)').forEach(function (a, b) {
var thisLeft = a.offsetLeft;
if (thisLeft < left && -thisLeft + left < minOffset) {
minOffset = -thisLeft + left;
minItem = a;
}
});
if (minItem != null) {
currItem.classList.remove('cur1');
minItem.classList.add('cur1');
}
}
function onDown() {
log('onDown')
var currItem = document.querySelector('.cur').querySelector('.cur1');
var top = currItem.offsetTop, minOffset = -1, minItem = null;
document.querySelector('.cur').querySelectorAll('.item:not(.cur1)').forEach(function (a, b) {
var thisTop = a.offsetTop;
if (thisTop > top && (minOffset==-1 || -top + thisTop < minOffset)) {
minOffset = -top + thisTop;
minItem = a;
}
});
if (minItem != null) {
currItem.classList.remove('cur1');
minItem.classList.add('cur1');
}
}
function onConfirm() {
console.log('onConfirm')
}
</script>
</html>
daswcszxw 2020-12-30
- 打赏
- 举报
这里的位置，是指每个item距离四周边缘的位置吗？
把所有item 位置 存入 四周距离数组，根据 按键 比如向左，找 四周距离数组 里找 距离左边 是否处理边缘。
我有尝试这么写代码，但是没有想到用什么办法关联DOM节点和数组的对应关系。
如果你说都位置是指DOM节点渲染的上下位置，那满足不了需求。
像第二个screen，由于position定位控制，第一个item DIV 在屏幕的最下面一个。
