فهرست منبع

试玩游戏提交

zhuxinbo 5 سال پیش
کامیت
627b1685ee
100فایلهای تغییر یافته به همراه3674 افزوده شده و 0 حذف شده
  1. 6 0
      bookContent/.idea/misc.xml
  2. 8 0
      bookContent/.idea/modules.xml
  3. 9 0
      bookContent/.idea/newShiwan.iml
  4. 115 0
      bookContent/.idea/workspace.xml
  5. 1 0
      bookContent/config.json
  6. 563 0
      bookContent/index.html
  7. 5 0
      bookContent/jquery.min.js
  8. 25 0
      bookContent/list.json
  9. 17 0
      bookContent/rem.js
  10. BIN
      bookContent/video/bg.mp3
  11. BIN
      bookContent/video/left.png
  12. BIN
      bookContent/video/main_bg.png
  13. BIN
      bookContent/video/right.png
  14. BIN
      bookContent/video/shou.png
  15. BIN
      bookContent/video/tanchuang.png
  16. BIN
      bookContent/video/top.png
  17. BIN
      bookContent/video/yinyue.png
  18. 6 0
      bookZhanshen/.idea/misc.xml
  19. 8 0
      bookZhanshen/.idea/modules.xml
  20. 9 0
      bookZhanshen/.idea/newShiwan.iml
  21. 115 0
      bookZhanshen/.idea/workspace.xml
  22. 1 0
      bookZhanshen/config.json
  23. 561 0
      bookZhanshen/index.html
  24. 5 0
      bookZhanshen/jquery.min.js
  25. 42 0
      bookZhanshen/list.json
  26. 17 0
      bookZhanshen/rem.js
  27. BIN
      bookZhanshen/video/bg.mp3
  28. BIN
      bookZhanshen/video/chenankang.png
  29. BIN
      bookZhanshen/video/chufeifei.png
  30. BIN
      bookZhanshen/video/fangang.png
  31. BIN
      bookZhanshen/video/main_bg.jpg
  32. BIN
      bookZhanshen/video/shou.png
  33. BIN
      bookZhanshen/video/tanchuang.png
  34. BIN
      bookZhanshen/video/top.png
  35. BIN
      bookZhanshen/video/xiaopotian.png
  36. BIN
      bookZhanshen/video/yinyue.png
  37. 1 0
      dazhuanpan/config.json
  38. BIN
      dazhuanpan/images/bg-bottom.png
  39. BIN
      dazhuanpan/images/bg-top.png
  40. BIN
      dazhuanpan/images/bg-zhuan.png
  41. BIN
      dazhuanpan/images/bg.jpg
  42. BIN
      dazhuanpan/images/btn.png
  43. BIN
      dazhuanpan/images/hongbao.png
  44. BIN
      dazhuanpan/images/qian.png
  45. BIN
      dazhuanpan/images/shaw.png
  46. BIN
      dazhuanpan/images/show.mp3
  47. BIN
      dazhuanpan/images/zhenbg.png
  48. BIN
      dazhuanpan/images/zhuan.mp3
  49. BIN
      dazhuanpan/images/zhuanbg.png
  50. 347 0
      dazhuanpan/index.html
  51. 303 0
      dazhuanpan/js/awardRotate.js
  52. 5 0
      dazhuanpan/js/jquery.min.js
  53. 17 0
      dazhuanpan/js/rem.js
  54. 1 0
      drag
  55. 6 0
      newShiwan/.idea/misc.xml
  56. 8 0
      newShiwan/.idea/modules.xml
  57. 9 0
      newShiwan/.idea/newShiwan.iml
  58. 115 0
      newShiwan/.idea/workspace.xml
  59. 1 0
      newShiwan/config.json
  60. 439 0
      newShiwan/index.html
  61. 5 0
      newShiwan/jquery.min.js
  62. BIN
      newShiwan/video/1.mp4
  63. BIN
      newShiwan/video/2.mp4
  64. BIN
      newShiwan/video/dianji.png
  65. BIN
      newShiwan/video/shou.png
  66. BIN
      newShiwan/video/zuhe.png
  67. 6 0
      selectShiwan/.idea/misc.xml
  68. 8 0
      selectShiwan/.idea/modules.xml
  69. 9 0
      selectShiwan/.idea/newShiwan.iml
  70. 115 0
      selectShiwan/.idea/workspace.xml
  71. 1 0
      selectShiwan/config.json
  72. 760 0
      selectShiwan/index.html
  73. 5 0
      selectShiwan/jquery.min.js
  74. BIN
      selectShiwan/video/bg-detail.jpg
  75. BIN
      selectShiwan/video/bg-nan.jpg
  76. BIN
      selectShiwan/video/bg-nv.jpg
  77. BIN
      selectShiwan/video/bg.jpg
  78. BIN
      selectShiwan/video/bg.mp3
  79. BIN
      selectShiwan/video/bg2.jpg
  80. BIN
      selectShiwan/video/bottom.png
  81. BIN
      selectShiwan/video/btn.png
  82. BIN
      selectShiwan/video/content-nan1.png
  83. BIN
      selectShiwan/video/content-nan2.png
  84. BIN
      selectShiwan/video/content-nan3.png
  85. BIN
      selectShiwan/video/content-nv1.png
  86. BIN
      selectShiwan/video/content-nv2.png
  87. BIN
      selectShiwan/video/content-nv3.png
  88. BIN
      selectShiwan/video/else.png
  89. BIN
      selectShiwan/video/hongbao.png
  90. BIN
      selectShiwan/video/hongbaoelse.png
  91. BIN
      selectShiwan/video/jinbi.mp3
  92. BIN
      selectShiwan/video/jiutale.png
  93. BIN
      selectShiwan/video/nan.png
  94. BIN
      selectShiwan/video/nan1.png
  95. BIN
      selectShiwan/video/nan2.png
  96. BIN
      selectShiwan/video/nan3.png
  97. BIN
      selectShiwan/video/nv.png
  98. BIN
      selectShiwan/video/nv1.png
  99. BIN
      selectShiwan/video/nv2.png
  100. 0 0
      selectShiwan/video/nv3.png

+ 6 - 0
bookContent/.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="ES6" />
+  </component>
+</project>

+ 8 - 0
bookContent/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/newShiwan.iml" filepath="$PROJECT_DIR$/.idea/newShiwan.iml" />
+    </modules>
+  </component>
+</project>

+ 9 - 0
bookContent/.idea/newShiwan.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

+ 115 - 0
bookContent/.idea/workspace.xml

@@ -0,0 +1,115 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="65b7b705-0052-4582-b807-15528e36d3e6" name="Default Changelist" comment="" />
+    <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="ProjectFrameBounds">
+    <option name="x" value="260" />
+    <option name="y" value="20" />
+    <option name="width" value="1400" />
+    <option name="height" value="1000" />
+  </component>
+  <component name="ProjectView">
+    <navigator proportions="" version="1">
+      <foldersAlwaysOnTop value="true" />
+    </navigator>
+    <panes>
+      <pane id="ProjectPane" />
+      <pane id="PackagesPane" />
+      <pane id="Scope" />
+    </panes>
+  </component>
+  <component name="PropertiesComponent">
+    <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="aspect.path.notification.shown" value="true" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/../../../0221-抖音火山版-直播-已送审" />
+    <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
+    <property name="nodejs_npm_path_reset_for_default_project" value="true" />
+  </component>
+  <component name="RunDashboard">
+    <option name="ruleStates">
+      <list>
+        <RuleState>
+          <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
+        </RuleState>
+        <RuleState>
+          <option name="name" value="StatusDashboardGroupingRule" />
+        </RuleState>
+      </list>
+    </option>
+  </component>
+  <component name="SvnConfiguration">
+    <configuration />
+  </component>
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="65b7b705-0052-4582-b807-15528e36d3e6" name="Default Changelist" comment="" />
+      <created>1586914928814</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1586914928814</updated>
+      <workItem from="1586914930074" duration="597000" />
+      <workItem from="1586931700055" duration="634000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TimeTrackingManager">
+    <option name="totallyTimeSpent" value="1231000" />
+  </component>
+  <component name="ToolWindowManager">
+    <frame x="260" y="20" width="1400" height="1000" extended-state="0" />
+    <layout>
+      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.25373134" />
+      <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
+      <window_info id="Image Layers" order="2" />
+      <window_info id="Designer" order="3" />
+      <window_info id="UI Designer" order="4" />
+      <window_info id="Capture Tool" order="5" />
+      <window_info id="Favorites" order="6" side_tool="true" />
+      <window_info anchor="bottom" id="Message" order="0" />
+      <window_info anchor="bottom" id="Find" order="1" />
+      <window_info anchor="bottom" id="Run" order="2" />
+      <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
+      <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
+      <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
+      <window_info anchor="bottom" id="TODO" order="6" />
+      <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Version Control" order="8" />
+      <window_info anchor="bottom" id="Database Changes" order="9" />
+      <window_info anchor="bottom" id="Terminal" order="10" />
+      <window_info anchor="bottom" id="Event Log" order="11" side_tool="true" />
+      <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
+      <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
+      <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
+      <window_info anchor="right" id="Palette" order="3" />
+      <window_info anchor="right" id="Theme Preview" order="4" />
+      <window_info anchor="right" id="Maven" order="5" />
+      <window_info anchor="right" id="Capture Analysis" order="6" />
+      <window_info anchor="right" id="Palette&#9;" order="7" />
+      <window_info anchor="right" id="Database" order="8" />
+    </layout>
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="1" />
+  </component>
+  <component name="masterDetails">
+    <states>
+      <state key="ProjectJDKs.UI">
+        <settings>
+          <splitter-proportions>
+            <option name="proportions">
+              <list>
+                <option value="0.2" />
+              </list>
+            </option>
+          </splitter-proportions>
+        </settings>
+      </state>
+    </states>
+  </component>
+</project>

+ 1 - 0
bookContent/config.json

