<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>直播列表</title>
<style>
html,body,ul,li{
margin: 0;
padding: 0;
font-size: 24px;
color: #f0f0f0;
}
li{
list-style:none;
}
#bgc{
width: 160px;
height: 720px;
background: #000000;
opacity: 0.85;
}
.dist{
width: 100px;
height: 20px;
padding: 25px 0px 25px 60px;
}
</style>
<script src="js/jquery-1.11.0.js"></script>
</head>
<body>
<div id="bgc">
<ul class="bag1">
<li class="dist" id="collect">收藏</li>
<li class="dist">常看</li>
<li class="dist">高清</li>
<li class="dist" id="allchanel">全部</li>
<li class="dist">本地</li>
<li class="dist">央视</li>
<li class="dist">卫视</li>
<li class="dist">专业</li>
</ul>
</div>
<script>
window.οnlοad=function(){
var currentFocus=document.getElementById("collect");
currentFocus.focus();
currentFocus.style.backgroundColor="#FEB500";
currentFocus.style.color="#000000";
}
var list=document.getElementsByClassName("dist");
var index=0;
document.οnkeydοwn=function(e){
e=e||window.event;
e.preventDefault();
switch(e.keyCode){
case 38:{
if(index>0&&index<list.length){
index--;
$("ul").children("li").eq(index).css("background","#FEB500");
$("ul").children("li").eq(index).css("color","#000000");
$("ul").children("li").eq(index).focus();
$("ul").children("li").eq(index+1).css("background","#000000");
$("ul").children("li").eq(index+1).css("color","#f0f0f0");
$("ul").children("li").eq(index+1).blur();
}
break;
}
case 40:{
if(index<list.length)
{
index++;
$("ul").children("li").eq(index).css("background","#FEB500");
$("ul").children("li").eq(index).css("color","#000000");
$("ul").children("li").eq(index).focus();
$("ul").children("li").eq(index-1).css("background","#000000");
$("ul").children("li").eq(index-1).css("color","#f0f0f0");
$("ul").children("li").eq(index-1).blur();
if(index==list.length){
$("ul").children("li").eq(0).css("background","#FEB500");
$("ul").children("li").eq(0).css("color","#000000");
$("ul").children("li").eq(0).focus();
index=0;
}
}
break;
}
}
}
</script>
</body>
</html>
实现按上下键控制li的样式移动
最新推荐文章于 2021-09-16 16:40:08 发布