实现按上下键控制li的样式移动

最新推荐文章于 2021-09-16 16:40:08 发布

swrd2014

最新推荐文章于 2021-09-16 16:40:08 发布

阅读量5.7k

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/u014041540/article/details/51088150

版权

JS 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!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>

swrd2014

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
实现按上下键控制li的样式移动

直播列表 html,body,ul,li{ margin: 0; padding: 0; font-size: 24px; color: #f0f0f0; } li{ list-style:none; } #bgc{ width: 160px; height: 720px; background
复制链接

扫一扫