@@ -0,0 +1 @@
+{"playable_orientation":1,"playable_source":2}

+ 563 - 0
bookContent/index.html

@@ -0,0 +1,563 @@
+<!DOCTYPE html>
+<html style="font-size: 600px;">
+
+<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 name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, 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>
+    <script src="./rem.js"></script>
+    <style>
+        body {
+            margin: 0
+        }
+
+        #app {
+            margin: 50px auto;
+            width: 660px;
+            height: 450px
+        }
+
+        #app>div>span {
+            display: inline-block
+        }
+
+        html,
+        body,
+        div,
+        span,
+        object,
+        iframe,
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        p,
+        blockquote,
+        pre,
+        abbr,
+        address,
+        cite,
+        code,
+        del,
+        dfn,
+        em,
+        img,
+        ins,
+        kbd,
+        q,
+        samp,
+        small,
+        strong,
+        sub,
+        sup,
+        var,
+        b,
+        i,
+        dl,
+        dt,
+        dd,
+        ol,
+        ul,
+        li,
+        fieldset,
+        form,
+        label,
+        legend,
+        table,
+        caption,
+        tbody,
+        tfoot,
+        thead,
+        tr,
+        th,
+        td,
+        article,
+        aside,
+        canvas,
+        details,
+        figcaption,
+        figure,
+        footer,
+        header,
+        hgroup,
+        menu,
+        nav,
+        section,
+        summary,
+        time,
+        mark,
+        audio,
+        video {
+            margin: 0;
+            padding: 0;
+            border: 0;
+            outline: 0;
+            list-style: none;
+        }
+
+        body {
+            min-height: 100%;
+            font-family: 'Microsoft YaHei', 'Myriad Set Pro', 'Lucida Grande', 'Hiragino Sans GB', 'Helvetica', 'Arial', 'sans-serif';
+            color: #333;
+            background: #fff;
+            -webkit-text-size-adjust: 100%;
+            -webkit-font-smoothing: antialiased;
+            -webkit-user-select: none;
+            -webkit-tap-highlight-color: transparent;
+            tap-highlight-color: transparent;
+            font-size: 0.026rem;
+        }
+
+        article,
+        section {
+            display: block;
+        }
+
+        img {
+            vertical-align: middle;
+            border: none;
+        }
+
+        input,
+        button,
+        select,
+        textarea {
+            outline: none;
+        }
+
+        textarea {
+            resize: none;
+        }
+
+        .cmp-main {
+            width: 3.6rem;
+            font-size: 0.1rem;
+            -webkit-transition: opacity 0.5s, padding-bottom 0.4s;
+            transition: opacity 0.5s, padding-bottom 0.4s;
+        }
+
+        .cmp-main .wrap-dialog {
+            -webkit-tap-highlight-color: transparent;
+            min-height: 100vh;
+            background-color: #ebe6e0;
+            background-size: cover;
+            -webkit-transition: -webkit-transform 0.5s;
+            transition: -webkit-transform 0.5s;
+            transition: transform 0.5s;
+            transition: transform 0.5s, -webkit-transform 0.5s;
+        }
+
+        .cmp-main .list-dialog {
+            width: 3.2rem;
+            margin: auto;
+            padding: 20px 0 25vh;
+        }
+
+        .cmp-main .list-dialog li {
+            padding-bottom: 0.3rem;
+        }
+
+        .cmp-main .list-dialog li:after {
+            visibility: hidden;
+            display: block;
+            font-size: 0;
+            content: '';
+            clear: both;
+            height: 0;
+        }
+
+        .cmp-main .list-dialog li:first-child {
+            display: block;
+            opacity: 1;
+        }
+
+        .cmp-main .list-dialog li:last-child {
+            -webkit-animation: ani-opacity 600ms ease-out 1 both;
+        }
+
+        .cmp-main .list-dialog .left .avatar {
+            float: left;
+            width: 0.5rem;
+            height: 0.5rem;
+            margin-top: 0.05rem;
+            background-image: url("./video/left.png");
+            background-position: center;
+            background-size: cover;
+            border-radius: 100%;
+            overflow: hidden;
+            border: 1px #184879 solid;
+            border-radius: 50%;
+        }
+
+        .cmp-main .list-dialog .left .content-box {
+            max-width: 2.5rem;
+            margin-left: 0.6rem;
+            -webkit-box-flex: 1;
+            -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+        }
+
+        .cmp-main .list-dialog .left .content-box .name {
+            margin: 0 0 5px 5px;
+            font-size: 0.15rem;
+            color: #666;
+        }
+
+        .cmp-main .list-dialog .left .content-box .content {
+            position: relative;
+            display: inline-block;
+            min-width: 0.5rem;
+            padding: 0.05rem 0.08rem;
+            font-size: 0.16rem;
+            word-break: break-all;
+            background: #fff;
+            border-radius: 6px;
+            -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+
+        .cmp-main .list-dialog .left .content-box .content em {
+            display: block;
+            position: absolute;
+            top: 25%;
+            left: -0.16rem;
+            width: 0;
+            height: 0;
+            border: 0.08rem solid transparent;
+            border-right: 0.08rem solid #fff;
+        }
+
+        .cmp-main .list-dialog .right .avatar {
+            float: right;
+            width: 0.5rem;
+            height: 0.5rem;
+            margin-top: 0.05rem;
+            background-image: url("./video/right.png");
+            background-position: center;
+            background-size: cover;
+            border-radius: 100%;
+            overflow: hidden;
+            border: 1px rgb(188, 15, 19) solid;
+            border-radius: 50%;
+        }
+
+        .cmp-main .list-dialog .right .content-box {
+            float: right;
+            width: 2.3rem;
+            margin-right: 0.05rem;
+            text-align: right;
+        }
+
+        .cmp-main .list-dialog .right .content-box .name {
+            margin: 0 0 5px 5px;
+            font-size: 0.15rem;
+            color: #666;
+        }
+
+        .cmp-main .list-dialog .right .content-box .content {
+            position: relative;
+            display: inline-block;
+            min-width: 0.5rem;
+            padding: 0.05rem 0.08rem;
+            text-align: left;
+            color: #fff;
+            font-size: 0.16rem;
+            word-break: break-all;
+            background: rgb(188, 15, 19);
+            border-radius: 6px;
+            -webkit-box-shadow: 0 2px 5px rgba(188, 15, 19);
+            box-shadow: 0 2px 5px rgba(188, 15, 19);
+        }
+
+        .cmp-main .list-dialog .right .content-box .content em {
+            display: block;
+            position: absolute;
+            top: 25%;
+            right: -0.16rem;
+            width: 0;
+            height: 0;
+            border: 0.08rem solid transparent;
+            border-left: 0.08rem solid rgb(188, 15, 19);
+
+        }
+
+        .cmp-main .list-dialog .item-scence-tips {
+            text-align: center;
+        }
+
+        .cmp-main .list-dialog .item-scence-tips div {
+            display: inline-block;
+            padding: 0.05rem 0.08rem;
+            font-size: 0.16rem;
+            text-align: justify;
+            background: rgba(24, 72, 121, 0.2);
+            border-radius: 6px;
+        }
+
+        .cmp-main .list-dialog .item-scence-img {
+            text-align: center;
+        }
+
+        .cmp-main .list-dialog .item-scence-img img {
+            width: 3.2rem;
+            border-radius: 6px;
+        }
+
+        #shouTime {
+            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);
+                -webkit-transform: scale(0.9);
+            }
+
+            100% {
+                -webkit-transform: translate(15%, 15%);
+                -webkit-transform: scale(1);
+            }
+        }
+
+        @keyframes arrowBig {
+            0% {
+                transform: translate(0, 0);
+                transform: scale(0.9);
+
+            }
+
+            100% {
+                transform: translate(15%, 15%);
+                transform: scale(1);
+            }
+        }
+
+
+        .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>
+        <div id="audio-btn" class="audio-rotate"
+            style="width:40px;height:40px;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="main" id="show">
+            <div data-reactroot="">
+                <div class="broccoli_cmp_app">
+                    <div class="cmp-main">
+                        <div class="wrap-dialog" id="parent">
+                            <img src="./video/main_bg.png" alt=""
+                                style="position:fixed;top:0;left:0;width:100%;height:100%;z-index: 0">
+                            <div style="position: fixed;bottom: 1.2rem;left: 1.3rem;width:1rem;text-align: center"
+                                id="shou">
+                                <div id="quan" style="border:0.01rem solid gray;width: 0.6rem ;height :0.6rem;border-radius: 50%;position: absolute;top: -0.25rem;left: 0.25rem;display: flex;
+                                    justify-content: center;
+                                    align-items: center;">
+                                    <div
+                                        style="border:0.01rem solid grey;width: 0.3rem ;height :0.3rem;border-radius: 50%;">
+
+                                    </div>
+                                </div>
+                                <img src="./video/shou.png" alt="" id="shouTime"
+                                    style="width: 0.5rem;position: relative;z-index:1">
+                                <p style="text-align:center;font-size: 0.14rem;margin-top: 10px">点屏幕出现剧情</p>
+                            </div>
+
+                            <ul class="list-dialog" style="position:relative;z-index:1">
+                                <!-- <li class="item-scence-tips">
+                                    <div style="background-color: rgba(24, 72, 121, 0.2); color: rgb(51, 51, 51);">金銮殿中
+                                    </div>
+                                </li> -->
+                                <li class="item-scence-img">
+                                    <div><img src="./video/top.png"></div>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="share"
+            style="width:100%;height:100%;background:rgba(0, 0, 0, 0.5);position: fixed;top: 0;z-index: 10;display:none">
+            <img src="./video/tanchuang.png" alt="" style="width:100%">
+            <div style="width: 2rem;
+            height: 0.5rem;
+            position: absolute;
+            top: 5rem;
+            left: 0.8rem;z-index:10" id="btn"></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 src="./list.json"></script>
+    <script type="text/javascript">
+        var viewHeight = document.documentElement.clientHeight;
+        var check = true
+        var count = 0
+
+        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
+                }
+            })
+        });
+
+
+
+        if (check) {
+            $("#show").on("touchend", function () {
+                var list, name
+                list = listJson.list
+                name = listJson.name
+                // check = false
+                var $li1
+                // var name = {
+                //     left: "陆浩成",
+                //     right: '姜蓝欣'
+                // }
+                $('#shou').hide()
+                for (var key in list[count]) {
+                    if (key == 'left') {
+                        $li1 = $(` <li class="left">
+                                <div class="avatar" style="background-image: url(./video/left.png);">
+                                </div>
+                                <div class="content-box">
+                                    <p class="name">${name['left']}</p>
+                                    <p class="content"
+                                        style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51);"><em
+                                            style="border-right-color: rgb(255, 255, 255);"></em>
+                                       ${list[count][key]}
+
+                                    </p>
+                                </div>
+                            </li>`)
+                    } else if (key == 'right') {
+                        $li1 = $(`  <li class="right">
+                                    <div class="avatar" style="background-image: url(./video/right.png);">
+                                    </div>
+                                    <div class="content-box">
+                                        <p class="name">${name['right']}</p>
+                                        <p class="content"
+                                            style="background-color: rgba(188,15,19); color: rgb(255, 255, 255);"><em
+                                                style="border-left-color: rgba(188,15,19);"></em>
+                                                ${list[count][key]}
+                                        </p>
+                                    </div>
+                                </li> `)
+                    }
+                }
+                $("ul").append($li1);
+                if (
+                    viewHeight - $('ul').height() < 200) {
+                    $('html,body').animate({
+                        scrollTop: Math.abs(viewHeight - $('ul').height()) + 300
+                    }, 300);
+                }
+                count++
+                if (count == list.length + 1) {
+                    $('#share').show()
+                    return
+                }
+            })
+
+
+        }
+        setTimeout(function () {
+            check = true
+        }, 1000);
+
+
+
+        $('#btn').on('touchstart', function (e) {
+            e.preventDefault()
+            e.stopPropagation()
+            window.playableSDK.sendEvent('clickDownloadBar', {
+                section: 'section2',
+                area: 'area3'
+            });
+            window.playableSDK.openAppStore()
+
+
+        })
+    </script>
+</body>
+
+</html>

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 5 - 0
bookContent/jquery.min.js


