无规律div容器的焦点切换

无规律div容器的焦点切换

img

途径：引入js（function），键盘上下左右键控制焦点切换

条件 ：每个div有对应的id，每个div有一个info（信息）属性

01.以获得焦点为执行函数的前提条件，初始焦点设定在 div di=d01上

02.每个div有一个info（信息）属性，供函数调用。
up：键盘向上键，down：键盘向下键，left：键盘向左键，right：键盘向右键，enter：键盘enter键
up/down/left/right后面的值，是要去向的新div的id，如果值为“0”，则操作无效，保持原焦点不变

enter键打开信息中的网址或链接

04.去向新的div后，新div获得焦点，原div失去焦点，在新div获得焦点后，又可以执行引入的js函数，以此实现无规律指定切换焦点。

html代码：

<html>
<head>
<title>test</title>

<style>

#beijing{ margin:0px auto; width:100%; height:100%; background-color:blue;}

.active{background: palegreen  !important;}

.d01{width:200px; height:200px; position: absolute; top:10%; left:10%; margin:0 auto;background-color:pink; }

.d02{width:200px; height:200px; position: absolute; top:15%; left:30%; margin:0 auto;background-color:pink; }

.d03{width:200px; height:200px; position: absolute; top:20%; left:50%; margin:0 auto;background-color:pink; }

.d04{width:200px; height:200px; position: absolute; top:30%; left:70%; margin:0 auto;background-color:pink; }

.d05{width:200px; height:200px; position: absolute; top:50%; left:30%; margin:0 auto;background-color:pink; }

.d06{width:200px; height:200px; position: absolute; top:60%; left:10%; margin:0 auto;background-color:pink; }

.d07{width:200px; height:200px; position: absolute; top:60%; left:50%; margin:0 auto;background-color:pink; }

.body{margin:0; padding:0;}

</style>

</head>

<body class=body>

<div id="beijing">
  
     <div id=d01 class="d01 active" 
      info { up: div id=d02; down: div id=d03; left: div id=d04; right:div id=d05; enter: src="baidu.com"}>d01</div>

     <div id=d02 class="d02" 
      info { up: div id=d04; down: div id=d01; left: div id=d05; right:div id=d07; enter: src="baidu.com"}>d02</div>
     
     <div id=d03 class="d03" 
      info { up: div id=d05; down: div id=d02; left: div id=d01; right:div id=d04; enter: src="baidu.com"}>d03</div>

     <div id=d04 class="d04" 
      info { up: div id=d02; down: div id=d03; left: div id=d06; right:div id=d07; enter: src="baidu.com"}>d04</div>

     <div id=d05 class="d05" 
      info { up: div id=d03; down: div id=d02; left: div id=d01; right:div id=d04; enter: src="baidu.com"}>d05</div>

     <div id=d06 class="d06" 
      info { up: 0; down: 0; left: div id=d02; right: 0; enter: src="baidu.com"}>d06</div>

     <div id=d07 class="d07" 
      info { up: div id=d05; down: div id=d02; left: 0; right:div id=d04; enter: src="baidu.com"}>d07</div>
 
</div>


</body>
</html>

示例代码如下

<html>
<head>
    <title>test</title>

    <style>

        #beijing {
            margin: 0px auto;
            width: 100%;
            height: 100%;
            background-color: blue;
        }

        .active {
            background: palegreen !important;
        }

        .d01 {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 10%;
            left: 10%;
            margin: 0 auto;
            background-color: pink;
        }

        .d02 {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 15%;
            left: 30%;
            margin: 0 auto;
            background-color: pink;
        }

        .d03 {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 20%;
            left: 50%;
            margin: 0 auto;
            background-color: pink;
        }

        .d04 {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 30%;
            left: 70%;
            margin: 0 auto;
            background-color: pink;
        }

        .d05 {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 30%;
            margin: 0 auto;
            background-color: pink;
        }

        .d06 {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 60%;
            left: 10%;
            margin: 0 auto;
            background-color: pink;
        }

        .d07 {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 60%;
            left: 50%;
            margin: 0 auto;
            background-color: pink;
        }

        .body {
            margin: 0;
            padding: 0;
        }
    </style>

</head>

<body class=body>

    <div id="beijing">

        <div id=d01 class="d01 active"
             info ='{up:"d02",down:"d03",left:"d04",right:"d05",enter:"https://baidu.com" }'>d01</div>

        <div id=d02 class="d02"
             info='{up:"d04",down:"d01",left:"d05",right:"d07",enter:"https://baidu.com" }'>d02</div>

        <div id=d03 class="d03"
             info='{up:"d05",down:"d02",left:"d01",right:"d04",enter:"https://baidu.com" }'>d03</div>

        <div id=d04 class="d04"
             info='{up:"d02",down:"d03",left:"d06",right:"d07",enter:"https://baidu.com" }'>d04</div>

        <div id=d05 class="d05"
             info='{up:"d03",down:"d02",left:"d01",right:"d04",enter:"https://baidu.com" }'>d05</div>

        <div id=d06 class="d06"
             info='{up: 0,down: 0,left:"d02",right: 0,enter:"https://ask.csdn.net" }'>d06-问答</div>

        <div id=d07 class="d07"
             info='{up:"d05",down:"d02",left:0,right:"d04",enter:"https://www.w3dev.cn/" }'>d07-w3dev</div>

    </div>
    <script>
        var curDiv = document.getElementById('d01');//初始化焦点div
       
        document.onkeydown = function (e) {
            var code = e.keyCode,key='';
            switch (code) {
                case 37://左
                    key = 'left';
                    break;
                case 39://右
                    key = 'right';
                    break;
                case 38://上
                    key = 'up';
                    break;
                case 40://下
                    key = 'down';
                    break;
                case 13:
                    key = 'enter';
            }
            if (!key) return;//按的其他键退出
            var o = eval(`(${curDiv.getAttribute('info')})`);//info属性值转json的对象
            if (key == 'enter') window.open(o[key]);//enter键打开网址
            else {
                var value = o[key]+"";//获取小键盘方向键对应的值
                if (value != "0") {//不是0
                    curDiv.classList.remove('active');//原焦点div去掉active样式
                    curDiv = document.getElementById(value)//获取焦点div
                    curDiv.classList.add('active')//添加焦点样式
                }
            }
        }
    </script>

</body>
</html>

我试试看吧，稍等

info属性？

是data-info 自定义属性嘛？

我觉得可以用js抓data-info 当然要设置成Json字符串哈 方便解析 然后获取抓取进行节点判断