index.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553
  1. <!DOCTYPE html>
  2. <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="initial-scale=1, user-scalable=no">
  5. <title>星爷粉丝大考验</title>
  6. <link rel="stylesheet" href="./riddle_files/style.css">
  7. <style type="text/css">
  8. #ads_c_tpc,[class^="ad_float_"],.a_h,.a_fl,.a_fr,.a_h,.a_pb,.a_pr,.a_pt,.wp.a_f,#ad_text,[id^="ad_headerbanner"],.ad1,#abgne_float_ad,.ad_pip,[id^="ad_thread"],.ad2,.a_cn,.bm.a_c,.a_mu,#ad_wrapper,[id^="ad_footerbanner"],.ad,.ad-980x90,.ad-text,[id^="pushAd_"],#sitefocus.focus,.top-ad,.adsbygoogle,.bm.a_c,[class^="ad_headerbanner"],#gg_head,.ad_column,#header_ad,[class$="_topad"],img[src*="/common/cf/"],#adtext,#ad_text,#ad_headerbanner {display:none!important;display:none}</style>
  9. <script></script><script></script><style>.lookupIBHDVP, .lookupforemostIBHDVP, .lookupdockedIBHDVP, .rowiframeIBHDVP, .celliframeIBHDVP, .iframeIBHDVP, .emptyIBHDVP, .barIBHDVP, .barforemostIBHDVP, .bardockedIBHDVP, .cellIBHDVP, .leftIBHDVP, .rightIBHDVP, .buttoncontainerIBHDVP, .buttonIBHDVP, .buttonimageIBHDVP, .waitingIBHDVP, .handleIBHDVP, .queryIBHDVP, .hintIBHDVP, .templateIBHDVP, .firstlevelgroupIBHDVP, .notfirstlevelgroupIBHDVP{
  10. background: none !important;
  11. border: 0px !important;
  12. border-style: none !important;
  13. color: black !important;
  14. direction: ltr !important;
  15. float: none !important;
  16. font-family: sans-serif !important;
  17. font-size: small !important;
  18. font-style: normal !important;
  19. font-variant: normal !important;
  20. font-weight: normal !important;
  21. letter-spacing: normal !important;
  22. line-height: normal !important;
  23. margin: 0px !important;
  24. padding: 0px !important;
  25. text-align: left !important;
  26. text-decoration: none !important;
  27. text-indent: 0px !important;
  28. text-transform: none !important;
  29. vertical-align: baseline !important;
  30. white-space: normal !important;
  31. }
  32. div.lookupIBHDVP{
  33. display: table !important;
  34. -webkit-transition: -webkit-box-shadow 0.25s linear, border-color 0.25s linear !important;
  35. }
  36. div.lookupforemostIBHDVP{
  37. }
  38. div.lookupdockedIBHDVP{
  39. }
  40. div.rowiframeIBHDVP{
  41. display: table-row !important;
  42. }
  43. div.rowiframeIBHDVP td.celliframeIBHDVP{
  44. display: table-cell !important;
  45. width: 100% !important;
  46. height: 100% !important;
  47. }
  48. td.celliframeIBHDVP iframe.iframeIBHDVP{
  49. display: inline !important;
  50. width: 100% !important;
  51. height: 100% !important;
  52. background-color: white !important;
  53. }
  54. iframe.emptyIBHDVP{
  55. background-image: url('chrome-extension://hljnlfolmbmibdjaikiaepgepgnldclj/img/128.png') !important;
  56. background-position: 50% 50% !important;
  57. background-repeat: no-repeat !important;
  58. }
  59. div.barIBHDVP{
  60. display: table-row !important;
  61. -webkit-transition: background 0.25s linear !important;
  62. width: 100% !important;
  63. cursor: move !important;
  64. background: lightgrey !important;
  65. }
  66. div.barforemostIBHDVP{
  67. background: #84b7ea !important;
  68. }
  69. div.bardockedIBHDVP{
  70. background: #336699 !important;
  71. }
  72. div.barIBHDVP div.cellIBHDVP{
  73. display: table-cell !important;
  74. vertical-align: middle !important;
  75. }
  76. div.leftIBHDVP{
  77. padding-right: 16px !important;
  78. text-align: left !important;
  79. }
  80. div.rightIBHDVP{
  81. white-space: nowrap !important;
  82. text-align: right !important;
  83. }
  84. span.buttoncontainerIBHDVP{
  85. display:inline !important;
  86. }
  87. a.buttonIBHDVP:link{
  88. display:inline !important;
  89. -webkit-user-select: none !important;
  90. color: transparent !important;
  91. }
  92. a.buttonIBHDVP img.buttonimageIBHDVP{
  93. display:inline !important;
  94. vertical-align: middle !important;
  95. }
  96. img.waitingIBHDVP{
  97. display:inline !important;
  98. cursor: pointer !important;
  99. -webkit-user-select: none !important;
  100. vertical-align: middle !important;
  101. padding-left: 6px !important;
  102. padding-right: 6px !important;
  103. }
  104. div.handleIBHDVP{
  105. display:block !important;
  106. cursor: se-resize !important;
  107. left: 100% !important;
  108. top: 100% !important;
  109. margin-left: -4px !important;
  110. margin-top: -4px !important;
  111. position: absolute !important;
  112. width: 8px !important;
  113. height: 8px !important;
  114. }
  115. input.queryIBHDVP{
  116. display:inline-block !important;
  117. background: white !important;
  118. vertical-align: top !important;
  119. border: 1px solid darkgrey !important;
  120. font-size: 13px !important;
  121. padding-top: 1px !important;
  122. padding-bottom: 1px !important;
  123. width: 12em !important;
  124. }
  125. .hintIBHDVP{
  126. color: lightgrey !important;
  127. font-style:italic !important;
  128. }
  129. select.templateIBHDVP{
  130. display:inline-block !important;
  131. background: white !important;
  132. font-size: 13px !important;
  133. border: 1px solid darkgrey !important;
  134. vertical-align: top !important;
  135. white-space: pre !important;
  136. width: 9em !important;
  137. margin-right: 2px !important;
  138. }
  139. optgroup.firstlevelgroupIBHDVP{
  140. color: blue !important;
  141. }
  142. .notfirstlevelgroupIBHDVP{
  143. color: black !important;
  144. }
  145. </style><style>.tipZCTDDQ, .arrowZCTDDQ, .arrowupZCTDDQ, .arrowdownZCTDDQ, .mainZCTDDQ, .closeZCTDDQ, .barZCTDDQ, .rowZCTDDQ, .cellZCTDDQ, .leftZCTDDQ, .rightZCTDDQ, .displaytitleZCTDDQ, .refreshZCTDDQ, .pagingZCTDDQ, .brandZCTDDQ, .textZCTDDQ, .leftlabelZCTDDQ, .selectZCTDDQ, .checkboxZCTDDQ, .waitingZCTDDQ, .buttoncontainerZCTDDQ, .buttonZCTDDQ, .buttonimageZCTDDQ, .flagZCTDDQ, .noticebarscontainerZCTDDQ, .noticebarZCTDDQ, .iframecontentZCTDDQ{
  146. background: none !important;
  147. border: 0px !important;
  148. border-style: none !important;
  149. color: black !important;
  150. direction: ltr !important;
  151. float: none !important;
  152. font-family: sans-serif !important;
  153. font-size: small !important;
  154. font-style: normal !important;
  155. font-variant: normal !important;
  156. font-weight: normal !important;
  157. letter-spacing: normal !important;
  158. line-height: normal !important;
  159. margin: 0px !important;
  160. padding: 0px !important;
  161. text-align: left !important;
  162. text-decoration: none !important;
  163. text-indent: 0px !important;
  164. text-transform: none !important;
  165. vertical-align: baseline !important;
  166. white-space: normal !important;
  167. }
  168. div.tipZCTDDQ{
  169. position: absolute !important;
  170. display:block !important;
  171. }
  172. div.arrowZCTDDQ{
  173. display:block !important;
  174. }
  175. canvas.arrowupZCTDDQ{
  176. display: inline !important;
  177. vertical-align: bottom !important;
  178. }
  179. canvas.downupZCTDDQ{
  180. display: inline !important;
  181. vertical-align: top !important;
  182. }
  183. div.mainZCTDDQ{
  184. display: block !important;
  185. }
  186. img.closeZCTDDQ{
  187. display: block !important;
  188. -webkit-transition: opacity 0.5s linear !important;
  189. float: right !important;
  190. margin-right: -5px !important;
  191. margin-top: -5px !important;
  192. }
  193. div.barZCTDDQ{
  194. display: table !important;
  195. margin-bottom: 4px !important;
  196. -webkit-user-select: none !important;
  197. width: 100% !important;
  198. }
  199. div.rowZCTDDQ{
  200. display: table-row !important;
  201. }
  202. div.cellZCTDDQ{
  203. display: table-cell !important;
  204. vertical-align: middle !important;
  205. }
  206. .leftZCTDDQ{
  207. padding-right: 16px !important;
  208. text-align: left !important;
  209. }
  210. .rightZCTDDQ{
  211. text-align: right !important;
  212. }
  213. span.refreshZCTDDQ{
  214. display: inline !important;
  215. }
  216. span.pagingZCTDDQ{
  217. display: inline !important;
  218. font-size: x-small !important;
  219. }
  220. span.buttoncontainerZCTDDQ{
  221. display: inline !important;
  222. }
  223. span.displaytitleZCTDDQ{
  224. display: inline !important;
  225. padding-left: 6px !important;
  226. font-size: small !important;
  227. font-weight: bold !important;
  228. }
  229. span.displaytitleZCTDDQ a:link{
  230. display: inline !important;
  231. color: #0645AD !important;
  232. text-decoration: none !important;
  233. }
  234. span.displaytitleZCTDDQ img{
  235. display: inline !important;
  236. }
  237. span.brandZCTDDQ{
  238. display: inline !important;
  239. font-size: x-small !important;
  240. }
  241. .brandZCTDDQ a{
  242. display: inline !important;
  243. font-size: x-small !important;
  244. }
  245. .brandZCTDDQ a:link{
  246. display: inline !important;
  247. color: #0645AD !important;
  248. text-decoration: none !important;
  249. }
  250. .brandZCTDDQ a:visited{
  251. display: inline !important;
  252. color: #0B0080 !important;
  253. text-decoration: none !important;
  254. }
  255. span.textZCTDDQ{
  256. display: inline !important;
  257. font-size: x-small !important;
  258. }
  259. label.leftlabelZCTDDQ{
  260. display: inline !important;
  261. font-size: x-small !important;
  262. margin-right: 3px !important;
  263. }
  264. select.selectZCTDDQ{
  265. display: inline-block !important;
  266. border: 1px solid darkgrey !important;
  267. white-space: pre !important;
  268. font-size: x-small !important;
  269. }
  270. input.checkboxZCTDDQ{
  271. display: inline-block !important;
  272. vertical-align: text-top !important;
  273. font-size: x-small !important;
  274. margin-right: 0.3em !important;
  275. }
  276. img.waitingZCTDDQ{
  277. display: inline !important;
  278. -webkit-user-select: none !important;
  279. vertical-align: middle !important;
  280. padding-left: 3px !important;
  281. }
  282. a.buttonZCTDDQ, a.buttonZCTDDQ:link{
  283. display: inline !important;
  284. -webkit-user-select: none !important;
  285. color: transparent !important;
  286. margin-right: 2px !important;
  287. }
  288. img.buttonimageZCTDDQ{
  289. display: inline !important;
  290. vertical-align: middle !important;
  291. }
  292. img.flagZCTDDQ{
  293. display: inline !important;
  294. vertical-align: middle !important;
  295. padding-bottom:2px !important;
  296. }
  297. img.buttonselectedZCTDDQ{
  298. display: inline !important;
  299. background: #dd8 !important;
  300. border: 1px solid #bb6 !important;
  301. margin: -1px !important;
  302. border-radius: 2px !important;
  303. }
  304. div.noticebarscontainerZCTDDQ{
  305. display: block !important;
  306. text-align: left !important;
  307. margin-bottom: 4px !important;
  308. overflow-y: auto !important;
  309. }
  310. div.noticebarZCTDDQ{
  311. display: block !important;
  312. background: white !important;
  313. font-size: x-small !important;
  314. border-left: 3px solid lightGrey !important;
  315. margin-bottom: 1px !important;
  316. padding-left: 2px !important;
  317. }
  318. div.noticebarZCTDDQ img{
  319. display: inline !important;
  320. margin-right: 1px !important;
  321. vertical-align: text-top !important;
  322. }
  323. div.noticebarZCTDDQ a{
  324. display: inline !important;
  325. font-family: sans-serif !important;
  326. font-style: normal !important;
  327. font-variant: normal !important;
  328. font-weight: normal !important;
  329. font-size: x-small !important;
  330. }
  331. div.noticebarZCTDDQ a:link{
  332. display: inline !important;
  333. color: #0645AD !important;
  334. text-decoration: none !important;
  335. }
  336. div.noticebarZCTDDQ a:visited{
  337. display: inline !important;
  338. color: #0B0080 !important;
  339. text-decoration: none !important;
  340. }
  341. iframe.iframecontentZCTDDQ{
  342. display: inline !important;
  343. width: 100% !important;
  344. }
  345. </style><style id="simplehl_hlstyle_OHGWSK">.simplehl1_OQZONK { display: inline!important;font-family:inherit!important; font-style:inherit!important; font-variant:inherit!important; font-weight:inherit!important; border-color: transparent !important; color: #000000!important; background-color: rgba(255,0,0,0.7)!important; font-size: inherit!important; -webkit-transition-property: color, background-color, -webkit-box-shadow; -webkit-transition-duration: 0.5s, 0.5s, 0.5s; -webkit-transition-timing-function: linear, linear, linear; padding: 0.2em!important; -webkit-box-shadow: rgba(0,0,0,0.42) 3px 3px 4px!important; border-radius: 6px!important; } .simplehl2_OQZONK { display: inline!important;font-family:inherit!important; font-style:inherit!important; font-variant:inherit!important; font-weight:inherit!important; border-color: transparent !important; color: #000000!important; background-color: rgba(255,165,0,0.7)!important; font-size: inherit!important; -webkit-transition-property: color, background-color, -webkit-box-shadow; -webkit-transition-duration: 0.5s, 0.5s, 0.5s; -webkit-transition-timing-function: linear, linear, linear; padding: 0.2em!important; -webkit-box-shadow: rgba(0,0,0,0.42) 3px 3px 4px!important; border-radius: 6px!important; } .simplehl3_OQZONK { display: inline!important;font-family:inherit!important; font-style:inherit!important; font-variant:inherit!important; font-weight:inherit!important; border-color: transparent !important; color: #000000!important; background-color: rgba(255,255,96,0.7)!important; font-size: inherit!important; -webkit-transition-property: color, background-color, -webkit-box-shadow; -webkit-transition-duration: 0.5s, 0.5s, 0.5s; -webkit-transition-timing-function: linear, linear, linear; padding: 0.2em!important; -webkit-box-shadow: rgba(0,0,0,0.42) 3px 3px 4px!important; border-radius: 6px!important; } .simplehl4_OQZONK { display: inline!important;font-family:inherit!important; font-style:inherit!important; font-variant:inherit!important; font-weight:inherit!important; border-color: transparent !important; color: #000000!important; background-color: rgba(96,255,96,0.7)!important; font-size: inherit!important; -webkit-transition-property: color, background-color, -webkit-box-shadow; -webkit-transition-duration: 0.5s, 0.5s, 0.5s; -webkit-transition-timing-function: linear, linear, linear; padding: 0.2em!important; -webkit-box-shadow: rgba(0,0,0,0.42) 3px 3px 4px!important; border-radius: 6px!important; } .simplehl5_OQZONK { display: inline!important;font-family:inherit!important; font-style:inherit!important; font-variant:inherit!important; font-weight:inherit!important; border-color: transparent !important; color: #000000!important; background-color: rgba(96,255,255,0.7)!important; font-size: inherit!important; -webkit-transition-property: color, background-color, -webkit-box-shadow; -webkit-transition-duration: 0.5s, 0.5s, 0.5s; -webkit-transition-timing-function: linear, linear, linear; padding: 0.2em!important; -webkit-box-shadow: rgba(0,0,0,0.42) 3px 3px 4px!important; border-radius: 6px!important; } .simplehl6_OQZONK { display: inline!important;font-family:inherit!important; font-style:inherit!important; font-variant:inherit!important; font-weight:inherit!important; border-color: transparent !important; color: #000000!important; background-color: rgba(255,96,255,0.7)!important; font-size: inherit!important; -webkit-transition-property: color, background-color, -webkit-box-shadow; -webkit-transition-duration: 0.5s, 0.5s, 0.5s; -webkit-transition-timing-function: linear, linear, linear; padding: 0.2em!important; -webkit-box-shadow: rgba(0,0,0,0.42) 3px 3px 4px!important; border-radius: 6px!important; } .simplehl7_OQZONK { display: inline!important;font-family:inherit!important; font-style:inherit!important; font-variant:inherit!important; font-weight:inherit!important; border-color: transparent !important; color: #ffffff!important; background-color: rgba(0,0,0,0.7)!important; font-size: inherit!important; -webkit-transition-property: color, background-color, -webkit-box-shadow; -webkit-transition-duration: 0.5s, 0.5s, 0.5s; -webkit-transition-timing-function: linear, linear, linear; padding: 0.2em!important; -webkit-box-shadow: rgba(0,0,0,0.42) 3px 3px 4px!important; border-radius: 6px!important; } </style><style id="simplehl_flashstyle_SRPINV">@-webkit-keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; }}</style></head>
  346. <body>
  347. <header>
  348. <div class="top"></div>
  349. <img class="head" src="./riddle_files/title.png">
  350. </header>
  351. <div class="container">
  352. <h2 class="text">听对白,答电影!星爷粉丝大考验!</h2>
  353. <div class="progress">
  354. <div class="rate"></div>
  355. <div id="currentRate">0%</div>
  356. <div class="trangle"></div>
  357. </div>
  358. <div id="result"></div>
  359. <div class="content" id="showPannel">
  360. <div class="title">
  361. <span>对白:</span>
  362. <div style="display:none">
  363. <audio src="#" id="audio_player" preload="none" type="audio/mpeg"> </audio>
  364. </div>
  365. <button id ="cantonese_audio">粤语</button>
  366. <span>&nbsp;</span>
  367. <button id="mandarin_audio">国语</button>
  368. <span>出自电影:</span>
  369. <br />
  370. <span id="answer" style="display:none">国产凌凌漆</span>
  371. </div>
  372. <div class="row">
  373. <input type="radio" name="answer" key="0" id="answerValue0" value="0" listorder="0" checked="checked">
  374. <label id="answer0" for="answerValue0">国产凌凌漆</label>
  375. </div>
  376. <div class="row">
  377. <input type="radio" name="answer" id="answerValue1" value="1" listorder="1">
  378. <label id="answer1" for="answerValue1">百变星君</label>
  379. </div>
  380. <div class="row">
  381. <input type="radio" name="answer" id="answerValue2" value="2" listorder="2">
  382. <label id="answer2" for="answerValue2">赌侠</label>
  383. </div>
  384. <div class="bottom"></div>
  385. </div>
  386. </div>
  387. <button type="button" class="btn next">下一题</button>
  388. <div id="playAgain">
  389. <p>
  390. <button type="button" class="btn reset">再来一次</button>
  391. <button type="button" class="btn share">分享到朋友圈</button>
  392. </p>
  393. </div>
  394. <a class="logo" href="http://mp.weixin.qq.com/s?__biz=MzI4MjA2MjE0MQ==&mid=246005295&idx=1&sn=490f8141976d607ba079d48f52a3fcd7#rd">
  395. 点击关注空中传媒
  396. </a>
  397. <div id="share">
  398. <img src="./riddle_files/pointo.png">
  399. <h4>
  400. 点击右上角分享到朋友圈<br>
  401. 让大家围观你的成绩吧^_^
  402. </h4>
  403. </div>
  404. <!-- <script src="./riddle_files/audio.min.js"></script>
  405. <script>
  406. audiojs.events.ready(function() {
  407. var as = audiojs.createAll();
  408. });
  409. </script>
  410. -->
  411. <script src="./riddle_files/jquery.js"></script>
  412. <script src="./riddle_files/fanstest.js"></script>
  413. <script>
  414. (function () {
  415. var imgUrl = 'http://game.ikongzhong.cn/games/xyfs/icon.png';
  416. var lineLink = 'http://game.ikongzhong.cn/games/xyfs/';
  417. var appid = '';
  418. function shareFriend() {
  419. WeixinJSBridge.invoke('sendAppMessage',{
  420. "appid": appid,
  421. "img_url": imgUrl,
  422. "img_width": "410",
  423. "img_height": "410",
  424. "link": lineLink,
  425. "desc": document.title,
  426. "title": document.title
  427. }, function(res) {
  428. _report('send_msg', res.err_msg);
  429. })
  430. }
  431. function shareTimeline() {
  432. WeixinJSBridge.invoke('shareTimeline',{
  433. "img_url": imgUrl,
  434. "img_width": "410",
  435. "img_height": "410",
  436. "link": lineLink,
  437. "desc": document.title,
  438. "title": document.title
  439. }, function(res) {
  440. _report('timeline', res.err_msg);
  441. });
  442. }
  443. function shareWeibo() {
  444. WeixinJSBridge.invoke('shareWeibo',{
  445. "content": document.title,
  446. "url": lineLink
  447. }, function(res) {
  448. _report('weibo', res.err_msg);
  449. });
  450. }
  451. document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
  452. // 发送给好友
  453. WeixinJSBridge.on('menu:share:appmessage', function(argv){
  454. shareFriend();
  455. });
  456. // 分享到朋友圈
  457. WeixinJSBridge.on('menu:share:timeline', function(argv){
  458. shareTimeline();
  459. });
  460. // 分享到微博
  461. WeixinJSBridge.on('menu:share:weibo', function(argv){
  462. shareWeibo();
  463. });
  464. }, false);
  465. })();
  466. </script>
  467. <!-- <script type="text/javascript" src="./riddle_files/h.js" charset="UTF-8"></script>
  468. <script type="text/javascript" src="./riddle_files/stats" charset="UTF-8"></script> -->
  469. </body></html>