4 年之前 · daea7c4cac
--- a/4dage/ZZGX01.4dage
+++ b/4dage/ZZGX01.4dage
--- a/4dage/ZZGX02.4dage
+++ b/4dage/ZZGX02.4dage
--- a/4dage/ZZGX03.4dage
+++ b/4dage/ZZGX03.4dage
--- a/4dage/ZZGX04.4dage
+++ b/4dage/ZZGX04.4dage
--- a/4dage/ZZGX05.4dage
+++ b/4dage/ZZGX05.4dage
--- a/4dage/ZZGX06.4dage
+++ b/4dage/ZZGX06.4dage
--- a/4dage/ZZGX07.4dage
+++ b/4dage/ZZGX07.4dage
--- a/4dage/ZZGX08.4dage
+++ b/4dage/ZZGX08.4dage
--- a/4dage/ZZGX09.4dage
+++ b/4dage/ZZGX09.4dage
--- a/4dage/ZZGX10.4dage
+++ b/4dage/ZZGX10.4dage
--- a/4dage/ZZGX11.4dage
+++ b/4dage/ZZGX11.4dage
--- a/4dage/ZZGX14.4dage
+++ b/4dage/ZZGX14.4dage
--- a/4dage/ZZGX15.4dage
+++ b/4dage/ZZGX15.4dage
--- a/4dage/ZZGX16.4dage
+++ b/4dage/ZZGX16.4dage
--- a/4dage/ZZGX17.4dage
+++ b/4dage/ZZGX17.4dage
--- a/4dage/ZZGX18.4dage
+++ b/4dage/ZZGX18.4dage
--- a/Model.html
+++ b/Model.html
@@ -0,0 +1,60 @@
 
				+<!DOCTYPE html>
			
 
				+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
			
 
				+<meta name="viewport"
			
 
				+    content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
			
 
				+<link rel="icon" type="image/png" sizes="32x32" href="images/favicon.png" class="keep">
			
 
				+<link rel="stylesheet" href="css/index.css">
			
 
				+<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+    <title>郑州信息工程学院文物</title>
			
 
				+    <!-- <script src="https://model3d.4dage.com/3D/2018/model/DG/js/4dage.js"></script> -->
			
 
				+    <script src="js/4dage.js"></script>
			
 
				+    <style>
			
 
				+        html {
			
 
				+            overflow: hidden;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <div id="ui">
			
 
				+        <!-- <div id="introductionWrap" class="animated">
			
 
				+            <span id="name"></span>
			
 
				+            <span id="time"></span>
			
 
				+            <span id="size"></span>
			
 
				+            <span id="texture"></span>
			
 
				+            <span id="keep"></span>
			
 
				+            <span id="num"></span>
			
 
				+            <span id="level"></span>
			
 
				+            <span id="unit"></span>
			
 
				+        </div>
			
 
				+        <div id="iconWrap" class="iconWrap">
			
 
				+            <img id="iconLeft" class="mar-right" src="images/icon_left.png" alt="">
			
 
				+            <img id="iconRight" class="iconRight" src="images/icon_right.png" alt="">
			
 
				+        </div>
			
 
				+        <div class="iconAction">
			
 
				+            <div id="iconHome" class="iconMenu iconHome"><img src="images/icon_home.png" alt=""><span>首页</span></div>
			
 
				+            <div class="iconMenu iconInfo" id="iconInfo" data-info=0>
			
 
				+                <img  src="images/icon_info.png" alt="">
			
 
				+                <span>文物介绍</span>
			
 
				+            </div>
			
 
				+        </div> -->
			
 
				+        <span id="companyText" class="loading animated ">四维时代提供技术支持</span>
			
 
				+    </div>
			
 
				+    <script src="js/jquery.js"></script>
			
 
				+    <!-- <script src="js/constant.js"></script> -->
			
 
				+
			
 
				+    <!-- <script type="text/javascript" src="js/data.js"></script> -->
			
 
				+    <script>
			
 
				+         var number = getQueryVariable("m");
			
 
				+       /*  window.autoRotate = true; */   // 是否自动旋转
			
 
				+        
			
 
				+        fdage.embed('4dage/'+ number + '.4dage', { width: 800, height: 600, autoStart: true, fullFrame: true, pagePreset: false });
			
 
				+        // marmoset.embed('4dage/' + number + '.4dage', { width: 800, height: 600, autoStart: true, fullFrame: true, pagePreset: false });
			
 
				+     
			
 
				+    </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/css/index.css
+++ b/css/index.css
@@ -0,0 +1,301 @@
 
				+html, body {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    font-family: PingFangSC-Regular, sans-serif;
			
 
				+}
			
 
				+
			
 
				+html, body, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, ul, ol, li, p, blockquote, pre, hr, figure, table, caption, th, td, form, fieldset, legend, input, button, textarea, menu {
			
 
				+    margin: 0;
			
 
				+    padding: 0;
			
 
				+}
			
 
				+
			
 
				+/* ::-webkit-scrollbar {
			
 
				+    display: none;
			
 
				+} */
			
 
				+
			
 
				+iframe {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+}
			
 
				+
			
 
				+#ui {
			
 
				+    position: absolute;
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    align-items: center;
			
 
				+    flex-direction: column;
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    /* color: #494949; */
			
 
				+    letter-spacing: 3px;
			
 
				+}
			
 
				+
			
 
				+#logoText {
			
 
				+    z-index: 1;
			
 
				+    position: absolute;
			
 
				+    bottom: 20px;
			
 
				+    font-size: 18px;
			
 
				+    font-weight: 100;
			
 
				+    letter-spacing: 4px;
			
 
				+}
			
 
				+
			
 
				+.switch-btn-Wrap {
			
 
				+    z-index: 1;
			
 
				+    position: absolute;
			
 
				+    top: 20px;
			
 
				+    right: 20px;
			
 
				+}
			
 
				+
			
 
				+.switch-btn-Wrap img {
			
 
				+    width: 75px;
			
 
				+    ;
			
 
				+}
			
 
				+
			
 
				+#objName {
			
 
				+    z-index: 1;
			
 
				+    position: absolute;
			
 
				+    top: 20px;
			
 
				+    left: 32px;
			
 
				+    font-size: 22px;
			
 
				+    font-weight: 100;
			
 
				+    letter-spacing: 4px;
			
 
				+    color: #ffffff;
			
 
				+}
			
 
				+
			
 
				+#iconWrap {
			
 
				+    position: absolute;
			
 
				+    bottom: 30px;
			
 
				+    width: 200px;
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    z-index: 1;
			
 
				+}
			
 
				+
			
 
				+.mar-right {
			
 
				+    margin-right: 120px;
			
 
				+}
			
 
				+
			
 
				+#iconLeft {
			
 
				+    cursor: not-allowed;
			
 
				+}
			
 
				+
			
 
				+#iconRight {
			
 
				+    cursor: pointer;
			
 
				+}
			
 
				+
			
 
				+#introductionWrap{
			
 
				+    position: absolute;
			
 
				+    z-index: 1;
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+    left: 20px;
			
 
				+    text-align: left;
			
 
				+    top: 20px;
			
 
				+    font-size: 16px;
			
 
				+    color: #ffffff;
			
 
				+    font-weight: 100;
			
 
				+    line-height: 30px;
			
 
				+    letter-spacing: 2px;
			
 
				+    width: 500px;
			
 
				+    display:none;
			
 
				+}
			
 
				+#companyText{
			
 
				+    position: absolute;
			
 
				+    z-index: 1;
			
 
				+    font-size: 16px;
			
 
				+    color:rgb(153, 153, 153);
			
 
				+    font-weight: 100;
			
 
				+    left: 50%;
			
 
				+    transform: translateX(-50%);
			
 
				+    bottom: 20px;
			
 
				+    letter-spacing: 1px;
			
 
				+    text-shadow:rgb(51, 51, 51) 0px 1px 1px;
			
 
				+}
			
 
				+.bg-audio {
			
 
				+    display:block;
			
 
				+    position:absolute;
			
 
				+    bottom:30px;
			
 
				+    right:10px;
			
 
				+    width:30px;
			
 
				+    height:30px;
			
 
				+    background:url(../images/bgmusic-play-icon.png)center/100% no-repeat;
			
 
				+    z-index:99;
			
 
				+}
			
 
				+.iconHome{
			
 
				+    top:30px;
			
 
				+}
			
 
				+.iconMenu {
			
 
				+    position:absolute;
			
 
				+    z-index:2;
			
 
				+    right:52px;
			
 
				+    display:flex;
			
 
				+    align-items: center;
			
 
				+    flex-direction: column;
			
 
				+    text-align: center;
			
 
				+}
			
 
				+.iconInfo {
			
 
				+    top:150px;
			
 
				+}
			
 
				+.iconMenu span {
			
 
				+    color:#fff;
			
 
				+}
			
 
				+#time, #size, #content,#excavated_time{
			
 
				+    margin-top: 8px;
			
 
				+}
			
 
				+#content p {
			
 
				+    text-indent:2em;
			
 
				+}
			
 
				+@media screen and (max-width: 600px) {
			
 
				+     #introductionWrap {
			
 
				+        width:70%;
			
 
				+        height:60%;
			
 
				+        overflow-y:scroll;
			
 
				+        position:absolute;
			
 
				+        margin:0 auto;
			
 
				+        top:10%;
			
 
				+        font-size:14px;
			
 
				+        line-height: 20px;
			
 
				+        display:none;
			
 
				+    }
			
 
				+    #time, #size, #content,#excavated_time {
			
 
				+        margin-top:4px;
			
 
				+    }
			
 
				+    #content {
			
 
				+       
			
 
				+    }
			
 
				+    #name {
			
 
				+        font-weight:bold;
			
 
				+    }
			
 
				+    #iconAction {
			
 
				+        position:absolute;
			
 
				+        z-index:99;
			
 
				+    }
			
 
				+    .iconMenu {
			
 
				+        width:60px;
			
 
				+        right:10px;
			
 
				+    }
			
 
				+    .iconMenu img {
			
 
				+        width:50%;
			
 
				+    }
			
 
				+    .iconHome {
			
 
				+
			
 
				+    }
			
 
				+    .iconInfo {
			
 
				+        top:90px;
			
 
				+    }
			
 
				+    .iconMenu span {
			
 
				+        font-size:10px;
			
 
				+    }
			
 
				+    #iconWrap {
			
 
				+        width:50%;
			
 
				+        z-index:2;
			
 
				+
			
 
				+    }
			
 
				+    #iconLeft,#iconRight {
			
 
				+        width:30px;
			
 
				+        height:30px;
			
 
				+    }
			
 
				+    #companyText{
			
 
				+        font-size:13px;
			
 
				+    }
			
 
				+}
			
 
				+@media only screen and (max-height:480px) {
			
 
				+    .center img, .center-first img {
			
 
				+        width: 52vw;
			
 
				+        max-width: 250px;
			
 
				+        max-height: 110px;
			
 
				+    }
			
 
				+    .center:nth-child(8) img {
			
 
				+        width: 30vw;
			
 
				+        max-width: 153px;
			
 
				+        max-height: 127px;
			
 
				+    }
			
 
				+    .center:nth-child(17) img {
			
 
				+        width: 30vw;
			
 
				+        max-width: 165px;
			
 
				+        max-height: 176px;
			
 
				+    }
			
 
				+   
			
 
				+}
			
 
				+.animated {
			
 
				+    -webkit-animation-duration:1s;
			
 
				+    animation-duration:1s;
			
 
				+    -webkit-animation-fill-mode:both;
			
 
				+    animation-fill-mode:both
			
 
				+}
			
 
				+@-webkit-keyframes fadeInRight {
			
 
				+    0% {
			
 
				+        opacity:0;
			
 
				+        -webkit-transform:translate3d(100%, 0, 0);
			
 
				+        transform:translate3d(100%, 0, 0)
			
 
				+    }
			
 
				+    to {
			
 
				+        opacity:1;
			
 
				+        -webkit-transform:translateZ(0);
			
 
				+        transform:translateZ(0)
			
 
				+    }
			
 
				+}
			
 
				+@keyframes fadeInRight {
			
 
				+    0% {
			
 
				+        opacity:0;
			
 
				+        -webkit-transform:translate3d(100%, 0, 0);
			
 
				+        transform:translate3d(100%, 0, 0)
			
 
				+    }
			
 
				+    to {
			
 
				+        opacity:1;
			
 
				+        -webkit-transform:translateZ(0);
			
 
				+        transform:translateZ(0)
			
 
				+    }
			
 
				+}
			
 
				+.fadeInRight {
			
 
				+    -webkit-animation-name:fadeInRight;
			
 
				+    animation-name:fadeInRight
			
 
				+}
			
 
				+
			
 
				+@-webkit-keyframes fadeOutRight {
			
 
				+    0% {
			
 
				+        opacity:1
			
 
				+    }
			
 
				+    to {
			
 
				+        opacity:0;
			
 
				+        -webkit-transform:translate3d(100%, 0, 0);
			
 
				+        transform:translate3d(100%, 0, 0)
			
 
				+    }
			
 
				+}
			
 
				+@keyframes fadeOutRight {
			
 
				+    0% {
			
 
				+        opacity:1
			
 
				+    }
			
 
				+    to {
			
 
				+        opacity:0;
			
 
				+        -webkit-transform:translate3d(100%, 0, 0);
			
 
				+        transform:translate3d(100%, 0, 0)
			
 
				+    }
			
 
				+}
			
 
				+.fadeOutRight {
			
 
				+    -webkit-animation-name:fadeOutRight;
			
 
				+    animation-name:fadeOutRight
			
 
				+}
			
 
				+
			
 
				+@-webkit-keyframes fadeOut {
			
 
				+    0% {
			
 
				+        opacity:1
			
 
				+    }
			
 
				+    to {
			
 
				+        opacity:0
			
 
				+    }
			
 
				+}
			
 
				+@keyframes fadeOut {
			
 
				+    0% {
			
 
				+        opacity:1
			
 
				+    }
			
 
				+    to {
			
 
				+        opacity:0
			
 
				+    }
			
 
				+}
			
 
				+.fadeOut {
			
 
				+    -webkit-animation-name:fadeOut;
			
 
				+    animation-name:fadeOut;
			
 
				+    -webkit-animation-duration:2s;
			
 
				+    animation-duration: 2s;
			
 
				+}
			
