index.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  6. <meta name="viewport" content="width=640, user-scalable=no">
  7. <meta http-equiv="pragma" content="no-cache">
  8. <meta http-equiv="Cache-Control" content="no-cache">
  9. <meta http-equiv="Expires" content="0">
  10. <meta name="apple-mobile-web-app-capable" content="yes">
  11. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  12. <meta name="format-detection" content="telephone=no">
  13. <meta name="apple-mobile-web-app-title" content="">
  14. <title>试玩</title>
  15. <style>
  16. * {
  17. margin: 0px;
  18. padding: 0px;
  19. box-sizing: border-box;
  20. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  21. }
  22. html {
  23. max-width: 640px;
  24. margin: 0 auto;
  25. }
  26. body {
  27. font-family: "PingFangSC-Regular", "sans-serif", "STHeitiSC-Light", "微软雅黑", "Microsoft YaHei";
  28. font-size: 50px;
  29. /* line-height: 1.5em; */
  30. color: #212121;
  31. -webkit-user-select: none;
  32. user-select: none;
  33. -webkit-touch-callout: none;
  34. touch-callout: none;
  35. }
  36. html,
  37. body,
  38. .page_box {
  39. width: 100%;
  40. height: 100%;
  41. position: relative;
  42. overflow: hidden;
  43. }
  44. .video[ishivideo="true"]::-webkit-media-controls {
  45. display: none !important;
  46. }
  47. .video[ishivideo="true"]::-moz-media-controls {
  48. display: none !important;
  49. }
  50. .video[ishivideo="true"]::-o-media-controls {
  51. display: none !important;
  52. }
  53. .video[ishivideo="true"]::media-controls {
  54. display: none !important;
  55. }
  56. .page {
  57. background-color: #eee;
  58. }
  59. .page {
  60. display: flex;
  61. justify-content: center;
  62. align-items: center;
  63. flex-wrap: wrap;
  64. width: 100%;
  65. height: 100%;
  66. position: absolute;
  67. left: 0;
  68. top: 0;
  69. overflow: hidden;
  70. }
  71. .page.hide {
  72. display: none;
  73. }
  74. /*==================================*/
  75. .page.inTop {
  76. -webkit-animation: ShowTop .5s ease-out both;
  77. animation: ShowTop .5s ease-out both;
  78. }
  79. .page.outTop {
  80. -webkit-animation: HideTop .5s ease-out both;
  81. animation: HideTop .5s ease-out both;
  82. }
  83. .page.inDown {
  84. -webkit-animation: ShowDown .5s ease-out both;
  85. animation: ShowDown .5s ease-out both;
  86. }
  87. .page.outDown {
  88. -webkit-animation: HideDown .5s ease-out both;
  89. animation: HideDown .5s ease-out both;
  90. }
  91. @-webkit-keyframes ShowTop {
  92. 0% {
  93. -webkit-transform: translateY(100%);
  94. }
  95. 100% {
  96. -webkit-transform: translateY(0);
  97. }
  98. }
  99. @keyframes ShowTop {
  100. 0% {
  101. transform: translateY(100%);
  102. }
  103. 100% {
  104. transform: translateY(0);
  105. }
  106. }
  107. @-webkit-keyframes HideTop {
  108. 0% {
  109. -webkit-transform: translateY(0);
  110. }
  111. 100% {
  112. -webkit-transform: translateY(-100%);
  113. }
  114. }
  115. @keyframes HideTop {
  116. 0% {
  117. transform: translateY(0);
  118. }
  119. 100% {
  120. transform: translateY(-100%);
  121. }
  122. }
  123. @-webkit-keyframes ShowDown {
  124. 0% {
  125. -webkit-transform: translateY(-100%);
  126. }
  127. 100% {
  128. -webkit-transform: translateY(0);
  129. }
  130. }
  131. @keyframes ShowDown {
  132. 0% {
  133. transform: translateY(-100%);
  134. }
  135. 100% {
  136. transform: translateY(0);
  137. }
  138. }
  139. @-webkit-keyframes HideDown {
  140. 0% {
  141. -webkit-transform: translateY(0);
  142. }
  143. 100% {
  144. -webkit-transform: translateY(100%);
  145. }
  146. }
  147. @keyframes HideDown {
  148. 0% {
  149. transform: translateY(0);
  150. }
  151. 100% {
  152. transform: translateY(100%);
  153. }
  154. }
  155. /*==================================*/
  156. #jingtai {
  157. animation: mymove 1s infinite;
  158. -webkit-animation: mymove 1s infinite;
  159. /*Safari and Chrome*/
  160. animation-direction: alternate;
  161. /*轮流反向播放动画。*/
  162. animation-timing-function: ease-in-out;
  163. /*动画的速度曲线*/
  164. /* Safari 和 Chrome */
  165. -webkit-animation: mymove 1s infinite;
  166. -webkit-animation-direction: alternate;
  167. /*轮流反向播放动画。*/
  168. -webkit-animation-timing-function: ease-in-out;
  169. /*动画的速度曲线*/
  170. }
  171. #jinbi {
  172. -webkit-animation: arrowBig 1.2s .5s ease-in-out infinite;
  173. animation: arrowBig 1.2s .5s ease-in-out infinite;
  174. -webkit-transform: scale(1.5);
  175. transform: scale(1.5);
  176. }
  177. #shou {
  178. animation: arrowBig .5s infinite;
  179. /*Safari and Chrome*/
  180. animation-direction: alternate;
  181. /*轮流反向播放动画。*/
  182. animation-timing-function: ease-in-out;
  183. /*动画的速度曲线*/
  184. /* Safari 和 Chrome */
  185. -webkit-animation: arrowBig .5s infinite;
  186. -webkit-animation-direction: alternate;
  187. /*轮流反向播放动画。*/
  188. -webkit-animation-timing-function: ease-in-out;
  189. /*动画的速度曲线*/
  190. }
  191. @-webkit-keyframes arrowBig {
  192. 0% {
  193. -webkit-transform: translate(0, 0);
  194. }
  195. 100% {
  196. -webkit-transform: translate(15%, 15%)
  197. }
  198. }
  199. @keyframes arrowBig {
  200. 0% {
  201. transform: translate(0, 0);
  202. }
  203. 100% {
  204. transform: translate(15%, 15%)
  205. }
  206. }
  207. .hongbao {
  208. -webkit-animation: arrowY 1.2s ease;
  209. animation: arrowY 1.2s ease;
  210. /* -webkit-transform: scale(1.5);
  211. transform: scale(1.5); */
  212. transform: translateY(-100%);
  213. -webkit-transform: translateY(-100%);
  214. animation-iteration-count: 1;
  215. animation-fill-mode: forwards;
  216. -webkit-animation-iteration-count: 1;
  217. -webkit-animation-fill-mode: forwards;
  218. }
  219. .sex {
  220. transform: translateY(30%);
  221. -webkit-transform: translateY(30%);
  222. }
  223. .nan {
  224. display: inline-block;
  225. position: relative;
  226. transform: translateX(-80%);
  227. -webkit-transform: translateX(-80%);
  228. -webkit-animation: arrowXj 1.2s ease;
  229. animation: arrowXj 1.2s ease;
  230. /* -webkit-transform: scale(1.5);
  231. transform: scale(1.5); */
  232. animation-iteration-count: 1;
  233. animation-fill-mode: forwards;
  234. -webkit-animation-iteration-count: 1;
  235. -webkit-animation-fill-mode: forwards;
  236. }
  237. .nv {
  238. display: inline-block;
  239. position: relative;
  240. transform: translateX(80%);
  241. -webkit-transform: translateX(80%);
  242. -webkit-animation: arrowXan 1.2s ease;
  243. animation: arrowXan 1.2s ease;
  244. /* -webkit-transform: scale(1.5);
  245. transform: scale(1.5); */
  246. animation-iteration-count: 1;
  247. animation-fill-mode: forwards;
  248. -webkit-animation-iteration-count: 1;
  249. -webkit-animation-fill-mode: forwards;
  250. }
  251. .book {
  252. transform: translateY(20%);
  253. -webkit-transform: translateY(20%);
  254. /* margin-top: 35% */
  255. }
  256. .bookTop {
  257. transform: translateY(-200%);
  258. -webkit-transform: translateY(-200%);
  259. -webkit-animation: arrowTop 1.2s ease;
  260. animation: arrowTop 1.2s ease;
  261. /* -webkit-transform: scale(1.5);
  262. transform: scale(1.5); */
  263. animation-iteration-count: 1;
  264. animation-fill-mode: forwards;
  265. -webkit-animation-iteration-count: 1;
  266. -webkit-animation-fill-mode: forwards;
  267. }
  268. @-webkit-keyframes arrowY {
  269. 0% {
  270. -webkit-transform: translateY(-100%);
  271. }
  272. 30% {
  273. -webkit-transform: translateY(0%);
  274. }
  275. 40% {
  276. -webkit-transform: translateY(-5%);
  277. }
  278. 50% {
  279. -webkit-transform: translateY(-10%);
  280. }
  281. 60% {
  282. -webkit-transform: translateY(-10%);
  283. }
  284. 70% {
  285. -webkit-transform: translateY(-5%)
  286. }
  287. 80% {
  288. -webkit-transform: translateY(0%);
  289. }
  290. 90% {
  291. -webkit-transform: translateY(-5%);
  292. }
  293. 100% {
  294. -webkit-transform: translateY(0%)
  295. }
  296. }
  297. @keyframes arrowY {
  298. 0% {
  299. transform: translateY(-100%);
  300. }
  301. 30% {
  302. transform: translateY(0%);
  303. }
  304. 40% {
  305. transform: translateY(-5%);
  306. }
  307. 50% {
  308. transform: translateY(-10%);
  309. }
  310. 60% {
  311. transform: translateY(-10%);
  312. }
  313. 70% {
  314. transform: translateY(-5%)
  315. }
  316. 80% {
  317. transform: translateY(0%);
  318. }
  319. 90% {
  320. transform: translateY(-5%);
  321. }
  322. 100% {
  323. transform: translateY(0%)
  324. }
  325. }
  326. @-webkit-keyframes arrowXj {
  327. 0% {
  328. -webkit-transform: translateX(-80%);
  329. }
  330. 100% {
  331. -webkit-transform: translateX(0);
  332. }
  333. }
  334. @keyframes arrowXj {
  335. 0% {
  336. transform: translateX(-80%);
  337. }
  338. 100% {
  339. transform: translateX(0);
  340. }
  341. }
  342. @-webkit-keyframes arrowTop {
  343. 0% {
  344. -webkit-transform: translateY(-200%);
  345. }
  346. 100% {
  347. -webkit-transform: translateY(0);
  348. }
  349. }
  350. @keyframes arrowTop {
  351. 0% {
  352. transform: translateY(-200%);
  353. }
  354. 100% {
  355. transform: translateY(0);
  356. }
  357. }
  358. @-webkit-keyframes arrowXan {
  359. 0% {
  360. -webkit-transform: translateX(80%);
  361. }
  362. 100% {
  363. -webkit-transform: translateX(0);
  364. }
  365. }
  366. @keyframes arrowXan {
  367. 0% {
  368. transform: translateX(80%);
  369. }
  370. 100% {
  371. transform: translateX(0);
  372. }
  373. }
  374. .detail {
  375. transform: translateY(200%);
  376. -webkit-transform: translateY(200%);
  377. -webkit-animation: arrowBottom 1.2s ease;
  378. animation: arrowBottom 1.2s ease;
  379. /* -webkit-transform: scale(1.5);
  380. transform: scale(1.5); */
  381. animation-iteration-count: 1;
  382. animation-fill-mode: forwards;
  383. -webkit-animation-iteration-count: 1;
  384. -webkit-animation-fill-mode: forwards;
  385. }
  386. @-webkit-keyframes arrowBottom {
  387. 0% {
  388. -webkit-transform: translateY(200%);
  389. }
  390. 100% {
  391. -webkit-transform: translateY(0);
  392. }
  393. }
  394. @keyframes arrowBottom {
  395. 0% {
  396. transform: translateY(200%);
  397. }
  398. 100% {
  399. transform: translateY(0);
  400. }
  401. }
  402. @keyframes mymove {
  403. 0% {
  404. transform: scale(1);
  405. /*开始为原始大小*/
  406. }
  407. 25% {
  408. transform: scale(1.2);
  409. /*放大1.1倍*/
  410. }
  411. 50% {
  412. transform: scale(1);
  413. }
  414. 75% {
  415. transform: scale(1.2);
  416. }
  417. }
  418. @-webkit-keyframes mymove {
  419. 0% {
  420. transform: scale(1);
  421. /*开始为原始大小*/
  422. }
  423. 25% {
  424. transform: scale(1.2);
  425. /*放大1.1倍*/
  426. }
  427. 50% {
  428. transform: scale(1);
  429. }
  430. 75% {
  431. transform: scale(1.2);
  432. }
  433. }
  434. .audio-rotate {
  435. -webkit-animation: rotating 1.2s linear infinite;
  436. -moz-animation: rotating 1.2s linear infinite;
  437. -o-animation: rotating 1.2s linear infinite;
  438. animation: rotating 1.2s linear infinite;
  439. transform-origin: 50% 50%;
  440. -webkit-transform-origin: 50% 50%;
  441. -moz-transform-origin: 50% 50%;
  442. -o-transform-origin: 50% 50%;
  443. }
  444. @-webkit-keyframes rotating {
  445. from {
  446. -webkit-transform: rotate(0)
  447. }
  448. to {
  449. -webkit-transform: rotate(360deg)
  450. }
  451. }
  452. @keyframes rotating {
  453. from {
  454. transform: rotate(0)
  455. }
  456. to {
  457. transform: rotate(360deg)
  458. }
  459. }
  460. @-moz-keyframes rotating {
  461. from {
  462. -moz-transform: rotate(0)
  463. }
  464. to {
  465. -moz-transform: rotate(360deg)
  466. }
  467. }
  468. </style>
  469. </head>
  470. <body onload="videoPlay()">
  471. <div id="audio-btn" class="audio-rotate"
  472. style="width:60px;height:60px;position: fixed;right:20px;top:20px;z-index: 100;background:black;border: 1px solid white;border-radius: 50%">
  473. <img src="./video/yinyue.png" style="width: 100%;height: 100%" alt="">
  474. <audio loop muted src="./video/bg.mp3" id="mediaId" autoplay="autoplay" preload=""></audio>
  475. </div>
  476. <div class="page_box" style="background:url(./video/bg.jpg);background-repeat: round;" id="pageOne">
  477. <div class="hongbao" style="position: relative">
  478. <img src="./video/hongbao.png" alt="" style="width:100%">
  479. <img src="./video/btn.png" style="width: 50%;position: absolute;bottom: 20%;left: 50%;margin-left: -25%;"
  480. alt="" id="hideDiv">
  481. <img src="./video/shou.png" style="width:100px;position: absolute;bottom:20%;left: 65%;" alt="" id="shou">
  482. </div>
  483. </div>
  484. <div class="page_box" style="background:url(./video/bg2.jpg);;background-repeat: round;display: none" id="pageTwo">
  485. <div style="width: 80%;margin: 30px auto;position: relative;text-align: center">热门小说&nbsp;&nbsp;&nbsp;&nbsp;量身定制
  486. <br>
  487. <span style="font-size:40px;font-weight:700">
  488. —选择你的性别—
  489. </span>
  490. </div>
  491. <div class="sex" style="width: 80%;margin: 0 auto;position: relative">
  492. <div class="nan">
  493. <img src="./video/nan.png" alt="">
  494. <img src="./video/ok.png" alt="" style="position:absolute;bottom: 80px;right:0" class="okShow">
  495. </div>
  496. <div class="nv">
  497. <img src="./video/nv.png" alt="">
  498. <img src="./video/ok.png" alt="" style="position:absolute;bottom: 80px;right:0;display: none"
  499. class="okShow">
  500. </div>
  501. <div style="margin-top:20px;margin:100px auto;text-align: center">
  502. <img src="./video/queding.png" alt="" style="width:60%" id="nextBtn">
  503. </div>
  504. </div>
  505. </div>
  506. <div class="page_box"
  507. style="background:url(./video/bg-nan.jpg);object-fit:fill;background-repeat: round;display:none " id="nanBook">
  508. <div class="book" style="width: 80%;margin: 35% auto;position: relative">
  509. <div style="display:flex;justify-content:center">
  510. <img src="./video/nan1.png" style="height:20rem" class="bookTop bookTo" alt="">
  511. </div>
  512. <div style="display:flex;justify-content:space-around;margin-top: 20px">
  513. <img src="./video/nan2.png" style="height:20rem" class="nan bookTo" alt="">
  514. <img src="./video/nan3.png" style="height:20rem" class="nv bookTo" alt="">
  515. </div>
  516. </div>
  517. </div>
  518. <div class="page_box"
  519. style="background:url(./video/bg-nv.jpg);object-fit:fill;background-repeat: round;display:none " id="nvBook">
  520. <div class="book" style="width: 80%;margin: 35% auto;position: relative">
  521. <div style="display:flex;justify-content:center">
  522. <img src="./video/nv1.png" style="height:20rem" class="bookTop bookTo" alt="">
  523. </div>
  524. <div style="display:flex;justify-content:space-around;margin-top: 20px">
  525. <img src="./video/nv2.png" style="height:20rem" class="nan bookTo" alt="">
  526. <img src="./video/nv3.png" style="height:20rem" class="nv bookTo" alt="">
  527. </div>
  528. </div>
  529. </div>
  530. <div class="page_box" style="background:url(./video/bg.jpg);object-fit:fill;background-repeat: round;display:none "
  531. id="bookDetail">
  532. <div style="background:url(./video/bg-detail.jpg);margin:20% auto 0;width: 90%;height:90%;position: relative;"
  533. class="detail">
  534. <div
  535. style="height:100%;width:100%;overflow:auto;position: absolute;top:0;margin:20px auto;text-align: center">
  536. <img src="./video/title-nv3.png" style="width:50%;margin: 20px 0" alt="" id="title">
  537. <img src="./video/content-nv3.png" style="width:100%;margin-bottom: 50%" alt="" id="content">
  538. </div>
  539. <div style="width: 100%;position: absolute;bottom: -30px;">
  540. <img src="./video/bottom.png" style="width:100%" alt="">
  541. <img src="./video/else.png" style="position: absolute;
  542. top: 100px;
  543. left: 10%;width:35%" alt="" id="else">
  544. <img src="./video/jiutale.png" style="position: absolute;
  545. top: 100px;
  546. right: 10%;width:35%" alt="" id="btn">
  547. </div>
  548. </div>
  549. </div>
  550. </div>
  551. <script src="https://sf3-ttcdn-tos.pstatp.com/obj/union-fe-nc/playable/sdk/playable-sdk.js"></script>
  552. <script type="text/javascript" src="./jquery.min.js"></script>
  553. <script type="text/javascript">
  554. var x = document.getElementById("mediaId");
  555. function videoPlay() {
  556. document.getElementById("mediaId").play()
  557. document.getElementById("mediaId").muted = false
  558. }
  559. var x = document.getElementById("mediaId");
  560. $(function () {
  561. $("body").on("click", "#audio-btn", function () {
  562. $(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
  563. $(this).toggleClass("audio-rotate");
  564. //控制背景音乐 播放或暂停
  565. if ($(this).hasClass("rotate")) {
  566. x.pause();
  567. } else {
  568. x.play();
  569. x.muted = false
  570. }
  571. })
  572. });
  573. $('#hideDiv').on('touchstart', function (e) {
  574. $('#pageOne').hide()
  575. $('#pageTwo').show()
  576. })
  577. $('.nan').on('touchstart', function (e) {
  578. $('.okShow').eq(1).hide()
  579. $('.okShow').eq(0).show()
  580. })
  581. $('.nv').on('touchstart', function (e) {
  582. $('.okShow').eq(0).hide()
  583. $('.okShow').eq(1).show()
  584. })
  585. $('#nextBtn').on('touchstart', function (e) {
  586. if ($('.okShow').eq(0).css('display') == 'none') {
  587. $('#nvBook').show()
  588. $('#pageTwo').hide()
  589. } else if ($('.okShow').eq(0).css('display') ==
  590. 'block') {
  591. $('#nanBook').show()
  592. $('#pageTwo').hide()
  593. }
  594. console.log($('.okShow').eq(0).css('display'), $('.okShow').eq(1).css('display'))
  595. })
  596. $('.bookTo').on('touchstart', function (e) {
  597. var zhu = $(this).attr('src').split('/')[2]
  598. console.log(zhu)
  599. $('#nanBook').hide()
  600. $('#nvBook').hide()
  601. $('#bookDetail').show()
  602. $('#title').attr('src', './video/title-' + zhu)
  603. $('#content').attr('src', './video/content-' + zhu)
  604. })
  605. $('#else').on('touchstart', function (e) {
  606. var zhu = $('#content').attr('src').split('/')[2]
  607. var sex = zhu.split('-')[1].substring(0, 2)
  608. console.log(sex)
  609. if (sex == 'na') {
  610. $('#nanBook').show()
  611. $('#nvBook').hide()
  612. } else if (sex == 'nv') {
  613. $('#nvBook').show()
  614. $('#nanBook').hide()
  615. }
  616. $('#bookDetail').hide()
  617. })
  618. $('#btn').on('touchstart', function (e) {
  619. e.preventDefault()
  620. e.stopPropagation()
  621. window.playableSDK.sendEvent('clickDownloadBar', {
  622. section: 'section2',
  623. area: 'area3'
  624. });
  625. window.playableSDK.openAppStore()
  626. })
  627. </script>
  628. </body>
  629. </html>