无规律div容器的焦点切换
途径：引入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>
微信扫一扫