+ 25 - 0
bookContent/list.json

@@ -0,0 +1,25 @@
+var listJson = {
+"list":[{
+    "left": "琪琪"
+},
+{
+    "right": "赵勇"
+},
+{
+    "left": "要不要交个朋友?我一个人来这边出差,好无聊!"
+},
+{
+    "right": "算了吧,我工作一天太累了!"
+},
+{
+    "left": "我一个人在房间好无聊,要不你来找我?我会按摩哦!"
+},
+{
+    "right": "那。。。好吧,等我!"
+}
+],
+"name":{ 
+	"left": "琪琪",
+    "right": "赵勇"
+	}
+}

+ 17 - 0
bookContent/rem.js

@@ -0,0 +1,17 @@
+(function(doc, win) {
+    var docEl = doc.documentElement,
+        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
+        recalc = function() {
+            var clientWidth = docEl.clientWidth;
+            if(!clientWidth) return;
+            //          docEl.style.fontSize = 100 * (clientWidth / 360) + 'px';
+            if(clientWidth >= 600) {
+                docEl.style.fontSize = '350px';
+            } else {
+                docEl.style.fontSize = 100 * (clientWidth / 360) + 'px';
+            }
+        };
+    if(!doc.addEventListener) return;
+    win.addEventListener(resizeEvt, recalc, false);
+    doc.addEventListener('DOMContentLoaded', recalc, false);
+})(document, window);

BIN
bookContent/video/bg.mp3


BIN
bookContent/video/left.png


BIN
bookContent/video/main_bg.png


BIN
bookContent/video/right.png


BIN
bookContent/video/shou.png


BIN
bookContent/video/tanchuang.png


BIN
bookContent/video/top.png


BIN
bookContent/video/yinyue.png


+ 6 - 0
bookZhanshen/.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="ES6" />
+  </component>
+</project>

+ 8 - 0
bookZhanshen/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/newShiwan.iml" filepath="$PROJECT_DIR$/.idea/newShiwan.iml" />
+    </modules>
+  </component>
+</project>

+ 9 - 0
bookZhanshen/.idea/newShiwan.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

+ 115 - 0
bookZhanshen/.idea/workspace.xml

@@ -0,0 +1,115 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="65b7b705-0052-4582-b807-15528e36d3e6" name="Default Changelist" comment="" />
+    <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="ProjectFrameBounds">
+    <option name="x" value="260" />
+    <option name="y" value="20" />
+    <option name="width" value="1400" />
+    <option name="height" value="1000" />
+  </component>
+  <component name="ProjectView">
+    <navigator proportions="" version="1">
+      <foldersAlwaysOnTop value="true" />
+    </navigator>
+    <panes>
+      <pane id="ProjectPane" />
+      <pane id="PackagesPane" />
+      <pane id="Scope" />
+    </panes>
+  </component>
+  <component name="PropertiesComponent">
+    <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="aspect.path.notification.shown" value="true" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/../../../0221-抖音火山版-直播-已送审" />
+    <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
+    <property name="nodejs_npm_path_reset_for_default_project" value="true" />
+  </component>
+  <component name="RunDashboard">
+    <option name="ruleStates">
+      <list>
+        <RuleState>
+          <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
+        </RuleState>
+        <RuleState>
+          <option name="name" value="StatusDashboardGroupingRule" />
+        </RuleState>
+      </list>
+    </option>
+  </component>
+  <component name="SvnConfiguration">
+    <configuration />
+  </component>
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="65b7b705-0052-4582-b807-15528e36d3e6" name="Default Changelist" comment="" />
+      <created>1586914928814</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1586914928814</updated>
+      <workItem from="1586914930074" duration="597000" />
+      <workItem from="1586931700055" duration="634000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TimeTrackingManager">
+    <option name="totallyTimeSpent" value="1231000" />
+  </component>
+  <component name="ToolWindowManager">
+    <frame x="260" y="20" width="1400" height="1000" extended-state="0" />
+    <layout>
+      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.25373134" />
+      <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
+      <window_info id="Image Layers" order="2" />
+      <window_info id="Designer" order="3" />
+      <window_info id="UI Designer" order="4" />
+      <window_info id="Capture Tool" order="5" />
+      <window_info id="Favorites" order="6" side_tool="true" />
+      <window_info anchor="bottom" id="Message" order="0" />
+      <window_info anchor="bottom" id="Find" order="1" />
+      <window_info anchor="bottom" id="Run" order="2" />
+      <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
+      <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
+      <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
+      <window_info anchor="bottom" id="TODO" order="6" />
+      <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Version Control" order="8" />
+      <window_info anchor="bottom" id="Database Changes" order="9" />
+      <window_info anchor="bottom" id="Terminal" order="10" />
+      <window_info anchor="bottom" id="Event Log" order="11" side_tool="true" />
+      <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
+      <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
+      <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
+      <window_info anchor="right" id="Palette" order="3" />
+      <window_info anchor="right" id="Theme Preview" order="4" />
+      <window_info anchor="right" id="Maven" order="5" />
+      <window_info anchor="right" id="Capture Analysis" order="6" />
+      <window_info anchor="right" id="Palette&#9;" order="7" />
+      <window_info anchor="right" id="Database" order="8" />
+    </layout>
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="1" />
+  </component>
+  <component name="masterDetails">
+    <states>
+      <state key="ProjectJDKs.UI">
+        <settings>
+          <splitter-proportions>
+            <option name="proportions">
+              <list>
+                <option value="0.2" />
+              </list>
+            </option>
+          </splitter-proportions>
+        </settings>
+      </state>
+    </states>
+  </component>
+</project>

+ 1 - 0
bookZhanshen/config.json

@@ -0,0 +1 @@
+{"playable_orientation":1,"playable_source":2}

+ 561 - 0
bookZhanshen/index.html

