|
@@ -0,0 +1,760 @@
|
|
|
+<!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>
|