123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
- <meta name="viewport" content="width=640, user-scalable=no">
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="Cache-Control" content="no-cache">
- <meta http-equiv="Expires" content="0">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <meta name="format-detection" content="telephone=no">
- <meta name="apple-mobile-web-app-title" content="">
- <title>试玩</title>
- <style>
- * {
- margin: 0px;
- padding: 0px;
- box-sizing: border-box;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- }
- html {
- max-width: 640px;
- margin: 0 auto;
- }
- body {
- font-family: "PingFangSC-Regular", "sans-serif", "STHeitiSC-Light", "微软雅黑", "Microsoft YaHei";
- font-size: 50px;
- /* line-height: 1.5em; */
- color: #212121;
- -webkit-user-select: none;
- user-select: none;
- -webkit-touch-callout: none;
- touch-callout: none;
- }
- html,
- body,
- .page_box {
- width: 100%;
- height: 100%;
- position: relative;
- overflow: hidden;
- }
- .video[ishivideo="true"]::-webkit-media-controls {
- display: none !important;
- }
- .video[ishivideo="true"]::-moz-media-controls {
- display: none !important;
- }
- .video[ishivideo="true"]::-o-media-controls {
- display: none !important;
- }
- .video[ishivideo="true"]::media-controls {
- display: none !important;
- }
- .page {
- background-color: #eee;
- }
- .page {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-wrap: wrap;
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0;
- top: 0;
- overflow: hidden;
- }
- .page.hide {
- display: none;
- }
- /*==================================*/
- .page.inTop {
- -webkit-animation: ShowTop .5s ease-out both;
- animation: ShowTop .5s ease-out both;
- }
- .page.outTop {
- -webkit-animation: HideTop .5s ease-out both;
- animation: HideTop .5s ease-out both;
- }
- .page.inDown {
- -webkit-animation: ShowDown .5s ease-out both;
- animation: ShowDown .5s ease-out both;
- }
- .page.outDown {
- -webkit-animation: HideDown .5s ease-out both;
- animation: HideDown .5s ease-out both;
- }
- @-webkit-keyframes ShowTop {
- 0% {
- -webkit-transform: translateY(100%);
- }
- 100% {
- -webkit-transform: translateY(0);
- }
- }
- @keyframes ShowTop {
- 0% {
- transform: translateY(100%);
- }
- 100% {
- transform: translateY(0);
- }
- }
- @-webkit-keyframes HideTop {
- 0% {
- -webkit-transform: translateY(0);
- }
- 100% {
- -webkit-transform: translateY(-100%);
- }
- }
- @keyframes HideTop {
- 0% {
- transform: translateY(0);
- }
- 100% {
- transform: translateY(-100%);
- }
- }
- @-webkit-keyframes ShowDown {
- 0% {
- -webkit-transform: translateY(-100%);
- }
- 100% {
- -webkit-transform: translateY(0);
- }
- }
- @keyframes ShowDown {
- 0% {
- transform: translateY(-100%);
- }
- 100% {
- transform: translateY(0);
- }
- }
- @-webkit-keyframes HideDown {
- 0% {
- -webkit-transform: translateY(0);
- }
- 100% {
- -webkit-transform: translateY(100%);
- }
- }
- @keyframes HideDown {
- 0% {
- transform: translateY(0);
- }
- 100% {
- transform: translateY(100%);
- }
- }
- /*==================================*/
- #jingtai {
- animation: mymove 1s infinite;
- -webkit-animation: mymove 1s infinite;
- /*Safari and Chrome*/
- animation-direction: alternate;
- /*轮流反向播放动画。*/
- animation-timing-function: ease-in-out;
- /*动画的速度曲线*/
- /* Safari 和 Chrome */
- -webkit-animation: mymove 1s infinite;
- -webkit-animation-direction: alternate;
- /*轮流反向播放动画。*/
- -webkit-animation-timing-function: ease-in-out;
- /*动画的速度曲线*/
- }
- #jinbi {
- -webkit-animation: arrowBig 1.2s .5s ease-in-out infinite;
- animation: arrowBig 1.2s .5s ease-in-out infinite;
- -webkit-transform: scale(1.5);
- transform: scale(1.5);
- }
- #shou {
- animation: arrowBig .5s infinite;
- /*Safari and Chrome*/
- animation-direction: alternate;
- /*轮流反向播放动画。*/
- animation-timing-function: ease-in-out;
- /*动画的速度曲线*/
- /* Safari 和 Chrome */
- -webkit-animation: arrowBig .5s infinite;
- -webkit-animation-direction: alternate;
- /*轮流反向播放动画。*/
- -webkit-animation-timing-function: ease-in-out;
- /*动画的速度曲线*/
- }
- @-webkit-keyframes arrowBig {
- 0% {
- -webkit-transform: translate(0, 0);
- }
- 100% {
- -webkit-transform: translate(15%, 15%)
- }
- }
- @keyframes arrowBig {
- 0% {
- transform: translate(0, 0);
- }
- 100% {
- transform: translate(15%, 15%)
- }
- }
- .hongbao {
- -webkit-animation: arrowY 1.2s ease;
- animation: arrowY 1.2s ease;
- /* -webkit-transform: scale(1.5);
- transform: scale(1.5); */
- transform: translateY(-100%);
- -webkit-transform: translateY(-100%);
- animation-iteration-count: 1;
- animation-fill-mode: forwards;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-fill-mode: forwards;
- }
- .sex {
- transform: translateY(30%);
- -webkit-transform: translateY(30%);
- }
- .nan {
- display: inline-block;
- position: relative;
- transform: translateX(-80%);
- -webkit-transform: translateX(-80%);
- -webkit-animation: arrowXj 1.2s ease;
- animation: arrowXj 1.2s ease;
- /* -webkit-transform: scale(1.5);
- transform: scale(1.5); */
- animation-iteration-count: 1;
- animation-fill-mode: forwards;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-fill-mode: forwards;
- }
- .nv {
- display: inline-block;
- position: relative;
- transform: translateX(80%);
- -webkit-transform: translateX(80%);
- -webkit-animation: arrowXan 1.2s ease;
- animation: arrowXan 1.2s ease;
- /* -webkit-transform: scale(1.5);
- transform: scale(1.5); */
- animation-iteration-count: 1;
- animation-fill-mode: forwards;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-fill-mode: forwards;
- }
- .book {
- transform: translateY(20%);
- -webkit-transform: translateY(20%);
- /* margin-top: 35% */
- }
- .bookTop {
- transform: translateY(-200%);
- -webkit-transform: translateY(-200%);
- -webkit-animation: arrowTop 1.2s ease;
- animation: arrowTop 1.2s ease;
- /* -webkit-transform: scale(1.5);
- transform: scale(1.5); */
- animation-iteration-count: 1;
- animation-fill-mode: forwards;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-fill-mode: forwards;
- }
- @-webkit-keyframes arrowY {
- 0% {
- -webkit-transform: translateY(-100%);
- }
- 30% {
- -webkit-transform: translateY(0%);
- }
- 40% {
- -webkit-transform: translateY(-5%);
- }
- 50% {
- -webkit-transform: translateY(-10%);
- }
- 60% {
- -webkit-transform: translateY(-10%);
- }
- 70% {
- -webkit-transform: translateY(-5%)
- }
- 80% {
- -webkit-transform: translateY(0%);
- }
- 90% {
- -webkit-transform: translateY(-5%);
- }
- 100% {
- -webkit-transform: translateY(0%)
- }
- }
- @keyframes arrowY {
- 0% {
- transform: translateY(-100%);
- }
- 30% {
- transform: translateY(0%);
- }
- 40% {
- transform: translateY(-5%);
- }
- 50% {
- transform: translateY(-10%);
- }
- 60% {
- transform: translateY(-10%);
- }
- 70% {
- transform: translateY(-5%)
- }
- 80% {
- transform: translateY(0%);
- }
- 90% {
- transform: translateY(-5%);
- }
- 100% {
- transform: translateY(0%)
- }
- }
- @-webkit-keyframes arrowXj {
- 0% {
- -webkit-transform: translateX(-80%);
- }
- 100% {
- -webkit-transform: translateX(0);
- }
- }
- @keyframes arrowXj {
- 0% {
- transform: translateX(-80%);
- }
- 100% {
- transform: translateX(0);
- }
- }
- @-webkit-keyframes arrowTop {
- 0% {
- -webkit-transform: translateY(-200%);
- }
- 100% {
- -webkit-transform: translateY(0);
- }
- }
- @keyframes arrowTop {
- 0% {
- transform: translateY(-200%);
- }
- 100% {
- transform: translateY(0);
- }
- }
- @-webkit-keyframes arrowXan {
- 0% {
- -webkit-transform: translateX(80%);
- }
- 100% {
- -webkit-transform: translateX(0);
- }
- }
- @keyframes arrowXan {
- 0% {
- transform: translateX(80%);
- }
- 100% {
- transform: translateX(0);
- }
- }
- .detail {
- transform: translateY(200%);
- -webkit-transform: translateY(200%);
- -webkit-animation: arrowBottom 1.2s ease;
- animation: arrowBottom 1.2s ease;
- /* -webkit-transform: scale(1.5);
- transform: scale(1.5); */
- animation-iteration-count: 1;
- animation-fill-mode: forwards;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-fill-mode: forwards;
- }
- @-webkit-keyframes arrowBottom {
- 0% {
- -webkit-transform: translateY(200%);
- }
- 100% {
- -webkit-transform: translateY(0);
- }
- }
- @keyframes arrowBottom {
- 0% {
- transform: translateY(200%);
- }
- 100% {
- transform: translateY(0);
- }
- }
- @keyframes mymove {
- 0% {
- transform: scale(1);
- /*开始为原始大小*/
- }
- 25% {
- transform: scale(1.2);
- /*放大1.1倍*/
- }
- 50% {
- transform: scale(1);
- }
- 75% {
- transform: scale(1.2);
- }
- }
- @-webkit-keyframes mymove {
- 0% {
- transform: scale(1);
- /*开始为原始大小*/
- }
- 25% {
- transform: scale(1.2);
- /*放大1.1倍*/
- }
- 50% {
- transform: scale(1);
- }
- 75% {
- transform: scale(1.2);
- }
- }
- .audio-rotate {
- -webkit-animation: rotating 1.2s linear infinite;
- -moz-animation: rotating 1.2s linear infinite;
- -o-animation: rotating 1.2s linear infinite;
- animation: rotating 1.2s linear infinite;
- transform-origin: 50% 50%;
- -webkit-transform-origin: 50% 50%;
- -moz-transform-origin: 50% 50%;
- -o-transform-origin: 50% 50%;
- }
- @-webkit-keyframes rotating {
- from {
- -webkit-transform: rotate(0)
- }
- to {
- -webkit-transform: rotate(360deg)
- }
- }
- @keyframes rotating {
- from {
- transform: rotate(0)
- }
- to {
- transform: rotate(360deg)
- }
- }
- @-moz-keyframes rotating {
- from {
- -moz-transform: rotate(0)
- }
- to {
- -moz-transform: rotate(360deg)
- }
- }
- </style>
- </head>
- <body onload="videoPlay()">
- <div id="audio-btn" class="audio-rotate"
- style="width:60px;height:60px;position: fixed;right:20px;top:20px;z-index: 100;background:black;border: 1px solid white;border-radius: 50%">
- <img src="./video/yinyue.png" style="width: 100%;height: 100%" alt="">
- <audio loop muted src="./video/bg.mp3" id="mediaId" autoplay="autoplay" preload=""></audio>
- </div>
- <div class="page_box" style="background:url(./video/bg.jpg);background-repeat: round;" id="pageOne">
- <div class="hongbao" style="position: relative">
- <img src="./video/hongbao.png" alt="" style="width:100%">
- <img src="./video/btn.png" style="width: 50%;position: absolute;bottom: 20%;left: 50%;margin-left: -25%;"
- alt="" id="hideDiv">
- <img src="./video/shou.png" style="width:100px;position: absolute;bottom:20%;left: 65%;" alt="" id="shou">
- </div>
- </div>
- <div class="page_box" style="background:url(./video/bg2.jpg);;background-repeat: round;display: none" id="pageTwo">
- <div style="width: 80%;margin: 30px auto;position: relative;text-align: center">热门小说 量身定制
- <br>
- <span style="font-size:40px;font-weight:700">
- —选择你的性别—
- </span>
- </div>
- <div class="sex" style="width: 80%;margin: 0 auto;position: relative">
- <div class="nan">
- <img src="./video/nan.png" alt="">
- <img src="./video/ok.png" alt="" style="position:absolute;bottom: 80px;right:0" class="okShow">
- </div>
- <div class="nv">
- <img src="./video/nv.png" alt="">
- <img src="./video/ok.png" alt="" style="position:absolute;bottom: 80px;right:0;display: none"
- class="okShow">
- </div>
- <div style="margin-top:20px;margin:100px auto;text-align: center">
- <img src="./video/queding.png" alt="" style="width:60%" id="nextBtn">
- </div>
- </div>
- </div>
- <div class="page_box"
- style="background:url(./video/bg-nan.jpg);object-fit:fill;background-repeat: round;display:none " id="nanBook">
- <div class="book" style="width: 80%;margin: 35% auto;position: relative">
- <div style="display:flex;justify-content:center">
- <img src="./video/nan1.png" style="height:20rem" class="bookTop bookTo" alt="">
- </div>
- <div style="display:flex;justify-content:space-around;margin-top: 20px">
- <img src="./video/nan2.png" style="height:20rem" class="nan bookTo" alt="">
- <img src="./video/nan3.png" style="height:20rem" class="nv bookTo" alt="">
- </div>
- </div>
- </div>
- <div class="page_box"
- style="background:url(./video/bg-nv.jpg);object-fit:fill;background-repeat: round;display:none " id="nvBook">
- <div class="book" style="width: 80%;margin: 35% auto;position: relative">
- <div style="display:flex;justify-content:center">
- <img src="./video/nv1.png" style="height:20rem" class="bookTop bookTo" alt="">
- </div>
- <div style="display:flex;justify-content:space-around;margin-top: 20px">
- <img src="./video/nv2.png" style="height:20rem" class="nan bookTo" alt="">
- <img src="./video/nv3.png" style="height:20rem" class="nv bookTo" alt="">
- </div>
- </div>
- </div>
- <div class="page_box" style="background:url(./video/bg.jpg);object-fit:fill;background-repeat: round;display:none "
- id="bookDetail">
- <div style="background:url(./video/bg-detail.jpg);margin:20% auto 0;width: 90%;height:90%;position: relative;"
- class="detail">
- <div
- style="height:100%;width:100%;overflow:auto;position: absolute;top:0;margin:20px auto;text-align: center">
- <img src="./video/title-nv3.png" style="width:50%;margin: 20px 0" alt="" id="title">
- <img src="./video/content-nv3.png" style="width:100%;margin-bottom: 50%" alt="" id="content">
- </div>
- <div style="width: 100%;position: absolute;bottom: -30px;">
- <img src="./video/bottom.png" style="width:100%" alt="">
- <img src="./video/else.png" style="position: absolute;
- top: 100px;
- left: 10%;width:35%" alt="" id="else">
- <img src="./video/jiutale.png" style="position: absolute;
- top: 100px;
- right: 10%;width:35%" alt="" id="btn">
- </div>
- </div>
- </div>
- </div>
- <script src="https://sf3-ttcdn-tos.pstatp.com/obj/union-fe-nc/playable/sdk/playable-sdk.js"></script>
- <script type="text/javascript" src="./jquery.min.js"></script>
- <script type="text/javascript">
- var x = document.getElementById("mediaId");
- function videoPlay() {
- document.getElementById("mediaId").play()
- document.getElementById("mediaId").muted = false
- }
- var x = document.getElementById("mediaId");
- $(function () {
- $("body").on("click", "#audio-btn", function () {
- $(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
- $(this).toggleClass("audio-rotate");
- //控制背景音乐 播放或暂停
- if ($(this).hasClass("rotate")) {
- x.pause();
- } else {
- x.play();
- x.muted = false
- }
- })
- });
- $('#hideDiv').on('touchstart', function (e) {
- $('#pageOne').hide()
- $('#pageTwo').show()
- })
- $('.nan').on('touchstart', function (e) {
- $('.okShow').eq(1).hide()
- $('.okShow').eq(0).show()
- })
- $('.nv').on('touchstart', function (e) {
- $('.okShow').eq(0).hide()
- $('.okShow').eq(1).show()
- })
- $('#nextBtn').on('touchstart', function (e) {
- if ($('.okShow').eq(0).css('display') == 'none') {
- $('#nvBook').show()
- $('#pageTwo').hide()
- } else if ($('.okShow').eq(0).css('display') ==
- 'block') {
- $('#nanBook').show()
- $('#pageTwo').hide()
- }
- console.log($('.okShow').eq(0).css('display'), $('.okShow').eq(1).css('display'))
- })
- $('.bookTo').on('touchstart', function (e) {
- var zhu = $(this).attr('src').split('/')[2]
- console.log(zhu)
- $('#nanBook').hide()
- $('#nvBook').hide()
- $('#bookDetail').show()
- $('#title').attr('src', './video/title-' + zhu)
- $('#content').attr('src', './video/content-' + zhu)
- })
- $('#else').on('touchstart', function (e) {
- var zhu = $('#content').attr('src').split('/')[2]
- var sex = zhu.split('-')[1].substring(0, 2)
- console.log(sex)
- if (sex == 'na') {
- $('#nanBook').show()
- $('#nvBook').hide()
- } else if (sex == 'nv') {
- $('#nvBook').show()
- $('#nanBook').hide()
- }
- $('#bookDetail').hide()
- })
- $('#btn').on('touchstart', function (e) {
- e.preventDefault()
- e.stopPropagation()
- window.playableSDK.sendEvent('clickDownloadBar', {
- section: 'section2',
- area: 'area3'
- });
- window.playableSDK.openAppStore()
- })
- </script>
- </body>
- </html>
|