123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112 |
- <!DOCTYPE>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title>ËÄάʱ´ú</title>
- <style type="text/css">
- body { -ms-touch-action: none; }
- a{text-decoration:none;color:#fff;}
- #rotateHint{
- animation: flash 1s infinite;
- -webkit-animation: flash 1s infinite;
- animation-timing-function: ease-out;
- left: 50%;
- top: 13%;
- 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%;
- }
- }
-
- </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/93";
- 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="4dage" style="width:960px;height:960px;max-width:100%;"></div>
- <div id="rotateHint">
- </div>
- </body>
- </html>
|