001.html 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <title>ËÄάʱ´ú</title>
  7. <style type="text/css">
  8. body { -ms-touch-action: none; }
  9. a{text-decoration:none;color:#fff;}
  10. #rotateHint{
  11. animation: flash 1s infinite;
  12. -webkit-animation: flash 1s infinite;
  13. animation-timing-function: ease-out;
  14. left: 50%;
  15. top: 24%;
  16. margin-left:-32px;
  17. width: 80px;
  18. height: 80px;
  19. position: absolute;
  20. background-repeat: no-repeat;
  21. background-position: center center;
  22. z-index: 10;
  23. background-image:url("rotate1.png");
  24. }
  25. @keyframes flash{
  26. 0% {
  27. opacity: 0.8;
  28. background-size: 60% 60%;
  29. }
  30. 100% {
  31. opacity: 0.1;
  32. background-size: 100% 100%;
  33. }
  34. }
  35. </style>
  36. <script language="JavaScript" type="text/javascript" src="src/ObjectViewer_2D.js"></script>
  37. <script language="JavaScript" type="text/javascript">
  38. var Fdage;
  39. var dragStart;
  40. function showRotHint(){
  41. var rot = document.getElementById("rotateHint");
  42. var container = document.getElementById('4dage');
  43. var f1 = function(){
  44. dragStart = true;
  45. }
  46. var f2 = function(){
  47. dragStart = false;
  48. }
  49. var f3 = function(){
  50. if(dragStart){
  51. rot.parentElement.removeChild(rot);
  52. container.removeEventListener("mousedown",f1);
  53. container.removeEventListener("mouseup",f2);
  54. container.removeEventListener("touchstart",f1)
  55. container.removeEventListener("touchend",f2)
  56. container.removeEventListener("mousemove",f3);
  57. container.removeEventListener("touchmove",f3);
  58. }
  59. }
  60. container.addEventListener("mousedown",f1);
  61. container.addEventListener("mouseup",f2);
  62. container.addEventListener("touchstart",f1)
  63. container.addEventListener("touchend",f2)
  64. container.addEventListener("mousemove",f3);
  65. container.addEventListener("touchmove",f3);
  66. }
  67. function init4dage() {
  68. var zoomVal=document.documentElement.clientHeight/960;
  69. var nameOfDiv = "4dage";
  70. var folderName = "image/001";
  71. var imageWidth = 1200;
  72. var imageHeight = 800;
  73. var backgroundColor = "rgba(255,255,255,0)";
  74. var uCount = 68;
  75. var vCount = 1;
  76. var uWrap = true;
  77. var vWrap = true;
  78. var uMouseSensitivity = -0.098484;
  79. var vMouseSensitivity = 0.019735;
  80. var uStartIndex = 1;
  81. var vStartIndex = 0;
  82. var minZoom=zoomVal;
  83. var maxZoom = 5.000000;
  84. var rotationDamping = 0.960000;
  85. var windowResizable = true;
  86. var enableLOD = false;
  87. var addResizableGUIButton = false;
  88. var addPlayGUIButton = false;
  89. var imageExtension = "png";
  90. var showLoading = false;
  91. 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);
  92. showRotHint();
  93. }
  94. window.onload = init4dage;
  95. </script>
  96. </head>
  97. <div id='wx_pic' style='margin:0 auto;display:none;'>
  98. <img src='ins.jpg' />
  99. </div>
  100. <body oncontextmenu="return false;">
  101. <div id="4dage" style="width:960px;height:960px;max-width:100%;"></div>
  102. <div id="rotateHint">
  103. </div>
  104. </body>
  105. </html>