首頁 探索 說明
註冊 登入
chenzimin2
/
ngbwg-ww
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

upup

aamin 1 年之前
當前提交
4487782831
共有 43 個文件被更改，包括 8064 次插入 和 0 次删除
分割檢視 顯示文件統計
  1. 二進制
      4dage/ngs01.4dage
  2. 二進制
      4dage/ngs02.4dage
  3. 二進制
      4dage/ngs03.4dage
  4. 二進制
      4dage/ngs04.4dage
  5. 二進制
      4dage/ngs05.4dage
  6. 二進制
      4dage/ngs06.4dage
  7. 二進制
      4dage/ngs07.4dage
  8. 二進制
      4dage/ngs08.4dage
  9. 二進制
      4dage/ngs09.4dage
  10. 二進制
      4dage/ngs10.4dage
  11. 335 0
      Model.html
  12. 71 0
      Model2.html
  13. 269 0
      Model3.html
  14. 301 0
      css/index.css
  15. 166 0
      css/main.css
  16. 59 0
      css/reset.css
  17. 107 0
      css/wechat.css
  18. 二進制
      fonts/SourceHanSansCN-Regular.otf
  19. 二進制
      images/ngs01.jpg
  20. 二進制
      images/ngs02.jpg
  21. 二進制
      images/ngs03.jpg
  22. 二進制
      images/ngs04.jpg
  23. 二進制
      images/ngs05.jpg
  24. 二進制
      images/ngs06.jpg
  25. 二進制
      images/ngs07.jpg
  26. 二進制
      images/ngs08.jpg
  27. 二進制
      images/ngs09.jpg
  28. 二進制
      images/ngs10.jpg
  29. 二進制
      img/back.png
  30. 二進制
      img/bg.jpg
  31. 二進制
      img/bigBac.png
  32. 二進制
      img/close.png
  33. 二進制
      img/divBac.png
  34. 二進制
      img/favicon.ico
  35. 二進制
      img/logo.png
  36. 二進制
      img/play.png
  37. 二進制
      img/titleBac.png
  38. 87 0
      index.html
  39. 40 0
      info.js
  40. 6504 0
      js/4dage.js
  41. 4 0
      js/jquery.js
  42. 105 0
      js/ui.js
  43. 16 0
      txt.js

二進制
4dage/ngs01.4dage
查看文件


二進制
4dage/ngs02.4dage
查看文件


二進制
4dage/ngs03.4dage
查看文件


二進制
4dage/ngs04.4dage
查看文件


二進制
4dage/ngs05.4dage
查看文件


二進制
4dage/ngs06.4dage
查看文件


二進制
4dage/ngs07.4dage
查看文件


二進制
4dage/ngs08.4dage
查看文件


二進制
4dage/ngs09.4dage
查看文件


二進制
4dage/ngs10.4dage
查看文件


+ 335 - 0
Model.html
查看文件 

@@ -0,0 +1,335 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<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="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
 
+<link rel="stylesheet" href="css/index.css">
 
+<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
 
+
 
+<head>
 
+    <title>-</title>
 
+    <script src="js/4dage.js"></script>
 
+    <script src="./info.js"></script>
 
+    <script>
 
+        document.title = titleInfo
 
+    </script>
 
+    <style>
 
+        html {
 
+            overflow: hidden;
 
+        }
 
+
 
+        .logo {
 
+            display: flex;
 
+            justify-content: center;
 
+            align-items: center;
 
+            z-index: 9999;
 
+            width: 90vw;
 
+            position: absolute;
 
+            left: 50%;
 
+            transform: translateX(-50%);
 
+            bottom: 10px;
 
+            height: 50px;
 
+        }
 
+
 
+        .logo .img {
 
+            background: url('./img/logo.png');
 
+            background-size: 100% 100%;
 
+            max-width: 40vw;
 
+            max-height: 50px;
 
+            height: 40px;
 
+            width: 150px;
 
+        }
 
+
 
+        .logo .logotxt {
 
+            padding-bottom: 5px;
 
+            color: #666;
 
+            border-bottom: 1px solid #666;
 
+        }
 
+
 
+        .back {
 
+            z-index: 998;
 
+            cursor: pointer;
 
+            width: 40px;
 
+            height: 40px;
 
+            position: absolute;
 
+            top: 10px;
 
+            right: 40px;
 
+        }
 
+
 
+        .back img {
 
+            width: 100%;
 
+            height: 100%;
 
+        }
 
+
 
