|
|
@@ -1,62 +1,79 @@
|
|
|
-<!DOCTYPE>
|
|
|
-<html>
|
|
|
- <head>
|
|
|
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
|
|
|
- <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;
|
|
|
+<!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%;
|
|
|
}
|
|
|
- .intro-words {
|
|
|
- margin: 200px 0 0 50px;
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ opacity: 0.1;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
- .intro-words p {
|
|
|
- width: 90%;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- @media screen and (max-width: 1400px) {
|
|
|
- .wrap {
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
@@ -64,105 +81,111 @@
|
|
|
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>
|
|
|
- <div id='wx_pic' style='margin:0 auto;display:none;'>
|
|
|
-<img src='ins.jpg' />
|
|
|
+ }
|
|
|
+ </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>
|
|
|
+<div id='wx_pic' style='margin:0 auto;display:none;'>
|
|
|
+ <img src='ins.jpg' />
|
|
|
</div>
|
|
|
- <body oncontextmenu="return false;">
|
|
|
- <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>
|
|
|
+
|
|
|
+<body oncontextmenu="return false;">
|
|
|
+ <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>
|