@@ -0,0 +1,561 @@
+<!DOCTYPE html>
+<html style="font-size: 600px;">
+
+<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 name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, 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>
+    <script src="./rem.js"></script>
+    <style>
+        body {
+            margin: 0
+        }
+
+        #app {
+            margin: 50px auto;
+            width: 660px;
+            height: 450px
+        }
+
+        #app>div>span {
+            display: inline-block
+        }
+
+        html,
+        body,
+        div,
+        span,
+        object,
+        iframe,
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        p,
+        blockquote,
+        pre,
+        abbr,
+        address,
+        cite,
+        code,
+        del,
+        dfn,
+        em,
+        img,
+        ins,
+        kbd,
+        q,
+        samp,
+        small,
+        strong,
+        sub,
+        sup,
+        var,
+        b,
+        i,
+        dl,
+        dt,
+        dd,
+        ol,
+        ul,
+        li,
+        fieldset,
+        form,
+        label,
+        legend,
+        table,
+        caption,
+        tbody,
+        tfoot,
+        thead,
+        tr,
+        th,
+        td,
+        article,
+        aside,
+        canvas,
+        details,
+        figcaption,
+        figure,
+        footer,
+        header,
+        hgroup,
+        menu,
+        nav,
+        section,
+        summary,
+        time,
+        mark,
+        audio,
+        video {
+            margin: 0;
+            padding: 0;
+            border: 0;
+            outline: 0;
+            list-style: none;
+        }
+
+        body {
+            min-height: 100%;
+            font-family: 'Microsoft YaHei', 'Myriad Set Pro', 'Lucida Grande', 'Hiragino Sans GB', 'Helvetica', 'Arial', 'sans-serif';
+            color: #333;
+            background: #fff;
+            -webkit-text-size-adjust: 100%;
+            -webkit-font-smoothing: antialiased;
+            -webkit-user-select: none;
+            -webkit-tap-highlight-color: transparent;
+            tap-highlight-color: transparent;
+            font-size: 0.026rem;
+        }
+
+        article,
+        section {
+            display: block;
+        }
+
+        img {
+            vertical-align: middle;
+            border: none;
+        }
+
+        input,
+        button,
+        select,
+        textarea {
+            outline: none;
+        }
+
+        textarea {
+            resize: none;
+        }
+
+        .cmp-main {
+            width: 3.6rem;
+            font-size: 0.1rem;
+            -webkit-transition: opacity 0.5s, padding-bottom 0.4s;
+            transition: opacity 0.5s, padding-bottom 0.4s;
+        }
+
+        .cmp-main .wrap-dialog {
+            -webkit-tap-highlight-color: transparent;
+            min-height: 100vh;
+            background-color: #ebe6e0;
+            background-size: cover;
+            -webkit-transition: -webkit-transform 0.5s;
+            transition: -webkit-transform 0.5s;
+            transition: transform 0.5s;
+            transition: transform 0.5s, -webkit-transform 0.5s;
+        }
+
+        .cmp-main .list-dialog {
+            width: 3.2rem;
+            margin: auto;
+            padding: 20px 0 25vh;
+        }
+
+        .cmp-main .list-dialog li {
+            padding-bottom: 0.3rem;
+        }
+
+        .cmp-main .list-dialog li:after {
+            visibility: hidden;
+            display: block;
+            font-size: 0;
+            content: '';
+            clear: both;
+            height: 0;
+        }
+
+        .cmp-main .list-dialog li:first-child {
+            display: block;
+            opacity: 1;
+        }
+
+        .cmp-main .list-dialog li:last-child {
+            -webkit-animation: ani-opacity 600ms ease-out 1 both;
+        }
+
+        .cmp-main .list-dialog .left .avatar {
+            float: left;
+            width: 0.5rem;
+            height: 0.5rem;
+            margin-top: 0.05rem;
+            background-image: url("./video/left.png");
+            background-position: center;
+            background-size: cover;
+            border-radius: 100%;
+            overflow: hidden;
+            border: 1px #184879 solid;
+        }
+
+        .cmp-main .list-dialog .left .content-box {
+            max-width: 2.5rem;
+            margin-left: 0.6rem;
+            -webkit-box-flex: 1;
+            -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+        }
+
+        .cmp-main .list-dialog .left .content-box .name {
+            margin: 0 0 5px 5px;
+            font-size: 0.15rem;
+            color: #666;
+        }
+
+        .cmp-main .list-dialog .left .content-box .content {
+            position: relative;
+            display: inline-block;
+            min-width: 0.5rem;
+            padding: 0.05rem 0.08rem;
+            font-size: 0.16rem;
+            word-break: break-all;
+            background: #fff;
+            border-radius: 6px;
+            -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+
+        .cmp-main .list-dialog .left .content-box .content em {
+            display: block;
+            position: absolute;
+            top: 25%;
+            left: -0.16rem;
+            width: 0;
+            height: 0;
+            border: 0.08rem solid transparent;
+            border-right: 0.08rem solid #fff;
+        }
+
+        .cmp-main .list-dialog .right .avatar {
+            float: right;
+            width: 0.5rem;
+            height: 0.5rem;
+            margin-top: 0.05rem;
+            background-image: url("./video/right.png");
+            background-position: center;
+            background-size: cover;
+            border-radius: 100%;
+            overflow: hidden;
+            /* border: 1px rgb(188, 15, 19) solid; */
+        }
+
+        .cmp-main .list-dialog .right .content-box {
+            float: right;
+            width: 2.3rem;
+            margin-right: 0.05rem;
+            text-align: right;
+        }
+
+        .cmp-main .list-dialog .right .content-box .name {
+            margin: 0 0 5px 5px;
+            font-size: 0.15rem;
+            color: #666;
+        }
+
+        .cmp-main .list-dialog .right .content-box .content {
+            position: relative;
+            display: inline-block;
+            min-width: 0.5rem;
+            padding: 0.05rem 0.08rem;
+            text-align: left;
+            color: #fff;
+            font-size: 0.16rem;
+            word-break: break-all;
+            background: rgb(43,162,70);
+            border-radius: 6px;
+            -webkit-box-shadow: 0 2px 5px rgba(43,162,70);
+            box-shadow: 0 2px 5px rgba(43,162,70);
+        }
+
+        .cmp-main .list-dialog .right .content-box .content em {
+            display: block;
+            position: absolute;
+            top: 25%;
+            right: -0.16rem;
+            width: 0;
+            height: 0;
+            border: 0.08rem solid transparent;
+            border-left: 0.08rem solid rgb(43,162,70);
+
+        }
+
+        .cmp-main .list-dialog .item-scence-tips {
+            text-align: center;
+        }
+
+        .cmp-main .list-dialog .item-scence-tips div {
+            display: inline-block;
+            padding: 0.05rem 0.08rem;
+            font-size: 0.16rem;
+            text-align: justify;
+            background: rgba(24, 72, 121, 0.2);
+            border-radius: 6px;
+        }
+
+        .cmp-main .list-dialog .item-scence-img {
+            text-align: center;
+        }
+
+        .cmp-main .list-dialog .item-scence-img img {
+            width: 3.2rem;
+            border-radius: 6px;
+        }
+
+        #shouTime {
+            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);
+                -webkit-transform: scale(0.9);
+            }
+
+            100% {
+                -webkit-transform: translate(15%, 15%);
+                -webkit-transform: scale(1);
+            }
+        }
+
+        @keyframes arrowBig {
+            0% {
+                transform: translate(0, 0);
+                transform: scale(0.9);
+
+            }
+
+            100% {
+                transform: translate(15%, 15%);
+                transform: scale(1);
+            }
+        }
+
+
+        .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>
+        <div id="audio-btn" class="audio-rotate"
+            style="width:40px;height:40px;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="main" id="show">
+            <div data-reactroot="">
+                <div class="broccoli_cmp_app">
+                    <div class="cmp-main">
+                        <div class="wrap-dialog" id="parent">
+                            <img src="./video/main_bg.jpg" alt=""
+                                style="position:fixed;top:0;left:0;width:100%;height:100%;z-index: 0">
+                            <div style="position: fixed;bottom: 1.2rem;left: 1.3rem;width:1rem;text-align: center"
+                                id="shou">
+                                <div id="quan" style="border:0.01rem solid gray;width: 0.6rem ;height :0.6rem;border-radius: 50%;position: absolute;top: -0.25rem;left: 0.25rem;display: flex;
+                                    justify-content: center;
+                                    align-items: center;">
+                                    <div
+                                        style="border:0.01rem solid grey;width: 0.3rem ;height :0.3rem;border-radius: 50%;">
+
+                                    </div>
+                                </div>
+                                <img src="./video/shou.png" alt="" id="shouTime"
+                                    style="width: 0.5rem;position: relative;z-index:1">
+                                <p style="text-align:center;font-size: 0.14rem;margin-top: 10px">点屏幕出现剧情</p>
+                            </div>
+
+                            <ul class="list-dialog" style="position:relative;z-index:1">
+
+                                <li class="item-scence-img">
+                                    <div><img src="./video/top.png"></div>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="share"
+            style="width:100%;height:100%;background:rgba(0, 0, 0, 0.5);position: fixed;top: 0;z-index: 10;display:none">
+            <img src="./video/tanchuang.png" alt="" style="width:100%;margin-top: 0.27rem;">
+            <div style="width: 2rem;
+            height: 0.5rem;
+            position: absolute;
+            top: 4rem;
+            left: 0.8rem;z-index:10;" id="btn"></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 src="./list.json"></script>
+    <script type="text/javascript">
+        var viewHeight = document.documentElement.clientHeight;
+        var check = true
+        var count = 0
+
+        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
+                }
+            })
+        });
+
+
+
+        if (check) {
+            $("#show").on("touchend", function () {
+                var list, name
+                list = listJson.list
+                name = listJson.name
+                // check = false
+                var $li1
+                // var name = {
+                //     left: "陆浩成",
+                //     right: '姜蓝欣'
+                // }
+                $('#shou').hide()
+                for (var key in list[count]) {
+                    if (key == 'left') {
+                        $li1 = $(` <li class="left">
+                                <div class="avatar" style="background-image: url(./video/${list[count][key][2]}.png);">
+                                </div>
+                                <div class="content-box">
+                                    <p class="name">${list[count][key][1]}</p>
+                                    <p class="content"
+                                        style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51);"><em
+                                            style="border-right-color: rgb(255, 255, 255);"></em>
+                                       ${list[count][key][0]}
+
+                                    </p>
+                                </div>
+                            </li>`)
+                    } else if (key == 'right') {
+                        $li1 = $(`  <li class="right">
+                                    <div class="avatar" style="background-image: url(./video/${name['right'][1]}.png);">
+                                    </div>
+                                    <div class="content-box">
+                                        <p class="name">${name['right'][0]}</p>
+                                        <p class="content"
+                                            style="background-color: rgba(43,162,70); color: rgb(255, 255, 255);"><em
+                                                style="border-left-color: rgba(43,162,70);"></em>
+                                                ${list[count][key]}
+                                        </p>
+                                    </div>
+                                </li> `)
+                    } else if (key == 'content') {
+                        $li1 = $(` <li class = "item-scence-tips" > <div style = "background-color: rgba(24, 72, 121, 0.2); color: rgb(51, 51, 51);" >
+                            ${list[count][key]} </div> </li>`)
+                    }
+                }
+                $("ul").append($li1);
+                if (
+                    viewHeight - $('ul').height() < 200) {
+                    $('html,body').animate({
+                        scrollTop: Math.abs(viewHeight - $('ul').height()) + 300
+                    }, 300);
+                }
+                count++
+                if (count == list.length + 1) {
+                    $('#share').show()
+                    return
+                }
+            })
+
+
+        }
+        setTimeout(function () {
+            check = true
+        }, 1000);
+
+
+
+        $('#btn').on('touchstart', function (e) {
+            e.preventDefault()
+            e.stopPropagation()
+            window.playableSDK.sendEvent('clickDownloadBar', {
+                section: 'section2',
+                area: 'area3'
+            });
+            window.playableSDK.openAppStore()
+
+
+        })
+    </script>
+</body>
+
+</html>

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 5 - 0
bookZhanshen/jquery.min.js