--- a/css/main.css
+++ b/css/main.css
@@ -0,0 +1,156 @@
 
				+body {
			
 
				+    background: #dddada;
			
 
				+    font-family: '微软雅黑';
			
 
				+}
			
 
				+
			
 
				+.containers {
			
 
				+    width: 1080px;
			
 
				+    /* overflow: hidden; */
			
 
				+    min-height: 80vh;
			
 
				+    margin: 0 auto;
			
 
				+}
			
 
				+
			
 
				+.con-title {
			
 
				+    font-size: 24px;
			
 
				+    background: #f9fafc;
			
 
				+    text-align: center;
			
 
				+    font-weight: bold;
			
 
				+    padding-top: 40px;
			
 
				+}
			
 
				+
			
 
				+.con {
			
 
				+    /* width: 100%; */
			
 
				+    height: auto;
			
 
				+    overflow: hidden;
			
 
				+    background: #f9fafc;
			
 
				+    margin: 0 auto 0;
			
 
				+    display: flex;
			
 
				+    flex-wrap: wrap;
			
 
				+    padding: 20px 2%;
			
 
				+    justify-content: center;
			
 
				+}
			
 
				+
			
 
				+.con li {
			
 
				+    text-align: center;
			
 
				+    width: 30%;
			
 
				+    display: inline-block;
			
 
				+    margin: 25px 10px;
			
 
				+}
			
 
				+
			
 
				+.case {
			
 
				+    padding: 10px;
			
 
				+    background: #fff;
			
 
				+    border-radius: 10px;
			
 
				+    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
			
 
				+    transition: all 0.3s;
			
 
				+}
			
 
				+
			
 
				+.case:hover {
			
 
				+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.6);
			
 
				+    transform: translateY(-15px);
			
 
				+}
			
 
				+
			
 
				+.case .card-img {
			
 
				+    width: 100%;
			
 
				+    height: 180px;
			
 
				+    background-repeat: no-repeat;
			
 
				+    background-size: cover;
			
 
				+    background-position: top center;
			
 
				+}
			
 
				+
			
 
				+.con li p {
			
 
				+    margin-top: 10px;
			
 
				+    font-size: 18px;
			
 
				+    font-weight: 100;
			
 
				+}
			
 
				+
			
 
				+.link-a {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    display: inline-block;
			
 
				+}
			
 
				+
			
 
				+#introductionWrap{
			
 
				+    position: absolute;
			
 
				+    z-index: 1;
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+    right: 20px;
			
 
				+    text-align: right;
			
 
				+    top: 20px;
			
 
				+    font-size: 18px;
			
 
				+    color: #ffffff;
			
 
				+    font-weight: 100;
			
 
				+    line-height: 30px;
			
 
				+    letter-spacing: 2px;
			
 
				+}
			
 
				+#companyText{
			
 
				+    position: absolute;
			
 
				+    z-index: 1;
			
 
				+    font-size: 16px;
			
 
				+    color:rgb(153, 153, 153);
			
 
				+    font-weight: 100;
			
 
				+    left: 50%;
			
 
				+    transform: translateX(-50%);
			
 
				+    bottom: 20px;
			
 
				+    letter-spacing: 1px;
			
 
				+    text-shadow:rgb(51, 51, 51) 0px 1px 1px;
			
 
				+}
			
 
				+@media screen and (max-width: 600px) {
			
 
				+    .containers {
			
 
				+        width: 100%;
			
 
				+    }
			
 
				+    .con {
			
 
				+        padding: 0;
			
 
				+    }
			
 
				+    .case .card-img {
			
 
				+        background-size: auto 100%;
			
 
				+        height: 90px;
			
 
				+    }
			
 
				+    .con li {
			
 
				+        width: 44%;
			
 
				+    }
			
 
				+    #introductionWrap{
			
 
				+        position: absolute;
			
 
				+        z-index: 1;
			
 
				+        display: flex;
			
 
				+        flex-direction: column;
			
 
				+        right: 10px;
			
 
				+        text-align: right;
			
 
				+        top: 16px;
			
 
				+        font-size: 16px;
			
 
				+        color: #ffffff;
			
 
				+        font-weight: 100;
			
 
				+        line-height: 28px;
			
 
				+        letter-spacing: 1px;
			
 
				+    }
			
 
				+    /* .con li p {
			
 
				+        font-size: 16px;
			
 
				+    } */
			
 
				+}
			
 
				+
			
 
				+.hide{
			
 
				+    display: none;
			
 
				+}
			
 
				+
			
 
				+#companyText{
			
 
				+    position: absolute;
			
 
				+    z-index: 1;
			
 
				+    font-size: 16px;
			
 
				+    font-weight: 100;
			
 
				+    left: 50%;
			
 
				+    transform: translateX(-50%);
			
 
				+    bottom: 20px;
			
 
				+    letter-spacing: 1px;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+@media screen and (max-width: 320px) {
			
 
				+    .con li {
			
 
				+        width: 43%;
			
 
				+    }
			
 
				+    .con li p {
			
 
				+        font-size: 16px;
			
 
				+        font-weight: 100;
			
 
				+    }
			
 
				+}
			
