index.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta content="yes" name="apple-mobile-web-app-capable"/>
  7. <meta content="yes" name="apple-touch-fullscreen"/>
  8. <meta content="telephone=no" name="format-detection"/>
  9. <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
  10. <title>父亲节到了,抢礼物送给老爸!</title>
  11. <link rel="stylesheet" type="text/css" href="css/game_min.css"/>
  12. <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  13. <script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
  14. <script type="text/javascript" src="js/game.min.js"></script>
  15. <style type="text/css">
  16. html,body{ width:100%; height:100%; margin:0 auto; padding:0; text-align:center; overflow:hidden; }
  17. div{margin:0; padding:0;}
  18. .layer1{ width:100%; height:100%; background: url(img/loading.jpg) top center no-repeat; background-size: auto 100%;}
  19. .layer2{ display:none; width:100%; height:100%; background: url(img/1.jpg) top center no-repeat; background-size: auto 100%;}
  20. .next2{ width:40%; height:20%; top:70%; position:relative; }
  21. .layer3{ display:none; width:100%; height:100%; }
  22. .layer4{ display:none; width:100%; height:100%; background: url(img/bg.jpg) 0 0 no-repeat; background-size: 100% 100%;}
  23. .layer4_img1{ width:80%; height:60%; top:3%; left:10%; }
  24. .layer4_img2{ width:38%; height:18%; top:70%; left:12%; }
  25. .layer4_img3{ width:38%; height:18%; top:70%; left:50%; }
  26. .layer4_result{ width:100%; height:10%; top:60%; text-align:center; font-size:18px; color:Red;}
  27. .shareinfo{ display:none; width:100%; height:100%; left:0;top:0; position:absolute;background: url(img/share.png) 0 0 no-repeat;
  28. background-size: 100% 100%; z-index:9999;filter:alpha(opacity=90);opacity:0.9; background-color:#404040;}
  29. #teach{padding:40px 32px}#teach div.info{float:left}
  30. #teach .info{text-align:middle}#teach .info span{vertical-align:middle}
  31. #game{background:#fff;position:absolute;left:0;top:0;right:0;bottom:0;background: url(img/bg.jpg) 0 0 no-repeat; background-size: 100% 100%;}
  32. #game.shake{-webkit-animation:shake 120ms}
  33. #game img{display:block;position:absolute}
  34. #game #current{height:40%;width:60%; top:25%; left:20%;}
  35. #game #next{width:50px;height:50px;top:20px;left:30px}
  36. #score{position:absolute;right:20px;top:20px;font-size:28px;color:#f00}
  37. #slash{position:absolute;left:0;top:0;bottom:0;right:0;opacity:0;-webkit-animation-duration:100ms}#slash.play{-webkit-animation:fadeout}
  38. #timer{display:none;position:absolute;left:20px;right:20px;bottom:20%;height:10px;font-size:20px;text-align:center;padding:0;line-height:1.5em}
  39. </style>
  40. </head>
  41. <body>
  42. <center>
  43. <div id="layer1" class="layer1"></div>
  44. <div id="layer2" class="layer2">
  45. <div id="start" class="next2" onclick="start();"></div>
  46. </div>
  47. <!-- 游戏部分start-->
  48. <div id="layer3" class="layer3">
  49. <div id="teach" style="display: none;">
  50. <div class="info">
  51. <img src="img/red.png" width="130" height="130">
  52. </div>
  53. <div class="info">
  54. <img src="img/green.png" width="130" height="130">
  55. </div>
  56. </div>
  57. <!-- <div id="start" style="display: block;">再来一盘</div>-->
  58. <div id="game" style="display: none;">
  59. <img id="current" src="img/red.png">
  60. <img id="next" src="img/red.png">
  61. <div id="score">战果:0</div>
  62. <div id="slash" class="" style="-webkit-animation: 3000ms; background: red;"></div>
  63. </div>
  64. <div id="timer" style="display: block;">15,00</div>
  65. <div id="share" style="display: block;"></div>
  66. <!-- <div id="share-mask"></div>-->
  67. </div>
  68. <!-- 游戏部分end-->
  69. <div id="layer4" class="layer4">
  70. <img class="layer4_img1" src="img/result.png" />
  71. <div class="layer4_result">给老爸抢礼物,好厉害抢到 <strong>1</strong> 个!牛叉~</div>
  72. <img class="layer4_img2" src="img/share_btn.png" onclick="fnshare();"/>
  73. <img class="layer4_img3" src="img/again.png" onclick="newgame();"/>
  74. </div>
  75. <div class="shareinfo" onclick="fnsharehidd();">
  76. </div>
  77. </center>
  78. <script language="javascript" type="text/javascript">
  79. var dh = $(document).height();
  80. var dw = $(document).width();
  81. var present = parseInt($(document).height()) / 960;
  82. //var dw = parseInt(640 * present);
  83. if (dw > parseInt(640 * present)) {
  84. dw = parseInt(640 * present);
  85. }
  86. $("#layer1").css("height", dh + "px");
  87. $("#layer1").css("width", dw + "px");
  88. $("#layer2").css("height", dh + "px");
  89. $("#layer2").css("width", dw + "px");
  90. $("#layer3").css("height", dh + "px");
  91. $("#layer3").css("width", dw + "px");
  92. $("#layer4").css("height", dh + "px");
  93. $("#layer4").css("width", dw + "px");
  94. var imgNum = 0;
  95. var images = [];
  96. preLoadImg();
  97. function preLoadImg() {
  98. images.push("img/1.jpg");
  99. images.push("img/again.png");
  100. images.push("img/bg.jpg");
  101. images.push("img/green.png");
  102. images.push("img/loading.jpg");
  103. images.push("img/red.png");
  104. images.push("img/result.png");
  105. images.push("img/share.png");
  106. images.push("img/share_btn.png");
  107. $.imgpreload(images,
  108. {
  109. each: function() { },
  110. all: function() {
  111. // $(".fakeloader").fadeOut(200);
  112. // $(".layer1").show();
  113. timer();
  114. }
  115. });
  116. }
  117. var timeID;
  118. var times = 0;
  119. function timer() {
  120. timeID = setTimeout("timer()", 2000);
  121. if (parseInt(times) > 0) {
  122. $(".layer1").hide();
  123. $(".layer2").show();
  124. clearTimeout(timeID);
  125. }
  126. else {
  127. times++;
  128. }
  129. }
  130. function newgame() {
  131. $(".layer4").hide();
  132. //$(".layer3").show();
  133. start();
  134. }
  135. function fnshare() {
  136. $(".shareinfo").show();
  137. }
  138. function fnsharehidd() {
  139. $(".shareinfo").hide();
  140. }
  141. </script>
  142. <script src="js/tiger.js"></script>
  143. </body>
  144. </html>