+ 42 - 0
bookZhanshen/list.json

@@ -0,0 +1,42 @@
+var listJson = {
+"list":[{
+    "content": "大街上,樊刚一身戎装单膝跪地",
+},
+{
+    "left": ["虎帅!狼国大军压境,边关告急!在下奉龙主之命,前来请您出山破敌!","樊刚","fangang"]
+},
+{
+    "right": "我已挂印多年,早已不再过问朝中之事,让龙主另请高明吧!"
+},
+{
+    "left": ["虎帅,如今西境岌岌可危,还请虎帅以国事为重……","樊刚","fangang"]
+},
+{
+    "right": "不要再说了!我要陪我老婆去赴宴了,没空跟你墨迹!"
+},
+{
+    "content": "三年前,护国虎帅萧破天功高盖世之时,却突然封金挂印,解甲归田回了老家南广城,做了一个谁都不知的上门女婿"
+},
+{
+    "content": "楚家家宴,男女老少齐聚一堂,谈笑风生。"
+},
+{
+    "right": "不好意思,刚才有事耽搁了一下,让大家久等了"
+},
+{
+    "content": "欢声笑语,戛然而止。"
+},
+{
+    "left": ["你别自作多情了,难道你没看到吗?我们根本就没有等你!","楚菲菲","chufeifei"]
+},
+{
+    "left": ["有些人出身贫寒,没吃过什么好饭,就让他吃点吧,就当养一条狗好了,他吃不空楚家的。","陈安康","chenankang"]
+},
+{
+    "right": "真当我没脾气么!这三年我忍辱负重,看来是时候要变变天了"
+}
+],
+"name":{ 
+    "right": ["萧破天","xiaopotian"]
+	}
+}

+ 17 - 0
bookZhanshen/rem.js

@@ -0,0 +1,17 @@
+(function(doc, win) {
+    var docEl = doc.documentElement,
+        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
+        recalc = function() {
+            var clientWidth = docEl.clientWidth;
+            if(!clientWidth) return;
+            //          docEl.style.fontSize = 100 * (clientWidth / 360) + 'px';
+            if(clientWidth >= 600) {
+                docEl.style.fontSize = '350px';
+            } else {
+                docEl.style.fontSize = 100 * (clientWidth / 360) + 'px';
+            }
+        };
+    if(!doc.addEventListener) return;
+    win.addEventListener(resizeEvt, recalc, false);
+    doc.addEventListener('DOMContentLoaded', recalc, false);
+})(document, window);

BIN
bookZhanshen/video/bg.mp3


BIN
bookZhanshen/video/chenankang.png


BIN
bookZhanshen/video/chufeifei.png


BIN
bookZhanshen/video/fangang.png


BIN
bookZhanshen/video/main_bg.jpg


BIN
bookZhanshen/video/shou.png


BIN
bookZhanshen/video/tanchuang.png


BIN
bookZhanshen/video/top.png


BIN
bookZhanshen/video/xiaopotian.png


BIN
bookZhanshen/video/yinyue.png


+ 1 - 0
dazhuanpan/config.json

@@ -0,0 +1 @@
+{"playable_orientation":1,"playable_source":2}

BIN
dazhuanpan/images/bg-bottom.png


BIN
dazhuanpan/images/bg-top.png


BIN
dazhuanpan/images/bg-zhuan.png


BIN
dazhuanpan/images/bg.jpg


BIN
dazhuanpan/images/btn.png


BIN
dazhuanpan/images/hongbao.png


BIN
dazhuanpan/images/qian.png


BIN
dazhuanpan/images/shaw.png


BIN
dazhuanpan/images/show.mp3


BIN
dazhuanpan/images/zhenbg.png


BIN
dazhuanpan/images/zhuan.mp3


BIN
dazhuanpan/images/zhuanbg.png


+ 347 - 0
dazhuanpan/index.html

@@ -0,0 +1,347 @@
+<!DOCTYPE html>
+<html style="font-size: 600px;">
+
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, 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>
+        body {
+            margin: 0
+        }
+
+        #app {
+            margin: 50px auto;
+            width: 660px;
+            height: 450px
+        }
+
+        #app>div>span {
+            display: inline-block
+        }
+
+
+        body {
+            min-height: 100%;
+            width: 100%;
+            font-family: 'Microsoft YaHei', 'Myriad Set Pro', 'Lucida Grande', 'Hiragino Sans GB', 'Helvetica', 'Arial', 'sans-serif';
+            color: #333;
+            background: #fff;
+            -webkit-text-size-adjust: 100%;
+            -webkit-font-smoothing: antialiased;
+            -webkit-user-select: none;
+            -webkit-tap-highlight-color: transparent;
+            tap-highlight-color: transparent;
+            font-size: 0.026rem;
+        }
+
+        .wrap-dialog {
+            -webkit-tap-highlight-color: transparent;
+            height: 100vh;
+            width: 100%;
+            background-color: #ebe6e0;
+            background-size: cover;
+            -webkit-transition: -webkit-transform 0.5s;
+            transition: -webkit-transform 0.5s;
+            transition: transform 0.5s;
+            transition: transform 0.5s, -webkit-transform 0.5s;
+        }
+
+        #hongbao {
+            -webkit-animation: arrowBig .5s ease;
+            animation: arrowBig .5s ease;
+            animation-iteration-count: 1;
+            animation-fill-mode: forwards;
+            -webkit-animation-iteration-count: 1;
+            -webkit-animation-fill-mode: forwards;
+        }
+
+        @-webkit-keyframes arrowBig {
+            0% {
+                -webkit-transform: scale(0);
+                opacity: 0;
+            }
+
+            100% {
+                -webkit-transform: scale(1);
+                opacity: 1;
+            }
+        }
+
+        @keyframes arrowBig {
+            0% {
+                transform: scale(0);
+                opacity: 0;
+
+            }
+
+            100% {
+                transform: scale(1);
+                opacity: 1;
+            }
+        }
+
+        #btn {
+            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;
+            /*动画的速度曲线*/
+
+        }
+
+        @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);
+            }
+        }
+    </style>
+
+</head>
+
+<body>
+    <div class="wrap-dialog" style="background:url(./images/bg.jpg);background-size: cover;position: relative">
+        <img src="./images/bg-top.png" style="position:fixed;top:0;width:100%" alt="">
+        <img src="./images/bg-bottom.png" style="position:fixed;bottom:0;width:100%" alt="">
+        <div id="zhuanpan">
+            <div class="pointer"><img src="images/zhenbg.png" alt="pointer"
+                    style="width:1rem;position: absolute;left: 1.3rem;top: 3.4rem;z-index: 2;" /></div>
+            <div class="rotate"><img id="rotate" src="images/zhuanbg.png" alt="turntable"
+                    style="width:3rem;position: absolute;left:0.3rem;top:2.5rem" /></div>
+            <div>
+                <img src="./images/shaw.png" alt="" style="width: 2rem;position: absolute;left: 0.8rem;top: 5.5rem;">
+            </div>
+        </div>
+        <div id="hongbao" style="display:none">
+            <img src="./images/hongbao.png" style="width:3rem;position: absolute;left:0.3rem;top:2.5rem;z-index: 10"
+                alt="">
+            <img src="./images/qian.png" style="    width: 1rem;
+            position: absolute;
+            left: 1.3rem;
+            top: 4.15rem;
+            z-index: 10;" alt="">
+            <img src="./images/btn.png" id="btn" style="width: 1.6rem;
+            position: absolute;
+            left: 1.05rem;
+            top: 4.7rem;
+            z-index: 10;" alt="">
+            <img src="./images/bg-zhuan.png" style="width:100%;position: absolute;left:0;top:2.1rem" alt="">
+        </div>
+        <audio src="./images/zhuan.mp3" id="mediaId"></audio>
+        <audio src="./images/show.mp3" id="mediaShow"></audio>
+    </div>
+    <script src="https://sf3-ttcdn-tos.pstatp.com/obj/union-fe-nc/playable/sdk/playable-sdk.js"></script>
+    <script type="text/javascript" src="js/jquery.min.js"></script>
+    <script type="text/javascript" src="js/awardRotate.js"></script>
+    <script src="./js/rem.js"></script>
+    <script type="text/javascript">
+        $(function () {
+
+
+
+            var rotateTimeOut = function () {
+
+                $('#rotate').rotate({
+
+                    angle: 0,
+
+                    animateTo: 2060,
+
+                    duration: 8000,
+
+
+                });
+
+            };
+
+            var bRotate = false;
+            var x = document.getElementById("mediaId");
+            var x2 = document.getElementById("mediaShow");
+
+            function play() {
+                x.play();
+                x.muted = false
+            }
+
+            x2.pause();
+            x2.muted = true
+
+            function playShow() {
+                x.pause();
+                x.muted = true
+                x2.play();
+                x2.muted = false
+            }
+
+            var rotateFn = function (awards, angles, txt) {
+
+                bRotate = !bRotate;
+
+                play()
+
+                $('#rotate').stopRotate();
+
+                $('#rotate').rotate({
+
+                    angle: 0,
+
+                    animateTo: angles + 1800,
+
+                    duration: 3000,
+
+                    callback: function () {
+
+                        // alert(txt);
+
+                        bRotate = !bRotate;
+
+                        $('#zhuanpan').hide()
+                        $('#hongbao').show()
+                        playShow()
+
+                    }
+
+                })
+
+            };
+
+
+
+            $('.pointer').click(function () {
+
+
+
+                if (bRotate) return;
+
+                var item = 0;
+
+
+
+                switch (item) {
+
+                    case 0:
+
+                        //var angle = [60,120,180,240,300,360];
+
+                        rotateFn(0, 4, '现金66元');
+
+                        break;
+
+                    case 1:
+
+                        //var angle = [88, 137, 185, 235, 287];
+
+                        rotateFn(1, 45, '一等奖');
+
+                        break;
+
+                    case 2:
+
+                        //var angle = [137, 185, 235, 287];
+
+                        rotateFn(2, 88, '二等奖');
+
+                        break;
+
+                    case 3:
+
+                        //var angle = [137, 185, 235, 287];
+
+                        rotateFn(3, 137, '三等奖');
+
+                        break;
+
+                    case 4:
+
+                        //var angle = [185, 235, 287];
+
+                        rotateFn(4, 185, '四等奖');
+
+                        break;
+
+                    case 5:
+
+                        //var angle = [235, 287];
+
+                        rotateFn(5, 235, '五等奖');
+
+                        break;
+
+
+                }
+
+            });
+
+        });
+
+
+        $('#btn').on('touchstart', function (e) {
+            e.preventDefault()
+            e.stopPropagation()
+            window.playableSDK.sendEvent('clickDownloadBar', {
+                section: 'section2',
+                area: 'area3'
+            });
+            window.playableSDK.openAppStore()
+
+
+        })
+
+        function rnd(n, m) {
+
+            return Math.floor(Math.random() * (m - n + 1) + n)
+
+        }
+    </script>
+</body>
+
+</html>