--- a/css/reset.css
+++ b/css/reset.css
@@ -0,0 +1,59 @@
 
				+/* http://meyerweb.com/eric/tools/css/reset/ 
			
 
				+   v2.0 | 20110126
			
 
				+   License: none (public domain)
			
 
				+*/
			
 
				+
			
 
				+html, body, div, span, applet, object, iframe,
			
 
				+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
			
 
				+a, abbr, acronym, address, big, cite, code,
			
 
				+del, dfn, em, img, ins, kbd, q, s, samp,
			
 
				+small, strike, strong, sub, sup, tt, var,
			
 
				+b, u, i, center,
			
 
				+dl, dt, dd, ol, ul, li,
			
 
				+fieldset, form, label, legend,
			
 
				+table, caption, tbody, tfoot, thead, tr, th, td,
			
 
				+article, aside, canvas, details, embed, 
			
 
				+figure, figcaption, footer, header, hgroup, 
			
 
				+menu, nav, output, ruby, section, summary,
			
 
				+time, mark, audio, video {
			
 
				+	margin: 0;
			
 
				+	padding: 0;
			
 
				+	border: 0;
			
 
				+	font-size: 100%;
			
 
				+	font: inherit;
			
 
				+	vertical-align: baseline;
			
 
				+}
			
 
				+/* HTML5 display-role reset for older browsers */
			
 
				+article, aside, details, figcaption, figure, 
			
 
				+footer, header, hgroup, menu, nav, section, main {
			
 
				+	display: block;
			
 
				+}
			
 
				+a{
			
 
				+  text-decoration: none;
			
 
				+  color: #000;
			
 
				+}
			
 
				+body {
			
 
				+	line-height: 1;
			
 
				+}
			
 
				+ol, ul {
			
 
				+	list-style: none;
			
 
				+}
			
 
				+blockquote, q {
			
 
				+	quotes: none;
			
 
				+}
			
 
				+blockquote:before, blockquote:after,
			
 
				+q:before, q:after {
			
 
				+	content: '';
			
 
				+	content: none;
			
 
				+}
			
 
				+table {
			
 
				+	border-collapse: collapse;
			
 
				+	border-spacing: 0;
			
 
				+}
			
 
				+button{outline:none;}
			
 
				+input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
			
 
				+        -webkit-appearance:textfield;
			
 
				+}
			
 
				+input[type="number"]{
			
 
				+        -moz-appearance:textfield;
			
 
				+}
			
