root
/
tv_xiaoyouxi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
							<!DOCTYPE html>
<html>
	<head>
		<meta name="page-view-size" content="1280*720">
		<meta name="format-detection" content="telephone=no">
		<meta charset="utf-8" />
		<title>小游戏测试</title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<body>
		<div id="game_index" style="background: #FFFFFF;">

			<h1 id="title">小游戏测试项目</h1>
			<ul id="game_list">

			</ul>
		</div>

		<script type="text/javascript">
			// 页面适配
			var deviceWidth = window.innerWidth; //其它获取页面宽度代码，在某些盒子存在为0情况，所以选用此获取值方法。
			var deviceScale = deviceWidth / 1280;
			if (deviceWidth > 1280) {
				document.write('<meta name="viewport" content="width=1280,initial-scale=' + deviceScale + ', minimum-scale = ' +
					deviceScale + ', maximum-scale = ' + deviceScale + ', target-densitydpi=device-dpi">');
			} else {
				document.write('<meta name="viewport" content="width=1280, user-scalable=no">');
			}
			// 页面大小改变时刷新页面
			window.onresize = function() {
				window.location.reload();
			}

			var _ul = document.getElementById("game_list");

			var data = [{
					"pic": "<img src='img/icon/2048_icon.png'>",
					"title": "2048",
					"data_href": "../game/2048/index.html"
				}, {
					"pic": "",
					"title": "趣味英语测试",
					"data_href": "../game/EnglishTest/index.html"
				},
// 				{
// 					"pic": "",
// 					"title": "",
// 					"data_href": ""
// 				},
// 				{
// 					"pic": "",
// 					"title": "",
// 					"data_href": ""
// 				},
// 				{
// 					"pic": "",
// 					"title": "",
// 					"data_href": ""
// 				},
// 				{
// 					"pic": "",
// 					"title": "",
// 					"data_href": ""
// 				},
// 				{
// 					"pic": "",
// 					"title": "",
// 					"data_href": ""
// 				},
			]

			for (var i = 0; i < data.length; i++) {
				if(i==0){
					var current="current";
				}else{
					var current="";
				}
				var _li ="<li><div class='hotbutton "+current+"' data-view='"+i+"' data-href='"+data[i].data_href+"' data-id='"+i+"'><span class='pic'>"+data[i].pic+"</span><span class='title'>"+data[i].title+"</span></div></li>"
				_ul.innerHTML += _li;
			}


			document.onkeydown = function(event) {
				var _div = document.getElementsByClassName("current")[0];
				var _li = _div.parentElement;
				if (event.keyCode == 37 || event.keyCode == 38) { //左键  上键
					if (_div.getAttribute("data-id") != 0) {
						_div.className = "hotbutton";
						var prevEle = _li.previousSibling; //上一个
						prevEle.childNodes[0].className += " current"
					}

				} else if (event.keyCode == 39 || event.keyCode == 40) { //右键   下键
					if (_div.getAttribute("data-id") != data.length - 1) {
						_div.className = "hotbutton";
						var prevEle = _li.nextSibling; //下一个
						prevEle.childNodes[0].className += " current";
					}
				} else if (event.keyCode == 13) { //回车
					var data_href = _div.getAttribute("data-href");
					if (!data_href) {
						alert("不存在此项目！！！")
					} else {
						window.location.href = data_href;
					}
				}
			};
		</script>
	</body>
</html>