+        .outerImg {
 
+            transition: all 1s;
 
+            opacity: 1;
 
+            position: absolute;
 
+            z-index: 998;
 
+            top: 0;
 
+            left: 0;
 
+            width: 100%;
 
+            height: 100%;
 
+            background-color: #1a1b20;
 
+        }
 
+
 
+        .outerImg img {
 
+            position: absolute;
 
+            width: 100%;
 
+            height: 100%;
 
+            object-fit: cover;
 
+        }
 
+
 
+        /* ---------------按钮和文字介绍------------- */
 
+        body {
 
+            user-select: none;
 
+        }
 
+
 
+
 
+        .topButn {
 
+            opacity: 0;
 
+            pointer-events: none;
 
+            z-index: 999;
 
+            position: absolute;
 
+            top: 50px;
 
+            left: 10px;
 
+        }
 
+
 
+        .topButn div {
 
+            padding: 0 5px;
 
+            margin-bottom: 10px;
 
+            width: 100%;
 
+            height: 40px;
 
+            line-height: 40px;
 
+            border-radius: 20px;
 
+            font-size: 18px;
 
+            color: #fff;
 
+            cursor: pointer;
 
+            text-align: center;
 
+            /* background-color: #f2cd83; */
 
+            background-color: #ccc;
 
+            border-radius: 5px;
 
+        }
 
+
 
+        .con::-webkit-scrollbar {
 
+            /*滚动条整体样式*/
 
+            width: 3px;
 
+            /*高宽分别对应横竖滚动条的尺寸*/
 
+            height: 1px;
 
+        }
 
+
 
+        .con::-webkit-scrollbar-thumb {
 
+            /*滚动条里面小方块*/
 
+            border-radius: 10px;
 
+            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
 
+            background: #f2cd83;
 
+        }
 
+
 
+        .con::-webkit-scrollbar-track {
 
+            /*滚动条里面轨道*/
 
+            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
 
+            border-radius: 10px;
 
+            background: #ededed;
 
+        }
 
+
 
+        @font-face {
 
+            font-family: 'SourceHanSansCN-Regular';
 
+            src: url('./assets/fonts/SourceHanSansCN-Regular.otf');
 
+        }
 
+
 
+        .txtOne {
 
+            opacity: 0;
 
+            pointer-events: none;
 
+
 
+            padding: 30px 15px 30px 30px;
 
+            z-index: 1000;
 
+            position: absolute;
 
+            top: 100px;
 
+            left: 30px;
 
+            /* background-image: url('./img/divBac.png'); */
 
+            /* background-color: rgba(0, 0, 0, .6); */
 
+            background-size: 100% 100%;
 
+            width: 300px;
 
+            height: 500px;
 
+            z-index: 9999;
 
+            color: #333333;
 
+            font-family: 'SourceHanSansCN-Regular';
 
+            line-height: 22px;
 
+        }
 
+
 
+        .txtOne .con {
 
+            text-align: justify;
 
+            padding-right: 28px;
 
+            line-height: 30px;
 
+            margin-bottom: 30px;
 
+            overflow-y: auto;
 
+            height: 100%;
 
+        }
 
+
 
+        .txtOne .con>h3 {
 
+            /* margin-left: -5px; */
 
+            font-size: 24px;
 
+            font-weight: 700;
 
+            margin-bottom: 10px;
 
+
 
+            color: #9D4F0B;
 
+            font-weight: bold;
 
+
 
+        }
 
+
 
+        .txtOne .con>.age {
 
+            /* margin-left: -5px; */
 
+            font-size: 16px;
 
+
 
+            color: #333333;
 
+            font-weight: bold;
 
+
 
+        }
 
+        .txtOne .con>p {
 
+            /* margin-left: -5px; */
 
+            line-height: 26px;
 
+            margin-top: 10px;
 
+
 
+        }
 
+
 
+        .txtOne .con>.size {
 
+            /* margin-left: -5px; */
 
+            font-size: 16px;
 
+
 
+            color: #333333;
 
+            font-weight: bold;
 
+
 
+        }
 
+
 
+
 
+        .txtOne .close {
 
+            cursor: pointer;
 
+            position: absolute;
 
+            right: 24px;
 
+            top: 20px;
 
+            width: 20px;
 
+            height: 20px;
 
+        }
 
+
 
+        .txtOne .close img {
 
+            width: 100%;
 
+            height: 100%;
 
+        }
 
+
 
+        /* 手机端的样式 */
 