+ 303 - 0
dazhuanpan/js/awardRotate.js

@@ -0,0 +1,303 @@
+/* DaTouWang URL: www.datouwang.com */
+(function($) {
+var supportedCSS,styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" ");
+for (var a=0;a<toCheck.length;a++) if (styles[toCheck[a]] !== undefined) supportedCSS = toCheck[a];
+// Bad eval to preven google closure to remove it from code o_O
+// After compresion replace it back to var IE = 'v' == '\v'
+var IE = eval('"v"=="\v"');
+
+jQuery.fn.extend({
+    rotate:function(parameters)
+    {
+        if (this.length===0||typeof parameters=="undefined") return;
+            if (typeof parameters=="number") parameters={angle:parameters};
+        var returned=[];
+        for (var i=0,i0=this.length;i<i0;i++)
+            {
+                var element=this.get(i);	
+                if (!element.Wilq32 || !element.Wilq32.PhotoEffect) {
+
+                    var paramClone = $.extend(true, {}, parameters); 
+                    var newRotObject = new Wilq32.PhotoEffect(element,paramClone)._rootObj;
+
+                    returned.push($(newRotObject));
+                }
+                else {
+                    element.Wilq32.PhotoEffect._handleRotation(parameters);
+                }
+            }
+            return returned;
+    },
+    getRotateAngle: function(){
+        var ret = [];
+        for (var i=0,i0=this.length;i<i0;i++)
+            {
+                var element=this.get(i);	
+                if (element.Wilq32 && element.Wilq32.PhotoEffect) {
+                    ret[i] = element.Wilq32.PhotoEffect._angle;
+                }
+            }
+            return ret;
+    },
+    stopRotate: function(){
+        for (var i=0,i0=this.length;i<i0;i++)
+            {
+                var element=this.get(i);	
+                if (element.Wilq32 && element.Wilq32.PhotoEffect) {
+                    clearTimeout(element.Wilq32.PhotoEffect._timer);
+                }
+            }
+    }
+});
+
+// Library agnostic interface
+
+Wilq32=window.Wilq32||{};
+Wilq32.PhotoEffect=(function(){
+
+	if (supportedCSS) {
+		return function(img,parameters){
+			img.Wilq32 = {
+				PhotoEffect: this
+			};
+            
+            this._img = this._rootObj = this._eventObj = img;
+            this._handleRotation(parameters);
+		}
+	} else {
+		return function(img,parameters) {
+			// Make sure that class and id are also copied - just in case you would like to refeer to an newly created object
+            this._img = img;
+
+			this._rootObj=document.createElement('span');
+			this._rootObj.style.display="inline-block";
+			this._rootObj.Wilq32 = 
+				{
+					PhotoEffect: this
+				};
+			img.parentNode.insertBefore(this._rootObj,img);
+			
+			if (img.complete) {
+				this._Loader(parameters);
+			} else {
+				var self=this;
+				// TODO: Remove jQuery dependency
+				jQuery(this._img).bind("load", function()
+				{
+					self._Loader(parameters);
+				});
+			}
+		}
+	}
+})();
+
+Wilq32.PhotoEffect.prototype={
+    _setupParameters : function (parameters){
+		this._parameters = this._parameters || {};
+        if (typeof this._angle !== "number") this._angle = 0 ;
+        if (typeof parameters.angle==="number") this._angle = parameters.angle;
+        this._parameters.animateTo = (typeof parameters.animateTo==="number") ? (parameters.animateTo) : (this._angle); 
+
+        this._parameters.step = parameters.step || this._parameters.step || null;
+		this._parameters.easing = parameters.easing || this._parameters.easing || function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }
+		this._parameters.duration = parameters.duration || this._parameters.duration || 1000;
+        this._parameters.callback = parameters.callback || this._parameters.callback || function(){};
+        if (parameters.bind && parameters.bind != this._parameters.bind) this._BindEvents(parameters.bind); 
+	},
+	_handleRotation : function(parameters){
+          this._setupParameters(parameters);
+          if (this._angle==this._parameters.animateTo) {
+              this._rotate(this._angle);
+          }
+          else { 
+              this._animateStart();          
+          }
+	},
+
+	_BindEvents:function(events){
+		if (events && this._eventObj) 
+		{
+            // Unbinding previous Events
+            if (this._parameters.bind){
+                var oldEvents = this._parameters.bind;
+                for (var a in oldEvents) if (oldEvents.hasOwnProperty(a)) 
+                        // TODO: Remove jQuery dependency
+                        jQuery(this._eventObj).unbind(a,oldEvents[a]);
+            }
+
+            this._parameters.bind = events;
+			for (var a in events) if (events.hasOwnProperty(a)) 
+				// TODO: Remove jQuery dependency
+					jQuery(this._eventObj).bind(a,events[a]);
+		}
+	},
+
+	_Loader:(function()
+	{
+		if (IE)
+		return function(parameters)
+		{
+			var width=this._img.width;
+			var height=this._img.height;
+			this._img.parentNode.removeChild(this._img);
+							
+			this._vimage = this.createVMLNode('image');
+			this._vimage.src=this._img.src;
+			this._vimage.style.height=height+"px";
+			this._vimage.style.width=width+"px";
+			this._vimage.style.position="absolute"; // FIXES IE PROBLEM - its only rendered if its on absolute position!
+			this._vimage.style.top = "0px";
+			this._vimage.style.left = "0px";
+
+			/* Group minifying a small 1px precision problem when rotating object */
+			this._container =  this.createVMLNode('group');
+			this._container.style.width=width;
+			this._container.style.height=height;
+			this._container.style.position="absolute";
+			this._container.setAttribute('coordsize',width-1+','+(height-1)); // This -1, -1 trying to fix ugly problem with small displacement on IE
+			this._container.appendChild(this._vimage);
+			
+			this._rootObj.appendChild(this._container);
+			this._rootObj.style.position="relative"; // FIXES IE PROBLEM
+			this._rootObj.style.width=width+"px";
+			this._rootObj.style.height=height+"px";
+			this._rootObj.setAttribute('id',this._img.getAttribute('id'));
+			this._rootObj.className=this._img.className;			
+		    this._eventObj = this._rootObj;	
+		    this._handleRotation(parameters);	
+		}
+		else
+		return function (parameters)
+		{
+			this._rootObj.setAttribute('id',this._img.getAttribute('id'));
+			this._rootObj.className=this._img.className;
+			
+			this._width=this._img.width;
+			this._height=this._img.height;
+			this._widthHalf=this._width/2; // used for optimisation
+			this._heightHalf=this._height/2;// used for optimisation
+			
+			var _widthMax=Math.sqrt((this._height)*(this._height) + (this._width) * (this._width));
+
+			this._widthAdd = _widthMax - this._width;
+			this._heightAdd = _widthMax - this._height;	// widthMax because maxWidth=maxHeight
+			this._widthAddHalf=this._widthAdd/2; // used for optimisation
+			this._heightAddHalf=this._heightAdd/2;// used for optimisation
+			
+			this._img.parentNode.removeChild(this._img);	
+			
+			this._aspectW = ((parseInt(this._img.style.width,10)) || this._width)/this._img.width;
+			this._aspectH = ((parseInt(this._img.style.height,10)) || this._height)/this._img.height;
+			
+			this._canvas=document.createElement('canvas');
+			this._canvas.setAttribute('width',this._width);
+			this._canvas.style.position="relative";
+			this._canvas.style.left = -this._widthAddHalf + "px";
+			this._canvas.style.top = -this._heightAddHalf + "px";
+			this._canvas.Wilq32 = this._rootObj.Wilq32;
+			
+			this._rootObj.appendChild(this._canvas);
+			this._rootObj.style.width=this._width+"px";
+			this._rootObj.style.height=this._height+"px";
+            this._eventObj = this._canvas;
+			
+			this._cnv=this._canvas.getContext('2d');
+            this._handleRotation(parameters);
+		}
+	})(),
+
+	_animateStart:function()
+	{	
+		if (this._timer) {
+			clearTimeout(this._timer);
+		}
+		this._animateStartTime = +new Date;
+		this._animateStartAngle = this._angle;
+		this._animate();
+	},
+    _animate:function()
+    {
+         var actualTime = +new Date;
+         var checkEnd = actualTime - this._animateStartTime > this._parameters.duration;
+
+         // TODO: Bug for animatedGif for static rotation ? (to test)
+         if (checkEnd && !this._parameters.animatedGif) 
+         {
+             clearTimeout(this._timer);
+         }
+         else 
+         {
+             if (this._canvas||this._vimage||this._img) {
+                 var angle = this._parameters.easing(0, actualTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration);
+                 this._rotate((~~(angle*10))/10);
+             }
+             if (this._parameters.step) {
+                this._parameters.step(this._angle);
+             }
+             var self = this;
+             this._timer = setTimeout(function()
+                     {
+                     self._animate.call(self);
+                     }, 10);
+         }
+
+         // To fix Bug that prevents using recursive function in callback I moved this function to back
+         if (this._parameters.callback && checkEnd){
+             this._angle = this._parameters.animateTo;
+             this._rotate(this._angle);
+             this._parameters.callback.call(this._rootObj);
+         }
+     },
+
+	_rotate : (function()
+	{
+		var rad = Math.PI/180;
+		if (IE)
+		return function(angle)
+		{
+            this._angle = angle;
+			this._container.style.rotation=(angle%360)+"deg";
+		}
+		else if (supportedCSS)
+		return function(angle){
+            this._angle = angle;
+			this._img.style[supportedCSS]="rotate("+(angle%360)+"deg)";
+		}
+		else 
+		return function(angle)
+		{
+            this._angle = angle;
+			angle=(angle%360)* rad;
+			// clear canvas	
+			this._canvas.width = this._width+this._widthAdd;
+			this._canvas.height = this._height+this._heightAdd;
+						
+			// REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate..
+			this._cnv.translate(this._widthAddHalf,this._heightAddHalf);	// at least center image on screen
+			this._cnv.translate(this._widthHalf,this._heightHalf);			// we move image back to its orginal 
+			this._cnv.rotate(angle);										// rotate image
+			this._cnv.translate(-this._widthHalf,-this._heightHalf);		// move image to its center, so we can rotate around its center
+			this._cnv.scale(this._aspectW,this._aspectH); // SCALE - if needed ;)
+			this._cnv.drawImage(this._img, 0, 0);							// First - we draw image
+		}
+
+	})()
+}
+
+if (IE)
+{
+Wilq32.PhotoEffect.prototype.createVMLNode=(function(){
+document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
+		try {
+			!document.namespaces.rvml && document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml");
+			return function (tagName) {
+				return document.createElement('<rvml:' + tagName + ' class="rvml">');
+			};
+		} catch (e) {
+			return function (tagName) {
+				return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
+			};
+		}		
+})();
+}
+})(jQuery);

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 5 - 0
dazhuanpan/js/jquery.min.js