--- a/css/wx.css
+++ b/css/wx.css
@@ -0,0 +1,272 @@
 
				+html, body {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    font-family: PingFangSC-Regular, sans-serif;
			
 
				+}
			
 
				+* {
			
 
				+    margin:0;
			
 
				+    padding:0;
			
 
				+    list-style-type:none;
			
 
				+    box-sizing:border-box
			
 
				+}
			
 
				+html, body, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, ul, ol, li, p, blockquote, pre, hr, figure, table, caption, th, td, form, fieldset, legend, input, button, textarea, menu {
			
 
				+    margin: 0;
			
 
				+    padding: 0;
			
 
				+}
			
 
				+img {
			
 
				+    max-width:100%;
			
 
				+}
			
 
				+/* ::-webkit-scrollbar {
			
 
				+    display: none;
			
 
				+} */
			
 
				+.flexs {
			
 
				+    display:flex;
			
 
				+    justify-content: space-between;
			
 
				+    align-items:center;
			
 
				+}
			
 
				+.flex {
			
 
				+    display:flex;
			
 
				+    justify-content: center;
			
 
				+    align-items:center;
			
 
				+}
			
 
				+iframe {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+}
			
 
				+#ui {
			
 
				+    position: absolute;
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    align-items: center;
			
 
				+    flex-direction: column;
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    /* color: #494949; */
			
 
				+    letter-spacing: 3px;
			
 
				+}
			
 
				+.antique-name {
			
 
				+    font-size:20px;
			
 
				+    text-align:center;
			
 
				+    color:#fff;
			
 
				+    width:70%;
			
 
				+    margin:21vw auto 0;
			
 
				+}
			
 
				+.comment_wrapper {
			
 
				+    position:relative;
			
 
				+    z-index:9999;
			
 
				+    width:83vw;
			
 
				+    margin:0 auto;
			
 
				+    display:none;
			
 
				+}
			
 
				+.introductionWrap {
			
 
				+    width:100%;
			
 
				+    background:#1d1d1d;
			
 
				+    height:28vw;   
			
 
				+    font-size:12px;
			
 
				+    color:#ffffffba;
			
 
				+    padding:4vw;
			
 
				+
			
 
				+}
			
 
				+.introductionWrap .introduction {
			
 
				+    overflow:scroll;
			
 
				+    height: 100%;
			
 
				+}
			
 
				+.bg-audio {
			
 
				+    display:block;
			
 
				+    position:absolute;
			
 
				+    z-index:2;
			
 
				+    top:8.5vw;
			
 
				+    right:7.4vw;
			
 
				+    width:7.4vw;
			
 
				+    height:7.4vw;
			
 
				+    background:url(../images/bgmusic_icon_play.png)center/100% no-repeat;
			
 
				+}
			
 
				+.iconAction {
			
 
				+    position:relative;
			
 
				+    width:100%;
			
 
				+
			
 
				+    
			
 
				+}
			
 
				+.iconAction ul {
			
 
				+    position: relative;
			
 
				+    z-index: 999;
			
 
				+    width:100%;
			
 
				+    padding:0 17.6vw 9vw;
			
 
				+;
			
 
				+}
			
 
				+.iconAction ul li {
			
 
				+    width:12vw;
			
 
				+    text-align:center;
			
 
				+    cursor:pointer;
			
 
				+}
			
 
				+.iconAction ul li i{
			
 
				+    display:block;
			
 
				+    width:9vw;
			
 
				+    height:9vw;
			
 
				+    width:12vw;
			
 
				+    margin:0 auto;
			
 
				+}
			
 
				+/* .iconAction ul li i.explain_icon{
			
 
				+    background:url(../images/explain_icon.png)center/100% no-repeat;
			
 
				+}
			
 
				+.iconAction ul li i.explain_icon2{
			
 
				+    background:url(../images/explain_icon2.png)center/100% no-repeat;
			
 
				+} */
			
 
				+#explain.active p{
			
 
				+    color:#9a2e2c;
			
 
				+}
			
 
				+#explain .explain_icon {
			
 
				+    background:url(../images/explain_icon.png)center/100% no-repeat;
			
 
				+}
			
 
				+#explain.active .explain_icon {
			
 
				+    background:url(../images/explain_icon2.png)center/100% no-repeat;
			
 
				+}
			
 
				+.iconAction ul li i.comment_icon{
			
 
				+    background:url(../images/comment_icon.png)center/100% no-repeat;
			
 
				+}
			
 
				+#favorite .favorite_icon {
			
 
				+    background:url(../images/favorite_icon1.png)center/100% no-repeat;
			
 
				+}
			
 
				+#favorite.active p {
			
 
				+    color:#9a2e2c;
			
 
				+}
			
 
				+#favorite.active .favorite_icon {
			
 
				+    background:url(../images/favorite_icon2.png)center/100% no-repeat;
			
 
				+    
			
 
				+}
			
 
				+/* .iconAction ul li i.favorite_icon1{
			
 
				+    background:url(../images/favorite_icon1.png)center/100% no-repeat;
			
 
				+}
			
 
				+.iconAction ul li i.favorite_icon2{
			
 
				+    background:url(../images/favorite_icon2.png)center/100% no-repeat;
			
 
				+} */
			
 
				+.iconAction ul li p {
			
 
				+    font-size:16px;
			
 
				+    color:#fff;
			
 
				+}
			
 
				+.info_voice {
			
 
				+    margin:0 auto;
			
 
				+    text-align:center;    
			
 
				+}
			
 
				+.audio_controls .icon_play {
			
 
				+    display:inline-block;
			
 
				+    width:3.4vw;
			
 
				+    margin-right:5px;
			
 
				+}
			
 
				+.audio_controls .progress {
			
 
				+    position:relative;
			
 
				+    display:inline-block;
			
 
				+    width:60vw;
			
 
				+    background:#fff;
			
 
				+    height:2px;
			
 
				+}
			
 
				+.audio_controls .progress i {
			
 
				+    position:absolute;
			
 
				+    top:-3px;
			
 
				+    left:0;
			
 
				+    display:inline-block;
			
 
				+    width:8px;
			
 
				+    height:8px;
			
 
				+    background:#fff;
			
 
				+    border-radius:4px;
			
 
				+    -webkit-border-radius:4px;
			
 
				+}
			
 
				+.audio_controls .audio_time {
			
 
				+    font-size:10px;
			
 
				+    color:#fff;
			
 
				+    margin-left:5px;
			
 
				+}
			
 
				+/* audio::-webkit-media-controls-panel {
			
 
				+    background:rgba(255,255,255,1);
			
 
				+}
			
 
				+audio::-webkit-media-controls-mute-button {}
			
 
				+audio::-webkit-media-controls-play-button {}
			
 
				+audio::-webkit-media-controls-timeline-container {
			
 
				+    background:none;
			
 
				+}
			
 
				+audio::-webkit-media-controls-current-time-display {}
			
 
				+audio::-webkit-media-controls-time-remaining-display {}
			
 
				+audio::-webkit-media-controls-timeline {}
			
 
				+audio::-webkit-media-controls-volume-slider-container {
			
 
				+    background:none;
			
 
				+}
			
 
				+audio::-webkit-media-controls-volume-slider {}
			
 
				+audio::-webkit-media-controls-seek-back-button {}
			
 
				+audio::-webkit-media-controls-seek-forward-button {}
			
 
				+audio::-webkit-media-controls-fullscreen-button {}
			
 
				+audio::-webkit-media-controls-rewind-button {}
			
 
				+audio::-webkit-media-controls-return-to-realtime-button {}
			
 
				+audio::-webkit-media-controls-toggle-closed-captions-button {} */
			
 
				+.animated {
			
 
				+    -webkit-animation-duration:1s;
			
 
				+    animation-duration:1s;
			
 
				+    -webkit-animation-fill-mode:both;
			
 
				+    animation-fill-mode:both
			
 
				+}
			
 
				+@-webkit-keyframes fadeInBottom {
			
 
				+    0% {
			
 
				+        opacity:0;
			
 
				+        -webkit-transform:translate3d(0, 100%, 0);
			
 
				+        transform:translate3d(0, 100%, 0)
			
 
				+    }
			
 
				+    to {
			
 
				+        opacity:1;
			
 
				+        -webkit-transform:translateZ(0);
			
 
				+        transform:translateZ(0)
			
 
				+    }
			
 
				+}
			
 
				+@keyframes fadeInBottom {
			
 
				+    0% {
			
 
				+        opacity:0;
			
 
				+        -webkit-transform:translate3d(0, 100%, 0);
			
 
				+        transform:translate3d(0, 100%, 0)
			
 
				+    }
			
 
				+    to {
			
 
				+        opacity:1;
			
 
				+        -webkit-transform:translateZ(0);
			
 
				+        transform:translateZ(0)
			
 
				+    }
			
 
				+}
			
 
				+.fadeInBottom {
			
 
				+    -webkit-animation-name:fadeInBottom;
			
 
				+    animation-name:fadeInBottom
			
 
				+}
			
 
				+
			
 
				+@-webkit-keyframes fadeOutBottom {
			
 
				+    0% {
			
 
				+        opacity:1
			
 
				+    }
			
 
				+    to {
			
 
				+        opacity:0;
			
 
				+        -webkit-transform:translate3d(0, 100%, 0);
			
 
				+        transform:translate3d(0, 100%, 0)
			
 
				+    }
			
 
				+}
			
 
				+@keyframes fadeOutBottom {
			
 
				+    0% {
			
 
				+        opacity:1
			
 
				+    }
			
 
				+    to {
			
 
				+        opacity:0;
			
 
				+        -webkit-transform:translate3d(0, 100%, 0);
			
 
				+        transform:translate3d(0, 100%, 0)
			
 
				+    }
			
 
				+}
			
 
				+.fadeOutBottom {
			
 
				+    -webkit-animation-name:fadeOutBottom;
			
 
				+    animation-name:fadeOutBottom
			
 
				+}
			
 
				+
			
 
				+.musicRotate {
			
 
				+    -webkit-animation: musicRotate 5s linear infinite;
			
 
				+    animation: musicRotate 5s linear infinite;
			
 
				+} 
			
 
				+@keyframes musicRotate {
			
 
				+    from {
			
 
				+        transform: rotate(0deg);
			
 
				+      }
			
 
				+      to {
			
 
				+        transform: rotate(360deg);
			
 
				+        transition: all 5s;
			
 
				+      }
			
 
				+}
			
