You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

149 lines
5.3 KiB

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>建党百年</title>
  6. <meta name="keywords" content="keyword1,keyword2,keyword3">
  7. <meta name="description" content="this is my page">
  8. <meta name="content-type" content="text/html; charset=UTF-8">
  9. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
  10. <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
  11. <script src="js/comment.js" type="text/javascript" charset="utf-8"></script>
  12. <link rel="stylesheet" type="text/css" href="css/common.css" />
  13. <link rel="stylesheet" type="text/css" href="css/intoGame.css" />
  14. </head>
  15. <style type="text/css">
  16. .btn {
  17. animation: btnlive 0.5s linear;
  18. }
  19. @keyframes btnlive {
  20. 0% {
  21. bottom: 0rem;
  22. }
  23. 100% {
  24. bottom: 1rem;
  25. }
  26. }
  27. .title {
  28. animation: titlelive 0.5s linear 0.1s;
  29. }
  30. @keyframes titlelive {
  31. 0% {
  32. bottom: 0rem;
  33. }
  34. 100% {
  35. bottom: 0.2rem;
  36. }
  37. }
  38. .btnscale {
  39. transform: scale(0.9);
  40. transition: all 0.6s;
  41. }
  42. </style>
  43. <body>
  44. <audio id="bgmAudio" hidden="true" autoplay="autoplay" loop="true">
  45. <source src="img/soundBgm.mp3" type="audio/mp3" />
  46. <!--您的浏览器不支持 audio 标签。-->
  47. </audio>
  48. <div id="wrap">
  49. <div class="masks"></div>
  50. <div class="bgm"><img src="img/intoGame.png" /></div>
  51. <div class="btn">
  52. 进入活动
  53. </div>
  54. <div class="ruleCont">
  55. <p class="title">活动规则</p>
  56. <div class="ruleText">
  57. <ul>
  58. <li>
  59. 1.活动时间<br /> 2021年XX月XX日至2021年XX月XX日。
  60. <!-- <br /> 2.参加人员
  61. <br /> 北京海淀上庄镇全体居民。 -->
  62. <br /> 2.活动规则
  63. <!--<br /> ①参与活动时候,系统自动获取个人微信头像,请按照弹窗提示填写信息;
  64. <br /> ②本次闯关游戏共有五关,每一关的游戏规则请认真阅读当前关卡的提示信息。-->
  65. <br />第一关,请将地图下方的场景图片移动至地图中虚框的位置;
  66. <br />第二关,请根据上方的时间找到对应的战役,并进行连线;
  67. <br />第三关,请通过翻转的方式将上方的人物和下方的姓名进行正确组合;
  68. <br />第四关,请根据上方的时间选择正确的会议名称;
  69. <br />第五关,请根据问题描述选择出正确答案。
  70. <!-- <br /> 3.奖项设置
  71. <br /> 在2021年XX月XX日24时前完成云长征路线的参与者,完成闯关任务的请参加后面的转盘抽奖,每个微信号只可进行一次抽奖,抽奖结果请截图保存至手机,按照抽奖结果页面提示信息进行奖品兑换。 奖品领取时间和地点,活动结束后将在活动结果页面上发布,敬请关注,有任何问题请致电活动客服人员。 -->
  72. <br /> 3.参考资料
  73. <br /> 本活动中长征点位弹窗内容以及答题闯关中的长征知识参考资料为《红军长征史》,《红军长征史》由中共党史出版社于2006年3月出版,由中共中央党史研究室第一研究部主编。 <!-- 本活动程序中长征路线根据1934年10月至1935年10月红一方面军(即中央红军)的长征行军路线而设定。 -->
  74. <br /> 本活动素材均来源于百度百科,如涉版权问题请联系我方,我方将及时处理。
  75. <br /> 4.版权说明
  76. <br />参与活动前,请详细阅读活动规则及相关条款。最终解释权归本公司所有。
  77. <br /> 5.客服电话:XXXXXXXXXXX
  78. </li>
  79. <p class="line"></p>
  80. <p class="close">关闭</p>
  81. </ul>
  82. </div>
  83. </div>
  84. <div class="audioImg">
  85. <img src="img/audioIcon.png" />
  86. </div>
  87. </div>
  88. </body>
  89. </html>
  90. <script src="js/common.js" type="text/javascript" charset="utf-8"></script>
  91. <script type="text/javascript">
  92. $(document).ready(function() {
  93. function  audioAutoPlay(id)  {        
  94. var  audio  =  document.getElementById(id),
  95.             play  =   function ()  {                
  96. audio.play();                
  97. document.removeEventListener("touchstart",  play,  false);            
  98. };        
  99. audio.play();        
  100. document.addEventListener("WeixinJSBridgeReady",  function ()  {            
  101. play();        
  102. },  false);        
  103. document.addEventListener('YixinJSBridgeReady',  function ()  {            
  104. play();        
  105. },  false);        
  106. document.addEventListener("touchstart",  play,  false);    
  107. }    
  108. audioAutoPlay('bgmAudio');
  109. var clickState = true;
  110. $('.btn').click(function() {
  111. if(clickState) {
  112. window.location.href = "game1.html?audioState=" + audioState
  113. }
  114. //console.log(audioState)
  115. })
  116. $(".btn").on("touchstart", function(e) {
  117. // e.preventDefault(); //阻止其他事件
  118. $(this).toggleClass("btnscale")
  119. })
  120. $('.close').on('touchstart', function(e) {
  121. e.preventDefault(); //阻止其他事件
  122. $('.ruleText').css('display', 'none');
  123. $('.masks').css('display', 'none');
  124. setTimeout(function() {
  125. clickState = true
  126. }, 1000)
  127. })
  128. $('.title').on('touchstart', function(e) {
  129. $('.ruleText').css('display', 'block');
  130. $('.masks').css('display', 'block');
  131. })
  132. })
  133. </script>