+ 17 - 0
dazhuanpan/js/rem.js

@@ -0,0 +1,17 @@
+(function(doc, win) {
+    var docEl = doc.documentElement,
+        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
+        recalc = function() {
+            var clientWidth = docEl.clientWidth;
+            if(!clientWidth) return;
+            //          docEl.style.fontSize = 100 * (clientWidth / 360) + 'px';
+            if(clientWidth >= 600) {
+                docEl.style.fontSize = '350px';
+            } else {
+                docEl.style.fontSize = 100 * (clientWidth / 360) + 'px';
+            }
+        };
+    if(!doc.addEventListener) return;
+    win.addEventListener(resizeEvt, recalc, false);
+    doc.addEventListener('DOMContentLoaded', recalc, false);
+})(document, window);

+ 1 - 0
drag

@@ -0,0 +1 @@
+Subproject commit 3cd34bfde90781d817224608174b686eba65e40a

+ 6 - 0
newShiwan/.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="ES6" />
+  </component>
+</project>

+ 8 - 0
newShiwan/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/newShiwan.iml" filepath="$PROJECT_DIR$/.idea/newShiwan.iml" />
+    </modules>
+  </component>
+</project>

+ 9 - 0
newShiwan/.idea/newShiwan.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

+ 115 - 0
newShiwan/.idea/workspace.xml

@@ -0,0 +1,115 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="65b7b705-0052-4582-b807-15528e36d3e6" name="Default Changelist" comment="" />
+    <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="ProjectFrameBounds">
+    <option name="x" value="260" />
+    <option name="y" value="20" />
+    <option name="width" value="1400" />
+    <option name="height" value="1000" />
+  </component>
+  <component name="ProjectView">
+    <navigator proportions="" version="1">
+      <foldersAlwaysOnTop value="true" />
+    </navigator>
+    <panes>
+      <pane id="ProjectPane" />
+      <pane id="PackagesPane" />
+      <pane id="Scope" />
+    </panes>
+  </component>
+  <component name="PropertiesComponent">
+    <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="aspect.path.notification.shown" value="true" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/../../../0221-抖音火山版-直播-已送审" />
+    <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
+    <property name="nodejs_npm_path_reset_for_default_project" value="true" />
+  </component>
+  <component name="RunDashboard">
+    <option name="ruleStates">
+      <list>
+        <RuleState>
+          <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
+        </RuleState>
+        <RuleState>
+          <option name="name" value="StatusDashboardGroupingRule" />
+        </RuleState>
+      </list>
+    </option>
+  </component>
+  <component name="SvnConfiguration">
+    <configuration />
+  </component>
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="65b7b705-0052-4582-b807-15528e36d3e6" name="Default Changelist" comment="" />
+      <created>1586914928814</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1586914928814</updated>
+      <workItem from="1586914930074" duration="597000" />
+      <workItem from="1586931700055" duration="634000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TimeTrackingManager">
+    <option name="totallyTimeSpent" value="1231000" />
+  </component>
+  <component name="ToolWindowManager">
+    <frame x="260" y="20" width="1400" height="1000" extended-state="0" />
+    <layout>
+      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.25373134" />
+      <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
+      <window_info id="Image Layers" order="2" />
+      <window_info id="Designer" order="3" />
+      <window_info id="UI Designer" order="4" />
+      <window_info id="Capture Tool" order="5" />
+      <window_info id="Favorites" order="6" side_tool="true" />
+      <window_info anchor="bottom" id="Message" order="0" />
+      <window_info anchor="bottom" id="Find" order="1" />
+      <window_info anchor="bottom" id="Run" order="2" />
+      <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
+      <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
+      <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
+      <window_info anchor="bottom" id="TODO" order="6" />
+      <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Version Control" order="8" />
+      <window_info anchor="bottom" id="Database Changes" order="9" />
+      <window_info anchor="bottom" id="Terminal" order="10" />
+      <window_info anchor="bottom" id="Event Log" order="11" side_tool="true" />
+      <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
+      <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
+      <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
+      <window_info anchor="right" id="Palette" order="3" />
+      <window_info anchor="right" id="Theme Preview" order="4" />
+      <window_info anchor="right" id="Maven" order="5" />
+      <window_info anchor="right" id="Capture Analysis" order="6" />
+      <window_info anchor="right" id="Palette&#9;" order="7" />
+      <window_info anchor="right" id="Database" order="8" />
+    </layout>
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="1" />
+  </component>
+  <component name="masterDetails">
+    <states>
+      <state key="ProjectJDKs.UI">
+        <settings>
+          <splitter-proportions>
+            <option name="proportions">
+              <list>
+                <option value="0.2" />
+              </list>
+            </option>
+          </splitter-proportions>
+        </settings>
+      </state>
+    </states>
+  </component>
+</project>

+ 1 - 0
newShiwan/config.json

@@ -0,0 +1 @@
+{"playable_orientation":1,"playable_source":2}

+ 439 - 0
newShiwan/index.html