--- a/images/ZZGX01.jpg
+++ b/images/ZZGX01.jpg
--- a/images/ZZGX02.jpg
+++ b/images/ZZGX02.jpg
--- a/images/ZZGX03.jpg
+++ b/images/ZZGX03.jpg
--- a/images/ZZGX04.jpg
+++ b/images/ZZGX04.jpg
--- a/images/ZZGX05.jpg
+++ b/images/ZZGX05.jpg
--- a/images/ZZGX06.jpg
+++ b/images/ZZGX06.jpg
--- a/images/ZZGX07.jpg
+++ b/images/ZZGX07.jpg
--- a/images/ZZGX08.jpg
+++ b/images/ZZGX08.jpg
--- a/images/ZZGX09.jpg
+++ b/images/ZZGX09.jpg
--- a/images/ZZGX10.jpg
+++ b/images/ZZGX10.jpg
--- a/images/ZZGX11.jpg
+++ b/images/ZZGX11.jpg
--- a/images/ZZGX14.jpg
+++ b/images/ZZGX14.jpg
--- a/images/ZZGX15.jpg
+++ b/images/ZZGX15.jpg
--- a/images/ZZGX16.jpg
+++ b/images/ZZGX16.jpg
--- a/images/ZZGX17.jpg
+++ b/images/ZZGX17.jpg
--- a/images/ZZGX18.jpg
+++ b/images/ZZGX18.jpg
--- a/images/bgmusic-play-icon.png
+++ b/images/bgmusic-play-icon.png
--- a/images/icon_home.png
+++ b/images/icon_home.png
--- a/images/icon_info.png
+++ b/images/icon_info.png
--- a/images/icon_left.png
+++ b/images/icon_left.png
--- a/images/icon_right.png
+++ b/images/icon_right.png
--- a/images/play.png
+++ b/images/play.png
--- a/index.html
+++ b/index.html
@@ -0,0 +1,45 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
			
 
				+    <link rel=icon type=image/png sizes=32x32 href='./images/favicon.png' class=keep>
			
 
				+    <link rel="stylesheet" href="./css/reset.css">
			
 
				+    <link rel="stylesheet" href="./css/main.css">
			
 
				+    <title>郑州信息工程学院文物</title>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <div class="containers">
			
 
				+        <p class="con-title">郑州信息工程学院文物</p>
			
 
				+        <ul class="con">
			
 
				+            <!-- <li>
			
 
				+                <div class="case">
			
 
				+                    <a class="link-a" href="Model.html?m=YL01&v=1">
			
 
				+                        <div class="card-img" style="background-image: url(images/YL01.jpg)">
			
 
				+                        </div>
			
 
				+                    </a>
			
 
				+                </div>
			
 
				+                <p>鸡娄鼓</p>
			
 
				+            </li> -->
			
 
				+        </ul>
			
 
				+    </div>
			
 
				+    <script>
			
 
				+        let yp_num = []
			
 
				+        let notIn = [12,13]
			
 
				+            for (let i = 0; i < 18; i++) {
			
 
				+                if (!notIn.includes(i+1)) {
			
 
				+                    yp_num.push('ZZGX'+String(i+1).padStart(2,'0'))
			
 
				+                }
			
 
				+            }
			
 
				+    </script>
			
 
				+    <script src="js/jquery.js"></script>
			
 
				+    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
			
 
				+    <script src="js/weixin.js"></script>
			
 
				+    <script src="js/info.js"></script>
			
 
				+    <script src="js/ui.js"></script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/js/4dage.js
