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