1.將tour.js tour.swf放入項目文件夾
2.將熱點圖片hs_circle.png也放入其中
3.創建入口頁面文件 vtour.html
<!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, viewport-fit=cover" />
<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" />
<script src="tour.js"></script>
<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; }
</style>
</head>
<body class="gray-bg">
<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>
embedpano({swf:"tour.swf", xml:"vtour.xml", target:"pano", html5:"auto", mobilescale:1.0, passQueryParameters:true});
</script>
</div>
</body>
</html>
4.創建可拖拽熱點的xml插件 draggable.xml
<krpano>
<action name="draggable">
//異步循環 pressed是系統變量(鼠標按下爲true 擡起爲false)
asyncloop(pressed,
screentosphere(mouse.stagex, mouse.stagey, ath, atv);
);
</action>
</krpano>
5.創建主xml文件 vtour.xml
<krpano version="19.15" title="熱點拖拽">
<!-- 導入draggable.xml文件-->
<include url="draggable.xml" />
<view fov="110" fovmin="70" fovmax="140" />
<preview type="grid(CUBE,32,32,512,0xFF0000,0xFFFFFF,0x0000FF);" />
<!--
-->
<hotspot name="dragHotspot"
keep="true"
url="hs_circle.png"
ath="0" atv="0"
distorted="true"
ondown="draggable()"
/>
</krpano>
6.目錄結構
7.效果圖