+++ b/js/4dage.js
--- a/js/browser.min.js
+++ b/js/browser.min.js
--- a/js/data.js
+++ b/js/data.js
@@ -0,0 +1,152 @@
 
				+const objNames = {
			
 
				+    'YL01': {
			
 
				+        name: '鸡娄鼓',
			
 
				+        content: '高:30厘米<br>宽:20厘米'
			
 
				+    },
			
 
				+    'YL02': {
			
 
				+        name: '鞉牢鼓',
			
 
				+        content: '高:60厘米<br>直径:20厘米'
			
 
				+    },
			
 
				+    'YL03': {
			
 
				+        name: '毛员鼓',
			
 
				+        content: '高:61厘米<br>直径:20厘米'
			
 
				+    },
			
 
				+    'YL04': {
			
 
				+        name: '和鼓',
			
 
				+        content: '高:50厘米<br>直径:30厘米'
			
 
				+    },
			
 
				+    'YL05': {
			
 
				+        name: '答腊鼓',
			
 
				+        content: '高:24厘米<br>直径:28厘米'
			
 
				+    },
			
 
				+    'YL06': {
			
 
				+        name: '正鼓',
			
 
				+        content: '高:71厘米<br>直径:30厘米'
			
 
				+    },
			
 
				+    'YL07': {
			
 
				+        name: '齐鼓',
			
 
				+        content: '高:71厘米<br>直径:30厘米'
			
 
				+    },
			
 
				+    'YL08': {
			
 
				+        name: '羯鼓',
			
 
				+        content: '高:50厘米<br>直径:38厘米'
			
 
				+    },
			
 
				+    'YL09': {
			
 
				+        name: '拍板',
			
 
				+        content: '高:37厘米<br>宽:6厘米'
			
 
				+    },
			
 
				+    'YL10': {
			
 
				+        name: '钹',
			
 
				+        content: '直径:30厘米'
			
 
				+    },
			
 
				+    'YL11': {
			
 
				+        name: '篪',
			
 
				+        content: '长65厘米'
			
 
				+    },
			
 
				+    'YL12': {
			
 
				+        name: '筚篥',
			
 
				+        content: '长35厘米'
			
 
				+    },
			
 
				+    'YL13': {
			
 
				+        name: '短笛',
			
 
				+        content: '长:48厘米<br>直径:2.8厘米'
			
 
				+    },
			
 
				+    'YL14': {
			
 
				+        name: '长笛',
			
 
				+        content: '长:65厘米<br>直径:2.8厘米'
			
 
				+    },
			
 
				+    'YL15': {
			
 
				+        name: '尺八',
			
 
				+        content: '长:70厘米<br>直径:2.8厘米'
			
 
				+    },
			
 
				+    'YL16': {
			
 
				+        name: '箫',
			
 
				+        content: '长:70厘米<br>直径:2.8厘米'
			
 
				+    },
			
 
				+    'YL17': {
			
 
				+        name: '排箫',
			
 
				+        content: '长:45厘米<br>宽:40厘米'
			
 
				+    },
			
 
				+    'YL18': {
			
 
				+        name: '双翼排箫',
			
 
				+        content: '长:55厘米<br>宽:55厘米'
			
 
				+    },
			
 
				+    'YL19': {
			
 
				+        name: '笙',
			
 
				+        content: '长:48.3厘米<br>直径:9.6厘米<br>宽:26厘米'
			
 
				+    },
			
 
				+    'YL20': {
			
 
				+        name: '吹叶',
			
 
				+        content: '正常一片树叶大小'
			
 
				+    },
			
 
				+    'YL21': {
			
 
				+        name: '螺贝',
			
 
				+        content: '长:27厘米<br>宽:15厘米'
			
 
				+    },
			
 
				+    'YL22': {
			
 
				+        name: '箜篌',
			
 
				+        content: '长:115厘米<br>宽:64厘米<br>高:11厘米'
			
 
				+    },
			
 
				+    'YL23': {
			
 
				+        name: '阮',
			
 
				+        content: '长:120厘米<br>宽:48厘米<br>高:18厘米'
			
 
				+    },
			
 
				+    'YL24': {
			
 
				+        name: '五弦琵琶',
			
 
				+        content: '长:113厘米<br>宽:30厘米<br>高:9厘米'
			
 
				+    },
			
 
				+    'YL25': {
			
 
				+        name: '周后石像',
			
 
				+    },
			
 
				+    'YL26': {
			
 
				+        name: '抬棺武士石像',
			
 
				+    },
			
 
				+    'YL27': {
			
 
				+        name: '抬棺武士石像',
			
 
				+    },
			
 
				+    'YL28': {
			
 
				+        name: '四弦琵琶',
			
 
				+        content: '长:113厘米<br>宽:30厘米<br>高:9厘米'
			
 
				+    },
			
 
				+    'YL29': {
			
 
				+        name: '筝',
			
 
				+        content: '长:165厘米<br>宽:18厘米'
			
 
				+    },
			
 
				+    'YL30': {
			
 
				+        name: '地宫薄形砖',
			
 
				+    },
			
 
				+    'YL31': {
			
 
				+        name: '地宫方形砖',
			
 
				+    },
			
 
				+    'YL32': {
			
 
				+        name: '地宫小方砖',
			
 
				+    },
			
 
				+    'YL33': {
			
 
				+        name: '地宫楔形石',
			
 
				+    },
			
 
				+    'YL34': {
			
 
				+        name: '地宫楔形砖',
			
 
				+    },
			
 
				+    'YL35': {
			
 
				+        name: '唐邛窑绿釉省油灯',
			
 
				+    },
			
 
				+    'YL36': {
			
 
				+        name: '“东川”铭文地宫方形砖',
			
 
				+    },
			
 
				+    'YL37': {
			
 
				+        name: '“金水”铭文地宫方形砖',
			
 
				+    },
			
 
				+    'YL38': {
			
 
				+        name: '王建石像',
			
 
				+    },
			
 
				+};
			
 
				+
			
 
				+(function () {
			
 
				+    var m = getQueryVariable('m');
			
 
				+    var objName = objNames[m]['name']? objNames[m]['name'] : '';
			
 
				+    var content = objNames[m]['content'];
			
 
				+    var objNameElem = document.querySelector('#name');
			
 
				+    objNameElem.innerHTML = objName;
			
 
				+    var contentElem = document.querySelector('#content');
			
 
				+    content && (contentElem.innerHTML = content)
			
 
				+})()
			