+        @media screen and (max-width: 600px) {
 
+            .topButn {
 
+                width: 220px;
 
+                display: flex;
 
+                justify-content: center;
 
+                margin: 0;
 
+                top: 5px;
 
+                left: 50%;
 
+                transform: translateX(-50%);
 
+                pointer-events: auto;
 
+
 
+            }
 
+
 
+            .topButn div {
 
+                width: 90px;
 
+                font-size: 14px;
 
+                background-color: #f2cd83;
 
+            }
 
+
 
+            .txtOne {
 
+                display: none;
 
+                box-sizing: border-box;
 
+                width: 100vw;
 
+                height: 100vh;
 
+                top: 0;
 
+                left: 0;
 
+                transform: translate(0, 0);
 
+                max-height: 100vh;
 
+                color: #fff;
 
+            }
 
+
 
+            .txtOne .con {
 
+                color: #fff;
 
+                height: calc(100vh - 100px);
 
+            }
 
+
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+
 
+    <!-- 新加的按钮 -->
 
+    <div class="topButn">
 
+        <!-- <div class="topButnOne">文物介绍</div> -->
 
+    </div>
 
+    <!-- 专家鉴定意见的文字 -->
 
+    <div class="txtOne">
 
+        <div class="close">
 
+            <!-- <img src="./img/close.png" alt=""> -->
 
+        </div>
 
+        <p class="con"></p>
 
+    </div>
 
+
 
+
 
+    <div class="back" onclick="javascript:history.go(-1);">
 
+        <img src="./img/back.png" alt="">
 
+    </div>
 
+    <div class="logo">
 
+        <div class="img"></div>
 
+        <div class="logotxt"> 提 供 技 术 支 持 </div>
 
+    </div>
 
+    <div class="outerImg">
 
+        <img src="./img/bg.jpg" alt="">
 
+    </div>
 
+    <div id="ui">
 
+    </div>
 
+    <script src="js/jquery.js"></script>
 
+    <script src="./txt.js"></script>
 
+
 
+    <script>
 
+        var number = getQueryVariable("m");
 
+        if (spinInfo) window.autoRotate = true;
 
+        fdage.embed('4dage/' + number + '.4dage', {
 
+            width: 800,
 
+            height: 600,
 
+            autoStart: true,
 
+            fullFrame: true,
 
+            pagePreset: false
 
+        });
 
+        $('.outerImg img').attr('src', `./images/${number}.jpg`)
 
+
 
+
 
+        // 获取文字介绍
 
+        if (txtShow && txtObj[number]) {
 
+            const btnDom = document.querySelector('.topButn')
 
+            btnDom.style.opacity = 1
 
+            // btnDom.style.pointerEvents = 'auto'
 
+            const txtDom = document.querySelector('.txtOne')
 
+            txtDom.style.opacity = 1
 
+            txtDom.style.pointerEvents = 'auto'
 
+
 
+            const txtButton = document.querySelector('.topButnOne')
 
+            // 获取文本
 
+            const txtInfo = txtObj[number] || '（空）'
 
+            $('.txtOne .con').html(txtInfo)
 
+            // 点击关闭
 
+            $('.txtOne .close').click(() => {
 
+                $('.txtOne').hide()
 
+                btnDom.style.pointerEvents = 'auto'
 
+                txtButton.style.backgroundColor = '#f2cd83'
 
+            })
 
+            $('.topButnOne').click(() => {
 
+                $('.txtOne').show()
 
+                btnDom.style.pointerEvents = 'none'
 
+
 
+                txtButton.style.backgroundColor = '#ccc'
 
+
 
+            })
 
+
 
+        }
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 71 - 0
Model2.html
查看文件 

@@ -0,0 +1,71 @@
 
+<!DOCTYPE html>
 
+<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="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
 
+<link rel="stylesheet" href="css/index.css">
 
+<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
 
+
 
+<head>
 
+    <title>-</title>
 
+    <script src="js/4dage.js"></script>
 
+    <script src="./info.js"></script>
 
+    <script>
 
+        document.title = titleInfo
 
+    </script>
 
+    <style>
 
+        html {
 
+            overflow: hidden;
 
+        }
 
+
 
+        .outerImg {
 
+            transition: all 1s;
 
+            opacity: 1;
 
+            position: absolute;
 
+            z-index: 998;
 
+            top: 0;
 
+            left: 0;
 
+            width: 100%;
 
+            height: 100%;
 
+            background-color: #1a1b20;
 
+        }
 
+
 
+        .outerImg img {
 
+            position: absolute;
 
+            width: 100%;
 
+            height: 100%;
 
+            object-fit: cover;
 
+        }
 
+
 
+
 
+        body {
 
+            user-select: none;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+
 
+    <div class="outerImg">
 
+        <img src="./img/bg.jpg" alt="">
 
+    </div>
 
+    <div id="ui">
 
+    </div>
 
+    <script src="js/jquery.js"></script>
 
+    <script>
 
+        var number = getQueryVariable("m");
 
+        if (spinInfo) window.autoRotate = true;
 
+
 
+        fdage.embed('4dage/' + number + '.4dage', {
 
+            width: 800,
 
+            height: 600,
 
+            autoStart: true,
 
+            fullFrame: true,
 
+            pagePreset: false
 
+        });
 
+        $('.outerImg img').attr('src', `./images/${number}.jpg`)
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 269 - 0
Model3.html
查看文件 

@@ -0,0 +1,269 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<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="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
 
+<link rel="stylesheet" href="css/index.css">
 
+<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
 
+
 
+<head>
 
+    <title>-</title>
 
+    <script src="js/4dage.js"></script>
 
+    <script src="./info.js"></script>
 
+    <script>
 
+        document.title = titleInfo
 
+    </script>
 
+    <style>
 
+        html {
 
+            overflow: hidden;
 
+        }
 
+
 
+        .back {
 
+            z-index: 998;
 
+            cursor: pointer;
 
+            width: 30px;
 
+            height: 30px;
 
+            position: absolute;
 
+            top: 10px;
 
+            left: 10px;
 
+        }
 
+
 
+        .back img {
 
+            width: 100%;
 
+            height: 100%;
 
+        }
 
+
 
+        .outerImg {
 
+            transition: all 1s;
 
+            opacity: 1;
 
+            position: absolute;
 
+            z-index: 998;
 
+            top: 0;
 
+            left: 0;
 
+            width: 100%;
 
+            height: 100%;
 
+            background-color: #1a1b20;
 
+        }
 
+
 
+        .outerImg img {
 
+            position: absolute;
 
+            width: 100%;
 
+            height: 100%;
 
+            object-fit: cover;
 
+        }
 
+
 
+        /* ---------------按钮和文字介绍------------- */
 
+        body {
 
+            user-select: none;
 
+        }
 
+
 
+
 
+        .topButn {
 
+            opacity: 0;
 
+            pointer-events: none;
 
+            z-index: 999;
 
+            position: absolute;
 
+            top: 50px;
 
+            left: 10px;
 
+        }
 
+
 
+        .topButn div {
 
+            padding: 0 5px;
 
+            margin-bottom: 10px;
 
+            width: 100%;
 
+            height: 40px;
 
+            line-height: 40px;
 
+            border-radius: 20px;
 
+            font-size: 18px;
 
+            color: #fff;
 
+            cursor: pointer;
 
+            text-align: center;
 
+            /* background-color: #f2cd83; */
 
+            background-color: #ccc;
 
+            border-radius: 5px;
 
+        }
 
+
 
+        .con::-webkit-scrollbar {
 
+            /*滚动条整体样式*/
 
+            width: 3px;
 
+            /*高宽分别对应横竖滚动条的尺寸*/
 
+            height: 1px;
 
+        }
 
+
 
+        .con::-webkit-scrollbar-thumb {
 
+            /*滚动条里面小方块*/
 
+            border-radius: 10px;
 
+            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
 
+            background: #f2cd83;
 
+        }
 
+
 
+        .con::-webkit-scrollbar-track {
 
+            /*滚动条里面轨道*/
 
+            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
 
+            border-radius: 10px;
 
+            background: #ededed;
 
+        }
 
+
 
+        .txtOne {
 
+            opacity: 0;
 
+            pointer-events: none;
 
+
 
+            padding: 30px 15px 30px 30px;
 
+            z-index: 1000;
 
+            position: absolute;
 
+            top: 150px;
 
+            left: 10px;
 
+            background-image: url('./img/divBac.png');
 
+            background-color: rgba(0, 0, 0, .6);
 
+            background-size: 100% 100%;
 
+            width: 400px;
 
+            height: 500px;
 
+            z-index: 9999;
 
+            color: #a08742;
 
+        }
 
+
 
+        .txtOne .con {
 
+            text-align: justify;
 
+            padding-right: 28px;
 
+            line-height: 30px;
 
+            margin-bottom: 30px;
 
+            overflow-y: auto;
 
+            height: 100%;
 
+        }
 
+
 
+        .txtOne .con>h3 {
 
+            margin-left: -5px;
 
+            font-size: 18px;
 
+            font-weight: 700;
 
+            margin-bottom: 15px;
 
+
 
+        }
 
+
 
+        .txtOne .close {
 
+            cursor: pointer;
 
+            position: absolute;
 
+            right: 24px;
 
+            top: 20px;
 
+            width: 20px;
 
+            height: 20px;
 
+        }
 
+
 
+        .txtOne .close img {
 
+            width: 100%;
 
+            height: 100%;
 
+        }
 
+
 
+        /* 手机端的样式 */
 
+        @media screen and (max-width: 600px) {
 
+            .topButn {
 
+                width: 220px;
 
+                display: flex;
 
+                justify-content: center;
 
+                margin: 0;
 
+                top: 5px;
 
+                left: 50%;
 
+                transform: translateX(-50%);
 
+                pointer-events: auto;
 
+
 
+            }
 
+
 
+            .topButn div {
 
+                width: 90px;
 
+                font-size: 14px;
 
+                background-color: #f2cd83;
 
+            }
 
+
 
+            .txtOne {
 
+                display: none;
 
+                box-sizing: border-box;
 
+                width: 100vw;
 
+                height: 100vh;
 
+                top: 0;
 
+                left: 0;
 
+                transform: translate(0, 0);
 
+                max-height: 100vh;
 
+                color: #fff;
 
+            }
 
+
 
+            .txtOne .con {
 
+                color: #fff;
 
+                height: calc(100vh - 100px);
 
+            }
 
+
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+
 
+    <!-- 新加的按钮 -->
 
+    <div class="topButn">
 
+        <div class="topButnOne">文物介绍</div>
 
+    </div>
 
+    <!-- 专家鉴定意见的文字 -->
 
+    <div class="txtOne">
 
+        <div class="close">
 
+            <img src="./img/close.png" alt="">
 
+        </div>
 
+        <p class="con"></p>
 
+    </div>
 
+
 
+
 
+    <div class="back" onclick="javascript:history.go(-1);">
 
+        <img src="./img/back.png" alt="">
 
+    </div>
 
+
 
+    <div class="outerImg">
 
+        <img src="./img/bg.jpg" alt="">
 
+    </div>
 
+    <div id="ui">
 
+    </div>
 
+    <script src="js/jquery.js"></script>
 
+    <script src="./txt.js"></script>
 
+
 
+    <script>
 
+        var number = getQueryVariable("m");
 
+        if (spinInfo) window.autoRotate = true;
 
+        fdage.embed('4dage/' + number + '.4dage', {
 
+            width: 800,
 
+            height: 600,
 
+            autoStart: true,
 
+            fullFrame: true,
 
+            pagePreset: false
 
+        });
 
+        $('.outerImg img').attr('src', `./images/${number}.jpg`)
 
+
 
+
 
+        // 获取文字介绍
 
+        if (txtShow && txtObj[number]) {
 
+            const btnDom = document.querySelector('.topButn')
 
+            btnDom.style.opacity = 1
 
+            // btnDom.style.pointerEvents = 'auto'
 
+            const txtDom = document.querySelector('.txtOne')
 
+            txtDom.style.opacity = 1
 
+            txtDom.style.pointerEvents = 'auto'
 
+
 
+            const txtButton = document.querySelector('.topButnOne')
 
+            // 获取文本
 
+            const txtInfo = txtObj[number] || '（空）'
 
+            $('.txtOne .con').html(txtInfo)
 
+            // 点击关闭
 
+            $('.txtOne .close').click(() => {
 
+                $('.txtOne').hide()
 
+                btnDom.style.pointerEvents = 'auto'
 
+                txtButton.style.backgroundColor = '#f2cd83'
 
+            })
 
+            $('.topButnOne').click(() => {
 
+                $('.txtOne').show()
 
+                btnDom.style.pointerEvents = 'none'
 
+
 
+                txtButton.style.backgroundColor = '#ccc'
 
+
 
+            })
 
+
 
+        }
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 301 - 0
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;
 
+}

+ 166 - 0
css/main.css
查看文件 

@@ -0,0 +1,166 @@
 
+body {
 
+    background: #dddada;
 
+    font-family: '微软雅黑';
 
+}
 
+
 
+.containers {
 
+    width: 1080px;
 
+    /* overflow: hidden; */
 
+    min-height: 80vh;
 
+    margin: 0 auto;
 
+}
 
+
 
+.con-title {
 
+    width: 300px;
 
+    margin: 0 auto;
 
+    margin-top: 20px;
 
+    display: inline-block;
 
+    font-size: 20px;
 
+    text-align: center;
 
+    font-weight: bold;
 
+    padding: 20px;
 
+}
 
+
 
+.con {
 
+    padding-right: 20px !important;
 
+    /* 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: url('../img/divBac.png');
 
+    background-size: 100% 100%;
 
+    /* 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 {
 
+    color: #fff;
 
+    margin-top: 10px;
 
+    font-size: 16px;
 
+    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;
 
+    } */
 
+}
 
+@media screen and (max-width: 350px) {
 
+    .con li {
 
+        margin: 20px auto;
 
+    }
 
+}
 
+.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: 14px;
 
+        font-weight: 100;
 
+    }
 
+}

