<!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>
uj5u.com熱心網友回復：
就是根據位置來判斷，哪一個符合方向要求并且最近就選擇，沒有就不選擇？是的話按照這個思路來查找就好了
uj5u.com熱心網友回復：
這里的位置，是指每個item距離四周邊緣的位置嗎？
把所有item 位置 存入 四周距離陣列，根據 按鍵 比如向左，找 四周距離陣列 里找 距離左邊 是否處理邊緣。
我有嘗試這么寫代碼，但是沒有想到用什么辦法關聯DOM節點和陣列的對應關系。
如果你說都位置是指DOM節點渲染的上下位置，那滿足不了需求。
像第二個screen，由于position定位控制，第一個item DIV 在螢屏的最下面一個。
uj5u.com熱心網友回復：
也不知道你具體要的是什么效果，看看是不是這樣的？
<!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>
uj5u.com熱心網友回復：
非常感謝！這就是我需要的功能。
我把每個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>
在按“下”時 cur1 “2” 更加合理，在按"右"時 cur1 "3" 更加合理。
所有item自身寬高不定，僅比較計算下一個元素的 四周距離 差值，顯然不夠理想。
我在找就近矩陣計算相關的演算法規則，如有對這方面了解，請指點，再次感謝。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/242641.html
標籤：JavaScript