dabaixiaowo2015
2022-06-27 09:43
采纳率: 100%
浏览 86
已结题

无规律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>

3条回答 默认 最新

相关推荐 更多相似问题