@@ -0,0 +1,439 @@
+<!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);
+        }
+
+
+        @-webkit-keyframes arrowBig {
+            0% {
+                -webkit-transform: translateY(0) scale(1.5);
+                opacity: 1;
+            }
+
+            100% {
+                -webkit-transform: translateY(-100%)  scale(2);
+                opacity: 0
+            }
+        }
+
+        @keyframes arrowBig {
+            0% {
+                transform: translateY(0) scale(1.5);
+                opacity: 1;
+            }
+
+            100% {
+                transform: translateY(-100%)  scale(2);
+                opacity: 0;
+            }
+        }
+        .arrow {
+            width: 100px;
+            height: 56px;
+            line-height: 56px;
+            text-align: center;
+            font-size: 50px;
+            font-weight: bold;
+            color: #d00;
+            position: absolute;
+            z-index: 9999;
+            right: 80px;
+            bottom: 240px;
+            -webkit-animation: arrow 1.2s .5s ease-in-out infinite;
+            animation: arrow 1.2s .5s ease-in-out infinite;
+        }
+
+        @-webkit-keyframes arrow {
+            0% {
+                -webkit-transform: translateY(0);
+                opacity: 1;
+            }
+
+            100% {
+                -webkit-transform: translateY(-100%);
+                opacity: 0
+            }
+        }
+
+        @keyframes arrow {
+            0% {
+                transform: translateY(0);
+                opacity: 1;
+            }
+
+            100% {
+                transform: translateY(-100%);
+                opacity: 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);
+            }
+        }
+    </style>
+</head>
+
+<body onload="videoPlay()">
+
+    <div class="page_box">
+        <div class="page page1" onclick="videoPlay()">
+            <video class="video" id="video-play"  style="object-fit:fill;"  type="video/mpeg" src="./video/1.mp4" data-src='./video/1.mp4' muted="false" autoplay x5-video-player-fullscreen='false' x-webkit-airplay='true'  webkit-playsinline='true'  playsinline='true' x5-video-player-type="h5" x5-playsinline x-webkit-airplay='allow' loop='loop'>
+            </video>
+        </div>
+        <div class="page page2 hide">
+            <video class="video"  type="video/mpeg"  style="object-fit:fill;" src="./video/2.mp4"  data-src='./video/2.mp4' preload="auto" x-webkit-airplay="true" playsinline=""
+                webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="false"
+                -webkit-playsinline="" style="object-fit:fill;" loop='loop' muted>
+        </div>
+        <!-- <div class="page page3 hide">
+            <video class="video"  type="video/mpeg"  style="object-fit:fill;" src="./video/3.mp4"  data-src='./video/3.mp4' preload="auto" x-webkit-airplay="true" playsinline=""
+                webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="false"
+                -webkit-playsinline="" style="object-fit:fill;" loop='loop' muted>
+        </div> -->
+
+    </div>
+
+    <div class="arrow"><img src="./video/shou.png" alt="" style="width:100%"></div>
+    <div style='width: 70%;position: absolute;top: 85%;left: 25%;z-index: 10000;' id="hongbao">
+        <img src='./video/dianji.png' alt='' style='width:80%;' id="jingtai"  />
+        <img src="./video/zuhe.png" alt=""  style='width:80%;position: absolute;left: 0;top: -100px;z-index: -1;display: none;' id="jinbi">
+    </div>
+    <!-- <script src="https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/union/playable/sdk/index.b5662ec443f458c8a87e.js"></script> -->
+    <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">
+ //<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+        var curPage = 1;
+        var PageL = $('.page_box .page').length;
+        var canTouch = false;
+        canTouch = true;
+        var startY, endY, diff;
+        $('.page_box').on('touchstart', touchStart);
+        $('.page_box').on('touchmove', touchMove);
+        $('.page_box').on('touchend', touchEnd);
+        var playOne = $('.video')[0]
+        $('#jingtai').on('touchstart', function(e) {
+            e.preventDefault()
+            e.stopPropagation()
+            window.playableSDK.sendEvent('clickDownloadBar',{ section: 'section2', area: 'area3' });
+            window.playableSDK.openAppStore()
+            
+
+        })
+        window.addEventListener('touchstart', function() {
+            document.getElementById('video-play').play()
+        })
+
+        setTimeout(videoPlay(),10)
+        function  videoPlay() { 
+            document.getElementById('video-play').play()
+            document.getElementById('video-play').muted=false
+         }
+        //  
+        function touchStart(e) {
+            //	var touch = e.touches[0];
+            var touch = e.originalEvent.targetTouches[0];
+            startY = touch.pageY;
+        }
+
+        function touchMove(e) {
+            e.preventDefault();
+            //	var touch = e.touches[0];
+            var touch = e.originalEvent.targetTouches[0];
+            endY = touch.pageY;
+            diff = endY - startY;
+        }
+
+        function touchEnd(e) {
+            if (Math.abs(diff) > 150 && canTouch) {
+                if (diff > 0) {
+                    if (curPage <= 1) {
+                        return;
+                    }
+
+                    $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('outDown');
+                    curPage--;
+                    $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('inDown');
+
+                } else {
+                    if (curPage >= PageL) {
+                        return;
+                    }
+
+                    $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('outTop');
+                    curPage++;
+                    $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('inTop');
+
+                }
+                if (curPage >= PageL) {
+                    $('.arrow').hide();
+                    $('#jinbi').show()
+                } else {
+                    $('.arrow').show();
+                    $('#jinbi').hide();
+                }
+
+                canTouch = false;
+                setTimeout(function () {
+                    canTouch = true;
+                    diff = 0;
+                    $('.page' + (curPage - 1) + ', .page' + (curPage + 1)).addClass('hide');
+                }, 500);
+            }
+			
+            for (let i = 0; i < $('video').length; i++) {
+                if (i == curPage - 1) {
+                    $('.video')[i].play()
+                    $('.video')[i].muted = false
+                } else {
+                    $('.video')[i].pause();
+                }
+            }
+
+
+        }
+        //window.addEventListener('touchEnd', function() {
+           // $('.video')[curPage - 1].play()
+        //})
+
+        //点击红包落地页
+        // function clickOpen(e) {
+        //     alert(1)
+        //     e.preventDefault()
+        //     window.openAppStore();
+        // }
+
+
+
+    </script>
+</body>
+
+</html>

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 5 - 0
newShiwan/jquery.min.js


BIN
newShiwan/video/1.mp4


BIN
newShiwan/video/2.mp4


BIN
newShiwan/video/dianji.png


BIN
newShiwan/video/shou.png


BIN
newShiwan/video/zuhe.png


+ 6 - 0
selectShiwan/.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="ES6" />
+  </component>
+</project>

+ 8 - 0
selectShiwan/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/newShiwan.iml" filepath="$PROJECT_DIR$/.idea/newShiwan.iml" />
+    </modules>
+  </component>
+</project>

+ 9 - 0
selectShiwan/.idea/newShiwan.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

+ 115 - 0
selectShiwan/.idea/workspace.xml

@@ -0,0 +1,115 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="65b7b705-0052-4582-b807-15528e36d3e6" name="Default Changelist" comment="" />
+    <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="ProjectFrameBounds">
+    <option name="x" value="260" />
+    <option name="y" value="20" />
+    <option name="width" value="1400" />
+    <option name="height" value="1000" />
+  </component>
+  <component name="ProjectView">
+    <navigator proportions="" version="1">
+      <foldersAlwaysOnTop value="true" />
+    </navigator>
+    <panes>
+      <pane id="ProjectPane" />
+      <pane id="PackagesPane" />
+      <pane id="Scope" />
+    </panes>
+  </component>
+  <component name="PropertiesComponent">
+    <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="aspect.path.notification.shown" value="true" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/../../../0221-抖音火山版-直播-已送审" />
+    <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
+    <property name="nodejs_npm_path_reset_for_default_project" value="true" />
+  </component>
+  <component name="RunDashboard">
+    <option name="ruleStates">
+      <list>
+        <RuleState>
+          <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
+        </RuleState>
+        <RuleState>
+          <option name="name" value="StatusDashboardGroupingRule" />
+        </RuleState>
+      </list>
+    </option>
+  </component>
+  <component name="SvnConfiguration">
+    <configuration />
+  </component>
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="65b7b705-0052-4582-b807-15528e36d3e6" name="Default Changelist" comment="" />
+      <created>1586914928814</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1586914928814</updated>
+      <workItem from="1586914930074" duration="597000" />
+      <workItem from="1586931700055" duration="634000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TimeTrackingManager">
+    <option name="totallyTimeSpent" value="1231000" />
+  </component>
+  <component name="ToolWindowManager">
+    <frame x="260" y="20" width="1400" height="1000" extended-state="0" />
+    <layout>
+      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.25373134" />
+      <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
+      <window_info id="Image Layers" order="2" />
+      <window_info id="Designer" order="3" />
+      <window_info id="UI Designer" order="4" />
+      <window_info id="Capture Tool" order="5" />
+      <window_info id="Favorites" order="6" side_tool="true" />
+      <window_info anchor="bottom" id="Message" order="0" />
+      <window_info anchor="bottom" id="Find" order="1" />
+      <window_info anchor="bottom" id="Run" order="2" />
+      <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
+      <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
+      <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
+      <window_info anchor="bottom" id="TODO" order="6" />
+      <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Version Control" order="8" />
+      <window_info anchor="bottom" id="Database Changes" order="9" />
+      <window_info anchor="bottom" id="Terminal" order="10" />
+      <window_info anchor="bottom" id="Event Log" order="11" side_tool="true" />
+      <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
+      <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
+      <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
+      <window_info anchor="right" id="Palette" order="3" />
+      <window_info anchor="right" id="Theme Preview" order="4" />
+      <window_info anchor="right" id="Maven" order="5" />
+      <window_info anchor="right" id="Capture Analysis" order="6" />
+      <window_info anchor="right" id="Palette&#9;" order="7" />
+      <window_info anchor="right" id="Database" order="8" />
+    </layout>
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="1" />
+  </component>
+  <component name="masterDetails">
+    <states>
+      <state key="ProjectJDKs.UI">
+        <settings>
+          <splitter-proportions>
+            <option name="proportions">
+              <list>
+                <option value="0.2" />
+              </list>
+            </option>
+          </splitter-proportions>
+        </settings>
+      </state>
+    </states>
+  </component>
+</project>

+ 1 - 0
selectShiwan/config.json

@@ -0,0 +1 @@
+{"playable_orientation":1,"playable_source":2}

+ 760 - 0
selectShiwan/index.html

@@ -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">热门小说&nbsp;&nbsp;&nbsp;&nbsp;量身定制
+            <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>

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 5 - 0
selectShiwan/jquery.min.js


BIN
selectShiwan/video/bg-detail.jpg


BIN
selectShiwan/video/bg-nan.jpg


BIN
selectShiwan/video/bg-nv.jpg


BIN
selectShiwan/video/bg.jpg


BIN
selectShiwan/video/bg.mp3


BIN
selectShiwan/video/bg2.jpg


BIN
selectShiwan/video/bottom.png


BIN
selectShiwan/video/btn.png


BIN
selectShiwan/video/content-nan1.png


BIN
selectShiwan/video/content-nan2.png


BIN
selectShiwan/video/content-nan3.png


BIN
selectShiwan/video/content-nv1.png


BIN
selectShiwan/video/content-nv2.png


BIN
selectShiwan/video/content-nv3.png


BIN
selectShiwan/video/else.png


BIN
selectShiwan/video/hongbao.png


BIN
selectShiwan/video/hongbaoelse.png


BIN
selectShiwan/video/jinbi.mp3


BIN
selectShiwan/video/jiutale.png


BIN
selectShiwan/video/nan.png


BIN
selectShiwan/video/nan1.png


BIN
selectShiwan/video/nan2.png


BIN
selectShiwan/video/nan3.png


BIN
selectShiwan/video/nv.png


BIN
selectShiwan/video/nv1.png


BIN
selectShiwan/video/nv2.png


+ 0 - 0
selectShiwan/video/nv3.png


برخی فایل ها در این مقایسه diff نمایش داده نمی شوند زیرا تعداد فایل ها بسیار زیاد است