shaogen1995
/
chuYinKouXian


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>四维时代</title>
  <style type="text/css">
    body {
      -ms-touch-action: none;
      background-color: #000;
    }

    a {
      text-decoration: none;
      color: #fff;
    }

    #rotateHint {
      animation: flash 1s infinite;
      -webkit-animation: flash 1s infinite;
      animation-timing-function: ease-out;
      left: 35%;
      top: 26%;
      margin-left: -32px;
      width: 80px;
      height: 80px;
      position: absolute;
      background-repeat: no-repeat;
      background-position: center center;
      z-index: 10;
      background-image: url("rotate1.png");
    }

    @keyframes flash {
      0% {
        opacity: 0.8;
        background-size: 60% 60%;
      }

      100% {
        opacity: 0.1;
        background-size: 100% 100%;
      }
    }

    .wrap {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }

    .intro {
      background: url("Spain.png") no-repeat;
      background-size: 100%;
      background-color: rgba(34, 34, 34, 1);
    }

    .photo {
      margin-left: -400px;
    }

    .intro-words {
      margin: 200px 0 0 50px;
    }

    .intro-words p {
      width: 90%;
      color: #fff;
    }

    @media screen and (max-width: 1400px) {
      .wrap {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }

      .intro {
        background: url("Spain.png") no-repeat;
        background-size: 100%;
        background-color: rgba(34, 34, 34, 1);
      }

      .photo {
        margin-left: -400px;
      }

      .intro-words {
        margin: 200px 0 0 50px;
      }

      .intro-words p {
        width: 90%;
        color: #fff;
      }
    }
  </style>

  <script language="JavaScript" type="text/javascript" src="src/ObjectViewer_2D.js"></script>
  <script language="JavaScript" type="text/javascript">
    var Fdage;
    var dragStart;
    function showRotHint() {
      var rot = document.getElementById("rotateHint");
      var container = document.getElementById('4dage');
      var f1 = function () {
        dragStart = true;
      }
      var f2 = function () {
        dragStart = false;
      }
      var f3 = function () {
        if (dragStart) {
          rot.parentElement.removeChild(rot);
          container.removeEventListener("mousedown", f1);
          container.removeEventListener("mouseup", f2);
          container.removeEventListener("touchstart", f1)
          container.removeEventListener("touchend", f2)
          container.removeEventListener("mousemove", f3);
          container.removeEventListener("touchmove", f3);
        }
      }
      container.addEventListener("mousedown", f1);
      container.addEventListener("mouseup", f2);
      container.addEventListener("touchstart", f1)
      container.addEventListener("touchend", f2)
      container.addEventListener("mousemove", f3);
      container.addEventListener("touchmove", f3);
    }


    function init4dage() {
      var zoomVal = document.documentElement.clientHeight / 960;
      var nameOfDiv = "4dage";
      var folderName = "image/396";
      var imageWidth = 1200;
      var imageHeight = 800;
      var backgroundColor = "rgba(255,255,255,0)";
      var uCount = 68;
      var vCount = 1;
      var uWrap = true;
      var vWrap = true;
      var uMouseSensitivity = -0.098484;
      var vMouseSensitivity = 0.019735;
      var uStartIndex = 1;
      var vStartIndex = 0;
      var minZoom = zoomVal;
      var maxZoom = 5.000000;
      var rotationDamping = 0.960000;
      var windowResizable = true;
      var enableLOD = false;
      var addResizableGUIButton = false;
      var addPlayGUIButton = false;
      var imageExtension = "png";
      var showLoading = false;
      Fdage = new FdageT(nameOfDiv, folderName, imageWidth, imageHeight, backgroundColor, uCount, vCount, uWrap, vWrap, uMouseSensitivity, vMouseSensitivity, uStartIndex, vStartIndex, minZoom, maxZoom, rotationDamping, windowResizable, enableLOD, addResizableGUIButton, addPlayGUIButton, imageExtension, showLoading);
      showRotHint();
    }
    window.onload = init4dage;

  </script>
</head>


<body oncontextmenu="return false;">

  <div id='wx_pic' style='margin:0 auto;display:none;'>
    <img src='ins.jpg' />
  </div>

  <div id="rotateHint"></div>
  <div class="wrap">
    <div id="4dage" class="photo" style="width:960px;height:960px;max-width:100%;margin-left: -200px;"></div>
    <div class="intro" style="width: 800px;height: 500px;">
      <div class="intro-words">
        <p>年 代：西汉</p>
        <p>征集地：中国陕西西汉长安未央宫遗址</p>
        <p>体 量：口弦长7.2cm，宽2.7cm</p>
        <p>展品鉴定报告描述
          标本锈蚀严重，口弦琴形态尚完全，能够观察到琴体、琴弦，两者为一体打造，看不到焊接痕迹，是较特殊的形态。金相分析结果显示，利用扫描电镜能谱仪进行分析，除铁锈外，还有黄铜的成分，并还有少量硫化物。在三岔处其金相组织为铁素体和珠光体组织，含碳量约0.4％，在本视场内未发现两块刚才锻接痕迹和其它类型的夹杂物。
        </p>
      </div>
    </div>
  </div>
</body>

</html>