123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300 |
- <!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: 30px;
- height: 30px;
- position: absolute;
- bottom: 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="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>
|