--- a/js/info.js
+++ b/js/info.js
@@ -0,0 +1,19 @@
 
				+
			
 
				+
			
 
				+let modelInfos = {
			
 
				+}
			
 
				+
			
 
				+yp_num.forEach(item=>{
			
 
				+  modelInfos[item]={
			
 
				+    name: ``,
			
 
				+    time: ``,
			
 
				+    size: ``,
			
 
				+    texture:``,
			
 
				+    level: ``,
			
 
				+    num:'',
			
 
				+    keep:``,
			
 
				+    unit: `郑州信息工程学院文物`,
			
 
				+    voice: '',
			
 
				+    content: []
			
 
				+  }
			
 
				+})
			
--- a/js/jquery.js
+++ b/js/jquery.js
--- a/js/model.js
+++ b/js/model.js
@@ -0,0 +1,84 @@
 
				+(function () {    
			
 
				+    let v = getQueryVariable('v');
			
 
				+    let m = getQueryVariable('m');
			
 
				+    let objData = modelInfos[m];
			
 
				+    let name = document.querySelector('#name');
			
 
				+    let time = document.querySelector('#time');
			
 
				+    let size = document.querySelector('#size');
			
 
				+    let texture = document.querySelector('#texture');
			
 
				+    let keep = document.querySelector('#keep');
			
 
				+    let num = document.querySelector('#num');
			
 
				+    /* let excavated_time = document.querySelector('#excavated_time'); */
			
 
				+    let level = document.querySelector('#level');
			
 
				+    let unit = document.querySelector('#unit');
			
 
				+   /*  let content = document.querySelector('#content');
			
 
				+    let audio = document.querySelector('#audio'); */
			
 
				+
			
 
				+
			
 
				+    name.innerHTML = objData.name;
			
 
				+    time.innerHTML = "年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;代：" + objData.time;
			
 
				+    size.innerHTML = "尺&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;寸：" + objData.size;
			
 
				+    texture.innerHTML = "质&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地：" + objData.texture;
			
 
				+    keep.innerHTML = "保存现状：" + objData.keep;
			
 
				+    num.innerHTML = "数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量：" + objData.num;
			
 
				+   /*  excavated_time.innerHTML = "来&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;源：" + objData.excavated_time; */
			
 
				+    level.innerHTML = "级&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：" + objData.level;
			
 
				+    unit.innerHTML = "收藏单位：" + objData.unit;
			
 
				+    /* objData.content.forEach(function(v){
			
 
				+        var p = document.createElement('p');
			
 
				+        p.innerHTML = v ;
			
 
				+        content.appendChild(p);
			
 
				+    }) */
			
 
				+    /* let baseUrl = './voices/';
			
 
				+    audio.src = baseUrl + objData.voice +'.mp3'; */
			
 
				+    //音频自动播放
			
 
				+    function autoPlayAudio() {
			
 
				+        wx.config({
			
 
				+            // 配置信息, 即使不正确也能使用 wx.ready
			
 
				+            debug: false,
			
 
				+            appId: '',
			
 
				+            timestamp: 1,
			
 
				+            nonceStr: '',
			
 
				+            signature: '',
			
 
				+            jsApiList: []
			
 
				+        });
			
 
				+        wx.ready(function() {
			
 
				+            audio.play();
			
 
				+        });
			
 
				+        document.addEventListener("WeixinJSBridgeReady", function () {  
			
 
				+            audio.play();  
			
 
				+        }, false); 
			
 
				+        document.addEventListener('touchstart', function(){
			
 
				+            audio.play();
			
 
				+            document.removeEventListener('touchstart',arguments.callee);//严格模式下无法适用
			
 
				+        }, false); 
			
 
				+    }
			
 
				+   /*  autoPlayAudio(); */
			
 
				+    $(".bg-audio").click(function(){
			
 
				+        console.log(audio.paused);
			
 
				+        if(audio.paused){
			
 
				+            $(".bg-audio").css('background','url(images/bgmusic-play-icon.png)center/100% no-repeat');
			
 
				+            audio.play();
			
 
				+        }else {
			
 
				+            audio.pause();
			
 
				+            console.log(audio.paused)
			
 
				+            $(".bg-audio").css('background','url(images/bgmusic-close-icon.png)center/100% no-repeat')
			
 
				+        }
			
 
				+    })
			
 
				+    
			
 
				+   /*  content.innerHTML = objData.content; */
			
 
				+    $("#iconInfo").click(function(){
			
 
				+        console.log("111")
			
 
				+        if($(this).attr("data-info")==0){
			
 
				+            $("#introductionWrap").css("display","flex"); 
			
 
				+            $("#introductionWrap").addClass("fadeInRight");             
			
 
				+             $("#introductionWrap").removeClass("fadeOutRight");            
			
 
				+            $(this).attr("data-info",1);
			
 
				+        }else {
			
 
				+             $("#introductionWrap").addClass("fadeOutRight");             
			
 
				+             $("#introductionWrap").removeClass("fadeInRight");             
			
 
				+             $(this).attr("data-info",0)
			
 
				+        }
			
 
				+        
			
 
				+    })
			
 
				+})()
			
--- a/js/ui.js
+++ b/js/ui.js
@@ -0,0 +1,26 @@
 
				+(function () {
			
 
				+    let fragment = document.createDocumentFragment();
			
 
				+ 
			
 
				+    for (let i=0;i<yp_num.length;i++) {
			
 
				+        let li = document.createElement('li');
			
 
				+            let divWrap = document.createElement('div');
			
 
				+            let a = document.createElement('a');
			
 
				+            let div = document.createElement('div');
			
 
				+            let p = document.createElement("p");
			
 
				+            divWrap.classList.add('case');
			
 
				+            a.classList.add('link-a');
			
 
				+            a.href = `Model.html?m=${yp_num[i]}&v=1`;
			
 
				+            div.classList.add('card-img');
			
 
				+            div.style = `background-image: url(images/${yp_num[i]}.jpg)`;
			
 
				+            let key = yp_num[i];
			
 
				+            p.innerHTML = modelInfos[key].name;
			
 
				+            a.appendChild(div);           
			
 
				+            divWrap.appendChild(a);
			
 
				+            li.appendChild(divWrap);
			
 
				+            li.appendChild(p);
			
 
				+            fragment.appendChild(li);
			
 
				+    }
			
 
				+    let ul = document.querySelector('.con');
			
 
				+    ul.appendChild(fragment);
			
 
				+    
			
 
				+})()
			