+ 59 - 0
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;
 
+}

+ 107 - 0
css/wechat.css
查看文件 

@@ -0,0 +1,107 @@
 
+@font-face
 
+	{
 
+	font-family: "SourceHanSerifCN Bold";
 
+	src: url('../font/SourceHanSerifCN-Bold.otf'); 
+	}
 
+    @font-face
 
+	{
 
+	font-family: "SourceHanSerifCN Regular";
 
+	src: url('../font/SourceHanSerifCN-Regular.otf'); 
+	}
 
+  
+    
+/* 设置滚动条的样式 */
 
+::-webkit-scrollbar {
 
+    width:4px;
 
+    }
 
+    /* 滚动槽 */
 
+    ::-webkit-scrollbar-track {
 
+    border-radius:2px;
 
+    background:url(../img/line-bg.jpg)center/2px 100% no-repeat;
 
+    }
 
+    /* 滚动条滑块 */
 
+    ::-webkit-scrollbar-thumb {
 
+    width:4px;
 
+    border-radius:4px;
 
+    background:#890d12;
 
+   
+    }
 
+    /* ::-webkit-scrollbar-thumb:window-inactive {
 
+    background: #890d02;
 
+    } */
 
+
 
+* {
 
+    margin:0;
 
+    padding:0;
 
+}
 
