index.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>跑步积分赛,抽奖赢豪礼</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7. <meta name="screen-orientation" content="portrait">
  8. <meta name="x5-orientation" content="portrait">
  9. <link rel="stylesheet" type="text/css" href="./css/parkour.css">
  10. <style>
  11. #btn_img {
  12. animation: mymove 1s infinite;
  13. -webkit-animation: mymove 1s infinite;
  14. /*Safari and Chrome*/
  15. animation-direction: alternate;
  16. /*轮流反向播放动画。*/
  17. animation-timing-function: ease-in-out;
  18. /*动画的速度曲线*/
  19. /* Safari 和 Chrome */
  20. -webkit-animation: mymove 1s infinite;
  21. -webkit-animation-direction: alternate;
  22. /*轮流反向播放动画。*/
  23. -webkit-animation-timing-function: ease-in-out;
  24. /*动画的速度曲线*/
  25. }
  26. @keyframes mymove {
  27. 0% {
  28. transform: scale(1);
  29. /*开始为原始大小*/
  30. }
  31. 25% {
  32. transform: scale(1.2);
  33. /*放大1.1倍*/
  34. }
  35. 50% {
  36. transform: scale(1);
  37. }
  38. 75% {
  39. transform: scale(1.2);
  40. }
  41. }
  42. @-webkit-keyframes mymove {
  43. 0% {
  44. transform: scale(1);
  45. /*开始为原始大小*/
  46. }
  47. 25% {
  48. transform: scale(1.2);
  49. /*放大1.1倍*/
  50. }
  51. 50% {
  52. transform: scale(1);
  53. }
  54. 75% {
  55. transform: scale(1.2);
  56. }
  57. }
  58. #show {
  59. -webkit-animation: arrowBig .5s ease;
  60. animation: arrowBig .5s ease;
  61. animation-iteration-count: 1;
  62. animation-fill-mode: forwards;
  63. -webkit-animation-iteration-count: 1;
  64. -webkit-animation-fill-mode: forwards;
  65. }
  66. @-webkit-keyframes arrowBig {
  67. 0% {
  68. -webkit-transform: scale(0);
  69. opacity: 0;
  70. }
  71. 100% {
  72. -webkit-transform: scale(1);
  73. opacity: 1;
  74. }
  75. }
  76. @keyframes arrowBig {
  77. 0% {
  78. transform: scale(0);
  79. opacity: 0;
  80. }
  81. 100% {
  82. transform: scale(1);
  83. opacity: 1;
  84. }
  85. }
  86. </style>
  87. </head>
  88. <body ms-controller="parkour">
  89. <audio loop muted src="./img/bg.mp3" id="mediaId" autoplay="autoplay" preload=""></audio>
  90. <audio muted src="./img/show.mp3" id="mediaTwo" preload=""></audio>
  91. <div id="view-main">
  92. <div id="btn-begin"><img src="./images/start.png" style="width:150%" alt=""></div>
  93. </div>
  94. <div id="view-game">
  95. <div id="score-head" class="topbar">
  96. <div id="scrore" class="score" style="display: none;">{{@curIntegral}}</div>
  97. <div id="time" class="time" style="display: none;">{{@costSeconds}}s</div>
  98. </div>
  99. <div id="count-down" class="bg-3"></div>
  100. <div id="obstacle-prompt" style="display: none;">
  101. <div class="obstacle-name">眩晕</div>
  102. <div class="time">{{@vertigoTime}}</div>
  103. </div>
  104. </div>
  105. <div id="popup-container">
  106. </div>
  107. <div id="show" style="display: none;" class="popup-item">
  108. <img src="./images/hongbao.png" style="width: 80%;
  109. position: absolute;
  110. z-index: 10;" alt="">
  111. <img src="./images/qian.png" style="width: 35%;
  112. position: absolute;
  113. left: 43%;
  114. top: 30%;
  115. z-index: 10;
  116. margin-left: -20%;" alt="">
  117. <img src="./images/show_btn.png" id="btn_img" style="width: 50%;
  118. position: absolute;
  119. left: 40%;
  120. top: 50%;
  121. z-index: 10;
  122. margin-left: -25%;" alt="">
  123. </div>
  124. <!-- <div id="show" class="popup-item" style="display: none;">
  125. <div style=" width: 10rem;
  126. left: 25%;
  127. z-index: 200;
  128. height: 5rem;
  129. top: 35%;
  130. position: absolute;" id="btn_img"></div>
  131. </div> -->
  132. <script src="https://sf3-ttcdn-tos.pstatp.com/obj/union-fe-nc/playable/sdk/playable-sdk.js"></script>
  133. <script type="text/javascript" charset="utf-8" src="./js/avalon.min.js"></script>
  134. <script type="text/javascript" charset="utf-8" src="./js/jquery-3.1.0.min.js"></script>
  135. <script type="text/javascript" charset="utf-8" src="./js/touch.min.js"></script>
  136. <script type="text/javascript" charset="utf-8" src="./js/parkour.js"></script>
  137. <script type="text/javascript" charset="utf-8" src="./js/resLoader.min.js"></script>
  138. <script type="text/javascript" charset="utf-8" src="./js/jquery.cookie.min.js"></script>
  139. <script>
  140. $('#btn_img').on('touchstart', function (e) {
  141. e.preventDefault()
  142. e.stopPropagation()
  143. window.playableSDK.sendEvent('clickDownloadBar', {
  144. section: 'section2',
  145. area: 'area3'
  146. });
  147. window.playableSDK.openAppStore()
  148. })
  149. </script>
  150. </body>
  151. </html>