--- a/js/weixin.js
+++ b/js/weixin.js
@@ -0,0 +1,131 @@
 
				+var lineLink = window.location.href;
			
 
				+var desc = '点击进入：在线720°鉴赏精品文物';
			
 
				+var projectName = 'DG';
			
 
				+
			
 
				+var getQueryVariable = function(variable){
			
 
				+  var query = window.location.search.substring(1);
			
 
				+  var vars = query.split("&");
			
 
				+  for (var i=0;i<vars.length;i++) {
			
 
				+          var pair = vars[i].split("=");
			
 
				+          if(pair[0] == variable){return pair[1];}
			
 
				+  }
			
 
				+  return(false);
			
 
				+};
			
 
				+
			
 
				+let param = getQueryVariable('m');
			
 
				+// let desc = param?;
			
 
				+
			
 
				+function jssdk() {
			
 
				+	 $.ajax({    
			
 
				+		url:'http://www.4dage.com/wechat/jssdk/share/', 
			
 
				+		type: "post",
			
 
				+		data : {
			
 
				+            'uri' : location.href.split('#')[0],
			
 
				+            'name': '厦门四维时代微信公众号'
			
 
				+		}, 
			
 
				+		dataType:"jsonp",     
			
 
				+		jsonpCallback:"success_jsonp",         
			
 
				+		success:function(data,textStatus){
			
 
				+			wx.config({
			
 
				+				// debug : true,
			
 
				+				appId : data.appId,
			
 
				+				timestamp : data.timestamp,
			
 
				+				nonceStr : data.nonceStr,
			
 
				+				signature : data.signature,
			
 
				+				jsApiList : [ 'checkJsApi', 'onMenuShareTimeline',
			
 
				+						'onMenuShareAppMessage', 'onMenuShareQQ',
			
 
				+						'onMenuShareWeibo', 'hideMenuItems',
			
 
				+						'showMenuItems', 'hideAllNonBaseMenuItem',
			
 
				+						'showAllNonBaseMenuItem', 'translateVoice',
			
 
				+						'startRecord', 'stopRecord', 'onRecordEnd',
			
 
				+						'playVoice', 'pauseVoice', 'stopVoice',
			
 
				+						'uploadVoice', 'downloadVoice', 'chooseImage',
			
 
				+						'previewImage', 'uploadImage', 'downloadImage',
			
 
				+						'getNetworkType', 'openLocation', 'getLocation',
			
 
				+						'hideOptionMenu', 'showOptionMenu', 'closeWindow',
			
 
				+						'scanQRCode', 'chooseWXPay',
			
 
				+						'openProductSpecificView', 'addCard', 'chooseCard',
			
 
				+						'openCard' ]
			
 
				+			});
			
 
				+		},    
			
 
				+		error:function(XMLHttpRequest,textStatus,errorThrown){    
			
 
				+			console.log("jsonp.error:"+textStatus);    
			
 
				+		}    
			
 
				+	 }); 
			
 
				+	
			
 
				+	 var success_jsonp = function(json){
			
 
				+		console.log(json);
			
 
				+	 };
			
 
				+}
			
 
				+
			
 
				+wx.ready(function(){ 
			
 
				+	// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行〿
			
 
				+	//对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中〿
			
 
				+	//分享到朋友圈 
			
 
				+	wx.onMenuShareTimeline({ 
			
 
				+	title: document.querySelector("head title").innerHTML, // 分享标题 
			
 
				+	link: lineLink, // 分享链接 
			
 
				+	imgUrl: 'http://model3d.4dage.com/3D/2018/model/'+projectName+'/images/weixin/'+getQueryVariable("m")+'.jpg', // 分享图标 
			
 
				+	desc: desc
			
 
				+	}); 
			
 
				+
			
 
				+	//获取“分享给朋友”按钮点击状态及自定义分享内容接叿
			
 
				+	wx.onMenuShareAppMessage({ 
			
 
				+        title: '义乌博物馆', // 分享标题 
			
 
				+        desc: param?modelData[param].CN_Name:'',  // 分享描述 
			
 
				+        link: lineLink + '?t=' + new Date().getTime(), // 分享链接 
			
 
				+        // imgUrl: 'http://model3d.4dage.com/3D/2018/model/'+projectName+'/images/weixin/'+getQueryVariable("m")+'.jpg', // 分享图标 
			
 
				+        imgUrl: 'https://model3d.4dage.com/3D/2018/model/sh/images/bg.jpg', // 分享图标 
			
 
				+        type: '', // 分享类型,music、video或link，不填默认为link 
			
 
				+        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空 
			
 
				+        success: function () {
			
 
				+        },
			
 
				+	}); 
			
 
				+});
			
 
				+
			
 
				+wx.onMenuShareWeibo({
			
 
				+	title: document.querySelector("head title").innerHTML, // 分享标题
			
 
				+	desc: desc, // 分享描述
			
 
				+	link: lineLink, // 分享链接
			
 
				+	imgUrl: 'http://model3d.4dage.com/3D/2018/model/'+projectName+'/images/weixin/'+getQueryVariable("m")+'.jpg', // 分享图标
			
 
				+	success: function () { 
			
 
				+	   // 用户确认分享后执行的回调函数
			
 
				+	},
			
 
				+	cancel: function () { 
			
 
				+		// 用户取消分享后执行的回调函数
			
 
				+	}
			
 
				+});
			
 
				+
			
 
				+wx.onMenuShareQZone({
			
 
				+	title: document.querySelector("head title").innerHTML, // 分享标题
			
 
				+	desc: desc, // 分享描述
			
 
				+	link: lineLink, // 分享链接
			
 
				+	imgUrl: 'http://model3d.4dage.com/3D/2018/model/'+projectName+'/images/weixin/'+getQueryVariable("m")+'.jpg', // 分享图标
			
 
				+	success: function () { 
			
 
				+	   // 用户确认分享后执行的回调函数
			
 
				+	},
			
 
				+	cancel: function () { 
			
 
				+		// 用户取消分享后执行的回调函数
			
 
				+	}
			
 
				+});
			
 
				+
			
 
				+wx.onMenuShareQQ({
			
 
				+	title: document.querySelector("head title").innerHTML, // 分享标题
			
 
				+	desc: desc, // 分享描述
			
 
				+	link: lineLink, // 分享链接
			
 
				+	imgUrl: 'http://model3d.4dage.com/3D/2018/model/'+projectName+'/images/weixin/'+getQueryVariable("m")+'.jpg', // 分享图标
			
 
				+	success: function () { 
			
 
				+	   // 用户确认分享后执行的回调函数
			
 
				+	},
			
 
				+	cancel: function () { 
			
 
				+	   // 用户取消分享后执行的回调函数
			
 
				+	}
			
 
				+});
			
 
				+
			
 
				+wx.error(function(res){ 
			
 
				+// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名〿
			
 
				+
			
 
				+});
			
 
				+
			
 
				+jssdk();
			
 
				+