+.ui {
 
+    
+}
 
+.top-name {
 
+    position:absolute;
 
+    z-index:22;
 
+    width:100%;
 
+    text-align:center;
 
+    font-family: "SourceHanSerifCN Bold";
 
+    font-size:5.6vw;
 
+    color:#890d12;
 
+    margin:2vh auto;
 
+}
 
+.bottom-description {
 
+    position:absolute;
 
+    z-index:22;
 
+    left:0;
 
+    right:0;
 
+    bottom:5vh;
 
+    margin:auto;
 
+    width:94.67vw;
 
+    height:44.53vw;
 
+    background:url(../img/info-bg.png)center/100% no-repeat;
 
+    padding:5vw 8vw 5vw 10vw;
 
+    box-sizing:border-box;
 
+}
 
+.bottom-description .inner {
 
+    height:100%;
 
+    overflow-y: scroll;
 
+    padding-right:4vw;
 
+}
 
+.bottom-description p {
 
+    font-size:2.53vw;
 
+    line-height:6vw;
 
+    color:#151c2c;
 
+}.bottom-description .item p#info {
 
+    width:58vw;
 
+    text-align:justify;
 
+}
 
+.bottom-description .item {
 
+    display:flex;
 
+    align-items: flex-start;
 
+}
 
+.bottom-description .item  span {
 
+    display:block;
 
+    width:15vw;
 
+    font-size:2.53vw;
 
+    font-family: "SourceHanSerifCN Regular";
 
+    line-height:6vw;
 
+}
 
