chenlei
/
leifeng-transfer


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
							<!DOCTYPE html>
<html>
  <head>
    <title>湖南雷锋纪念馆</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
    <style>
      @-ms-viewport {
        width: device-width;
      }
      @media only screen and (min-device-width: 800px) {
        html {
          overflow: hidden;
        }
      }
      html {
        height: 100%;
      }
      body {
        height: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: #ffffff;
        background-color: #000000;
      }
      .right-tools {
        position: fixed;
        right: 21px;
        bottom: 17px;
        font-size: 0;
        z-index: 3001;
      }
      .right-tools > * {
        cursor: pointer;
        width: 50px;
      }
      .right-tools > *:not(:first-child) {
        margin-left: 16px;
      }
      #back {
        position: fixed;
        z-index: 3001;
        top: 31px;
        left: 16px;
        cursor: pointer;
      }

      #vr-musicOpen {
        display: none;
      }

      @media screen and (max-width: 1250px) {
        .right-tools {
          bottom: calc(17px + 50px);

          > * {
            width: 40px;
          }
          > *:not(:first-child) {
            margin-left: 10px;
          }
        }
      }
    </style>
  </head>
  <body>
    <script src="tour.js"></script>

    <img id="back" src="./skin/icon-back-1.png" />

    <!-- 音乐 -->
    <audio id="myAudio" src="./skin/musicBac.mp3" style="display: none"></audio>

    <div class="right-tools">
      <img id="vr-musicOpen" src="./skin/icon-musicOpen.png" />
      <img id="vr-musicClose" src="./skin/icon-musicClose.png" />
      <img id="vr-home" src="./skin/icon-home.png" />
      <img id="vr-360" src="./skin/icon-360.png" />
      <!-- <img id="vr-icon" src="./skin/icon-VR.png" /> -->
    </div>

    <div id="pano" style="width: 100%; height: 100%">
      <noscript
        ><table style="width: 100%; height: 100%">
          <tr style="vertical-align: middle">
            <td>
              <div style="text-align: center">
                ERROR:<br /><br />Javascript not activated<br /><br />
              </div>
            </td>
          </tr></table
      ></noscript>
      <script>
        var krpano = null;
        var vr360Button = document.getElementById("vr-360");
        var AUTOROTATE_KEY = "autorotate";
        var urlParams = new URLSearchParams(location.search);

        embedpano({
          swf: "tour.swf",
          xml: urlParams.get("id") + ".xml",
          target: "pano",
          html5: "auto",
          mobilescale: 1.0,
          passQueryParameters: true,
          onready: function (k) {
            krpano = k;

            // 塑像默认开启巡视
            if (location.href.indexOf("statue") > -1) {
              handle360Icon(true, true);
            } else {
              handle360Icon(
                Boolean(Number(localStorage.getItem(AUTOROTATE_KEY))),
                true
              );
            }
          },
        });

        var homeButton = document.getElementById("vr-home");
        homeButton.addEventListener("click", function () {
          window.parent.postMessage(
            {
              openPopup: true,
            },
            "*"
          );
        });

        // var vrButton = document.getElementById("vr-icon");
        // vrButton.addEventListener("click", function () {
        //   if (krpano) krpano.call("webvr.enterVR();");
        // });

        vr360Button.addEventListener("click", function () {
          var autorotateEnabled = krpano.get("autorotate.enabled");
          handle360Icon(!autorotateEnabled);

          localStorage.setItem(AUTOROTATE_KEY, Number(!autorotateEnabled));
        });

        var backButton = document.getElementById("back");
        backButton.addEventListener("click", function () {
          location.href = "./tour.html";
        });

        function handle360Icon(type, isInit) {
          vr360Button.setAttribute(
            "src",
            type ? "./skin/icon-360-1.png" : "./skin/icon-360.png"
          );

          if (krpano) {
            setTimeout(
              function () {
                krpano.set("autorotate.enabled", type);
              },
              isInit ? 500 : 0
            );
          }
        }

        // 音乐播放的暂停
        const audioDom = document.querySelector("#myAudio");

        const musicOpenDom = document.querySelector("#vr-musicOpen");
        const musicCloseDom = document.querySelector("#vr-musicClose");

        if (audioDom) {
          // 默认播放音频
          audioDom.play();
          audioDom.onended = function () {
            // 音频播放完毕
            musicOpenDom.style.display = "inline-block";
            musicCloseDom.style.display = "none";
          };
        }

        musicOpenDom.addEventListener("click", () => {
          audioDom.play();
          musicOpenDom.style.display = "none";
          musicCloseDom.style.display = "inline-block";
        });

        musicCloseDom.addEventListener("click", () => {
          audioDom.pause();
          musicOpenDom.style.display = "inline-block";
          musicCloseDom.style.display = "none";
        });
      </script>
    </div>
    <!-- <script>
	function sendPost(value) {
		var iframeWin = document.getElementById("pano").contentWindow;
		iframeWin.postMessage(value,'http://localhost:8081/#/panorama?id=start') 
	}
</script> -->
  </body>
</html>