Krpanoパノラママウスドラッグアンドドロップモバイルホットスポット（実用的）

1. tour.jstour.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.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.エフェクト画像

Krpanoパノラママウスドラッグアンドドロップモバイルホットスポット（実用的）

おすすめ