+.audio {
 
+    position:absolute;
 
+    z-index:22;
 
+    top:10vh;
 
+    right:2vw;
 
+    width:12.26vw;
 
+    height:19.33vw;
 
+    background:url(../img/music-on.png)center/100% no-repeat;
 
+}
 
+.audio.on {
 
+    background:url(../img/music-off.png)center/100% no-repeat;
 
+}
 
+#companyText {
 
+    position:absolute;
 
+    z-index:22;
 
+    width:100%;
 
+    bottom:10px;
 
+    text-align:center;
 
+    font-size:10px;
 
+    color:rgb(255 255 255 / 0.5);
 
+}

二進制
fonts/SourceHanSansCN-Regular.otf
查看文件


二進制
images/ngs01.jpg
查看文件


二進制
images/ngs02.jpg
查看文件


二進制
images/ngs03.jpg
查看文件


二進制
images/ngs04.jpg
查看文件


二進制
images/ngs05.jpg
查看文件


二進制
images/ngs06.jpg
查看文件


二進制
images/ngs07.jpg
查看文件


二進制
images/ngs08.jpg
查看文件


二進制
images/ngs09.jpg
查看文件


二進制
images/ngs10.jpg
查看文件


二進制
img/back.png
查看文件


二進制
img/bg.jpg
查看文件


