index.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6. <meta name="format-detection" content="telephone=no" />
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  8. <meta name="author" content="Tencent-TGideas">
  9. <link rel="stylesheet" href="css/style.css">
  10. <title>英雄难过美人关</title>
  11. <style>
  12. body {
  13. margin: 0px;
  14. padding: 0px;
  15. }
  16. section {
  17. width: 100%;
  18. height: auto;
  19. }
  20. h3 {
  21. color: #aaa;
  22. font-size: 22px;
  23. }
  24. span {
  25. color: #f4e93b;
  26. font-size: 18px;
  27. }
  28. strong {
  29. color: #f4e93b;
  30. }
  31. a {
  32. text-decoration: none;
  33. }
  34. header {
  35. text-align: center;
  36. padding: 5px;
  37. }
  38. section {
  39. width: 320px;
  40. margin: auto;
  41. }
  42. footer {
  43. text-align: center;
  44. padding-top: 12px;
  45. width: 100%;
  46. }
  47. .info {
  48. color: #fff;
  49. }
  50. .timecounter {
  51. color: #fff;
  52. float: left;
  53. margin-left: 5px;
  54. }
  55. .piccell {
  56. display: block;
  57. background-repeat: no-repeat;
  58. float: left;
  59. position: relative;
  60. }
  61. .picbox {
  62. width: 320px;
  63. height: 280px;
  64. clear: both;
  65. }
  66. .progressbox {
  67. width: 320px;
  68. margin-bottom: 10px;
  69. float: left;
  70. }
  71. .floatmask {
  72. position: absolute;
  73. z-index: 100;
  74. }
  75. .showborder {
  76. border: red solid 1px;
  77. }
  78. .btnbar {
  79. text-align: center;
  80. width: auto;
  81. }
  82. .button {
  83. height: 30px;
  84. line-height: 30px;
  85. font-size: 16px;
  86. color: #fff;
  87. width: 100px;
  88. border: #eea236 solid 1px;
  89. border-radius: 4px;
  90. background: #f0ad4e;
  91. display: block;
  92. text-align: center;
  93. margin-left: 100px;
  94. margin-top: 10px;
  95. }
  96. .share {
  97. width: 100%;
  98. display: none;
  99. opacity: 0.90;
  100. position: absolute;
  101. top: 0px;
  102. left: 0px;
  103. z-index: 10000;
  104. background-color: #000;
  105. height: 600px;
  106. text-align: center;
  107. }
  108. .share img {
  109. margin-top: 30px;
  110. width: 80%;
  111. }
  112. </style>
  113. <div style="display:none;"><script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_5286527'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s6.cnzz.com/stat.php%3Fid%3D5286527%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
  114. </div>
  115. <script src="js/zepto.js" type="text/javascript"></script>
  116. <script src="js/data.js?v=20140811" id="gamedata" data-version="20140811" type="text/javascript"></script>
  117. <script src="js/game.js" type="text/javascript"></script>
  118. </head>
  119. <body>
  120. <header>
  121. <h3>英雄难过美人关-第<strong id="currLevel">1</strong>关</h3>
  122. </header>
  123. <section >
  124. <div >
  125. <div class="info">共<span id="totalNum">6</span>处不同,已找<span id="clickNum">0</span>次,正确<span id="correctNum">0</span>次,正确率<span id="correctPecent">0</span>%</div>
  126. <div class="progressbox">
  127. <div class="progress" style="width:260px;float:left;">
  128. <div class="progress-bar" id="progressbar"></div>
  129. </div>
  130. <div class="timecounter"> <span id="timeshow">60</span>秒 </div>
  131. </div>
  132. </div>
  133. <div class="picbox" id="picbox">
  134. <div class="piccell" id="leftpic"> </div>
  135. <div class="piccell" id="rightpic"> </div>
  136. </div>
  137. </section>
  138. <footer>
  139. <!--<a href="#" target="_blank" id="bottom_banner"><img src="" style="width:100%"></a> -->
  140. <div style="width:100%">
  141. <a href="" style="width:49%;float:left; line-height:3em;color:#fff;font-size:14px;float:left;margin-left:0px;background: #383838">更多游戏➟</a>
  142. <a href="http://mp.weixin.qq.com/s?__biz=MjM5OTE3NDIzMg==&mid=200696073&idx=1&sn=f3c6abd9de1873662d66da120029e9ed&scene=1&from=singlemessage&isappinstalled=0#rd" style="color:#ffcc00;font-size:14px;float:left;margin-left:0px;width:49%;float:right; line-height:3em;background: #383838">『金华美食』</a></div>
  143. </footer>
  144. <div class="share" id="share"> <img src="images/share1.png" /> </div>
  145. <script type="text/javascript">
  146. $(function(){
  147. picgame.gamestart();
  148. });
  149. </script>
  150. <div style="display:none;"><script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_5286527'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s6.cnzz.com/stat.php%3Fid%3D5286527%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
  151. </div>
  152. </body>
  153. </html>