增加模型文物介绍

Model.html

@@ -12,7 +12,7 @@
     <script src="js/4dage.js"></script>
     <script src="./info.js"></script>
     <script>
-        document.title=titleInfo
+        document.title = titleInfo
     </script>
     <style>
         html {
@@ -48,7 +48,7 @@
         }
 
         .back {
-            z-index: 9999;
+            z-index: 998;
             cursor: pointer;
             width: 30px;
             height: 30px;
@@ -61,6 +61,7 @@
             width: 100%;
             height: 100%;
         }
+
         .outerImg {
             transition: all 1s;
             opacity: 1;
@@ -79,10 +80,164 @@
             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: 0px;
+
+        }
+
+        .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>
@@ -96,9 +251,11 @@
     <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;
+        if (spinInfo) window.autoRotate = true;
         fdage.embed('4dage/' + number + '.4dage', {
             width: 800,
             height: 600,
@@ -107,6 +264,36 @@
             pagePreset: false
         });
         $('.outerImg img').attr('src', `./images/${number}.jpg`)
+
+
+        // 获取文字介绍
+        if (txtShow) {
+            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>
 

Model2.html

@@ -12,57 +12,13 @@
     <script src="js/4dage.js"></script>
     <script src="./info.js"></script>
     <script>
-        document.title=titleInfo
+        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;
-            display: none !important;
-        }
-
-        .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 {
-            display: none !important;
-            z-index: 9999;
-            cursor: pointer;
-            width: 30px;
-            height: 30px;
-            position: absolute;
-            top: 10px;
-            left: 10px;
-        }
-
-        .back img {
-            width: 100%;
-            height: 100%;
-        }
         .outerImg {
             transition: all 1s;
             opacity: 1;
@@ -81,17 +37,16 @@
             height: 100%;
             object-fit: cover;
         }
+
+
+        body {
+            user-select: none;
+        }
     </style>
 </head>
 
 <body>
-    <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>
@@ -100,7 +55,7 @@
     <script src="js/jquery.js"></script>
     <script>
         var number = getQueryVariable("m");
-        if(spinInfo) window.autoRotate = true;
+        if (spinInfo) window.autoRotate = true;
 
         fdage.embed('4dage/' + number + '.4dage', {
             width: 800,

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: 0px;
+
+        }
+
+        .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) {
+            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>

info.js

@@ -10,10 +10,10 @@ let titleInfo = '一房一册'
 let spinInfo = false
 
 // 是否开启分页  开启:true  关闭:false
-let pageOpen = true
+let pageOpen = false
 
 // 分页条数 在9-100之间
-let pageNum = 10
+let pageNum = 5
 
 //配置  模型文件名字
 // 左边的是编号

js/ui.js

@@ -85,7 +85,7 @@
             divWrap.classList.add('case');
             a.classList.add('link-a');
             // 判断地址栏有没有参数，有的话就跳Model2，没有logo
-            if (temp) a.href = `Model2.html?m=${v.id}`;
+            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)`;

txt.js

@@ -0,0 +1,10 @@
+// 是否开启文字介绍   开启:true  关闭:false
+let txtShow = true
+
+// 复制模板    '':``,
+let txtObj = {
+  'ybb': `
+  <h3>&emsp;&emsp;雪景白瓷瓶</h3>
+  <p>&emsp;&emsp;通高28.5、口径8.4、底径11.9厘米</p>
+  `,
+}