二進制
img/bigBac.png
查看文件


二進制
img/close.png
查看文件


二進制
img/divBac.png
查看文件


二進制
img/favicon.ico
查看文件


二進制
img/logo.png
查看文件


二進制
img/play.png
查看文件


二進制
img/titleBac.png
查看文件


+ 87 - 0
index.html
查看文件 

@@ -0,0 +1,87 @@
 
+<!DOCTYPE html>
 
+<html lang="ch-zh">
 
+
 
+<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="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
 
+    <link rel="stylesheet" href="./css/reset.css">
 
+    <link rel="stylesheet" href="./css/main.css">
 
+    <title>-</title>
 
+</head>
 
+<style>
 
+    .myTitle {
 
+        letter-spacing: 4px;
 
+        margin: 0 auto;
 
+        color: #fff;
 
+        display: flex;
 
+        justify-content: center;
 
+        align-items: center;
 
+        width: 270px;
 
+        height: 50px;
 
+        background: url('./img/titleBac.png') no-repeat center;
 
+        background-size: 100% 100%;
 
+    }
 
+
 
+    .containers {
 
+        padding-top: 40px;
 
+        width: 100vw;
 
+        max-width: 1080px;
 
+        /* height: 100vh; */
 
+        background-color: #285b5e;
 
+    }
 
+
 
+    .pageBox {
 
+        position: fixed;
 
+        z-index: 99;
 
+        right: 20px;
 
+        top: 10px;
 
+        display: flex;
 
+    }
 
+
 
+    .pageBox>div {
 
+        width: 24px;
 
+        height: 24px;
 
+        background-color: #fff;
 
+        cursor: pointer;
 
+        margin-left: 15px;
 
+        line-height: 24px;
 
+        text-align: center;
 
+        border-radius: 5px;
 
+        border: 1px solid #ccc;
 
+    }
 
+
 
+    .pageBox>div:hover {
 
+        background-color: #285b5e;
 
+        color: #fff;
 
+    }
 
+
 
+    .pageBox .active {
 
+        pointer-events: none;
 
+        background-color: #285b5e;
 
+        color: #fff;
 
+    }
 
+</style>
 
+
 
+<body>
 
+    <div class="containers">
 
+        <div class="myTitle"></div>
 
+        <ul class="con"> </ul>
 
+        <!-- 分页指示器 -->
 
+        <!-- <div class="pageBox">
 
+            <div class="active">1</div>
 
+            <div>2</div>
 
+            <div>3</div>
 
+        </div> -->
 
+    </div>
 
+    <script src="./info.js"></script>
 
+    <script src="js/jquery.js"></script>
 
+    <script src="js/ui.js"></script>
 
+    <script>
 
+        document.title = titleInfo
 
+        $('.myTitle').text(titleInfo)
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 40 - 0
info.js
查看文件 

@@ -0,0 +1,40 @@
 
+// **注意不要手打任何符号，请全部使用 复制 粘贴，以免格式错误，程序无法运行！**
 
+//（所有标点符号都不要删除，你只需要修改文字和编号）
 
+
 
+
 
+// 定义网址的 标题 
+let titleInfo = '宁国市博物馆'
 
+
 
+
 
+// 是否开启模型自动旋转功能  开启:true  关闭:false
 
+let spinInfo = false
 
+
 
+// 是否开启分页  开启:true  关闭:false
 
+let pageOpen = false
 
+
 
+// 分页条数 在9-100之间
 
+let pageNum = 5
 
+
 
+//配置  模型文件名字
 
+// 左边的是编号
 
+// 右边的是 模型名称
 
+// 这里举一个模型例子（这里的书写顺序就是网址的排列顺序）
 
+// （所有标点符号都不要删除，你只需要修改文字和编号，添加的时候复制粘贴即可）
 
+
 
+// 复制模板    '':``,
 
+
 
+let objInfo = {
 
+  
+  'ngs01':`八仙祝寿鎏金银托盘`,
 
+  'ngs02':`灰陶箕形砚`,
 
+  'ngs03':`双鸾月宫纹葵花镜`,
 
+  'ngs04':`莲形乐伎鎏金银杯`,
 
+  'ngs05':`牡丹花纹鎏金银盏`,
 
+  'ngs06':`莲花鎏金银碗`,
 
+  'ngs07':`青白釉水波纹盏`,
 
+  'ngs08':`鎏金人物银钗件`,
 
+  'ngs09':`鎏金龙珠银簪`,
 
+  'ngs10':`铜匜`,
 
+
 
+
 
+  }

文件差異過大導致無法顯示
+ 6504 - 0
js/4dage.js


文件差異過大導致無法顯示
+ 4 - 0
js/jquery.js


+ 105 - 0
js/ui.js
查看文件 

@@ -0,0 +1,105 @@
 
+(function () {
 
+    let fragment = document.createDocumentFragment();
 
+
 
+    // 获取地址栏信息
 
+    let GetQueryString = (name) => {
 
+        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
 
+        let r = window.location.search.substr(1).match(reg);
 
+        if (r != null) return unescape(r[2]);
 
+        return "";
 
+    }
 
+    let temp = GetQueryString('m')
 
+
 
+
 
+    // 获取总数组
 
+    const arrAll = []
 
+    for (let k in objInfo) {
 
+        arrAll.push({
 
+            id: k,
 
+            name: objInfo[k]
 
+        })
 
+    }
 
+
 
+    // 开启了分页得到的数组
 
+    let arr = []
 
+    // 总数组分割
 
+    let arrSpile = []
 
+
 
+
 
+    if (pageOpen) {
 
+        // 数据的总数
 
+        const total = arrAll.length
 
+
 
+        // 计算出分页的个数
 
+        const pageSize = Math.ceil(total / pageNum)
 
+        // 生成 分页 指示器 
+        const body = document.querySelector('body')
 
+        const pageBox = document.createElement('div');
 
+        pageBox.classList.add('pageBox')
 
+        for (let i = 0; i < pageSize; i++) {
 
+            const pageBoxSon = document.createElement('div');
 
+            pageBoxSon.innerHTML = i + 1
 
+            pageBox.appendChild(pageBoxSon)
 
+
 
+            // 当前的裁剪数据-联合数组类型
 
+            arrSpile.push(arrAll.slice(i * pageNum, (i + 1) * pageNum))
 
+        }
 
+        body.appendChild(pageBox)
 
+
 
+        // 为分页绑定点击事件
 
+        const pageDomSonAll = document.querySelectorAll('.pageBox div')
 
+        pageDomSonAll.forEach((v, i) => {
 
+            v.addEventListener('click', () => {
 
+                pageDomCreateFu(i)
 
+            })
 
+        })
 
+
 
+    } else arr = arrAll
 
+
 
+
 
+
 
+
 
+    // 向页面创建元素
 
+    const pageDomCreateFu = (acNum) => {
 
+
 
+        if (pageOpen) {
 
+            arr = arrSpile[acNum]
 
+            //高亮当前
 
+            const pageDomSonAll = document.querySelectorAll('.pageBox div')
 
+
 
+            pageDomSonAll.forEach(v => {
 
+                v.classList.remove('active')
 
+            })
 
+            pageDomSonAll[acNum].classList.add('active')
 
+        }
 
+
 
+        let ul = document.querySelector('.con');
 
+        ul.innerHTML = ''
 
+
 
+        arr.forEach(v => {
 
+            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');
 
+            // 判断地址栏有没有参数，有的话就跳Model2，没有logo
 
+            if (temp) a.href = `Model${temp}.html?m=${v.id}`;
 
+            else a.href = `Model.html?m=${v.id}`;
 
+            div.classList.add('card-img');
 
+            div.style = `background-image: url(images/${v.id}.jpg)`;
 
+            p.innerHTML = v.name;
 
+            a.appendChild(div);
 
+            divWrap.appendChild(a);
 
+            li.appendChild(divWrap);
 
+            li.appendChild(p);
 
+            fragment.appendChild(li);
 
+        })
 
+        ul.appendChild(fragment);
 
+    }
 
+
 
+    pageDomCreateFu(0)
 
+
 
+
 
+})()

文件差異過大導致無法顯示
+ 16 - 0
txt.js