二、H5全景图-朋友圈全景图-720°全景-VR ---- 项目简单分析_pano2vr.js

作者：我家自动化 | 2024-05-02 10:57:44

踩

pano2vr.js

官方网站

这里我们主要看一下生成的项目中都有什么。源码中都有什么，如何去自定义

我们先只导入一张全景图，不做任何设置然后导出项目。（为了方便，我将其项目地址和生成的html地址都设置在一起）

我们看看都有什么

文件夹images：软件切好的图片存放目录
pano2vr_player.js :Pano2VR自动生成的JavaScript脚本，是整个项目的核心
test1.xml : 里面主要有一些项目的设置信息，比如热点图片之类的
test1.html : 这个就是我一直所说的自动生成的demo

至于其他两个，应该是播放flash用的，也的确是这样的。（我们生成的h5为什么会有flash参与进来呢？下面会说的）
pano2vr_player.swf : 是一个flash文件
swfobject.js : 根据命名来看应该是flash的对象的JavaScript脚本

其实看了demo代码就知道这两个文件什么意思了，当没有CSS3 3D和WebGL的支持时，会选择播放这个Flash（9以上，包括9）。如果三者都不支持那么对不起，播放不了了~

所以我们主要看上面的四个

images

这里就是软件切好的图片存放目录。
一共12张图片，前6个是彩色后6个是灰色的。
为什么会有灰色的呢，生成h5的项目是用网络加载才能显示出来，加载过程中就可能网络不理想，这些灰色就是在加载时候显示的。

test1.html

这里就是生成给我们的demo，以后我们会根据这个demo进行不断更改，从而做出想要的效果。这里简单翻译下

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-doctype" style="color: rgb(102, 0, 102); box-sizing: border-box;"><!DOCTYPE html></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">http-equiv</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"Content-Type"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">content</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/html;charset=UTF-8"</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">http-equiv</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"X-UA-Compatible"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">content</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"IE=edge"</span> /></span> 
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">title</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">title</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"viewport"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">content</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui"</span> /></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"apple-mobile-web-app-capable"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">content</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"yes"</span> /></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"apple-mobile-web-app-status-bar-style"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">content</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"black"</span> /></span>

        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"swfobject.js"</span>></span><span class="javascript" style="box-sizing: border-box;">
        </span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span>></span><span class="javascript" style="box-sizing: border-box;">

            <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">hideUrlBar</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//--隐藏iPhone地址栏，方法貌似要自己写 </span>
            }

        </span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span>
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--设置样式--></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">style</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/css"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">title</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"Default"</span>></span><span class="css" style="box-sizing: border-box;"> 
            <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">body</span>, <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">div</span>, <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">h1</span>, <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">h2</span>, <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">h3</span>, <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">span</span>, <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">p</span> <span class="hljs-rules" style="box-sizing: border-box;">{
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">font-family</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> Verdana,Arial,Helvetica,sans-serif</span></span>;
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-hexcolor" style="box-sizing: border-box;">#000000</span></span></span>; 
            <span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
            <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">body</span> <span class="hljs-rules" style="box-sizing: border-box;">{
              <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">font-size</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">10</span>pt</span></span>;
              <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">background </span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-hexcolor" style="box-sizing: border-box;">#ffffff</span></span></span>; 
            <span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
            <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">table</span>,<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">tr</span>,<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">td</span> <span class="hljs-rules" style="box-sizing: border-box;">{
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">font-size</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">10</span>pt</span></span>;
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">border-color </span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-hexcolor" style="box-sizing: border-box;">#777777</span></span></span>;
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">background </span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-hexcolor" style="box-sizing: border-box;">#dddddd</span></span></span>; 
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-hexcolor" style="box-sizing: border-box;">#000000</span></span></span>; 
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">border-style </span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> solid</span></span>;
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">border-width </span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">2</span>px</span></span>;
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">padding</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">5</span>px</span></span>;
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">border-collapse</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">collapse</span></span>;
            <span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
            <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">h1</span> <span class="hljs-rules" style="box-sizing: border-box;">{
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">font-size</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">18</span>pt</span></span>;
            <span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
            <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">h2</span> <span class="hljs-rules" style="box-sizing: border-box;">{
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">font-size</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">14</span>pt</span></span>;
            <span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
            <span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.warning</span> <span class="hljs-rules" style="box-sizing: border-box;">{ 
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">font-weight</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> bold</span></span>;
            <span class="hljs-rule" style="box-sizing: border-box;">}</span></span> 
            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*修正在WebKit和Mac OS X Lion滚动条  */</span> 
            <span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">::-webkit-scrollbar</span> <span class="hljs-rules" style="box-sizing: border-box;">{
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">background-color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-function" style="box-sizing: border-box;">rgba(<span class="hljs-number" style="box-sizing: border-box;">0</span>,<span class="hljs-number" style="box-sizing: border-box;">0</span>,<span class="hljs-number" style="box-sizing: border-box;">0</span>,<span class="hljs-number" style="box-sizing: border-box;">0.5</span>)</span></span></span>;
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">width</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">0.75</span>em</span></span>;
            <span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
            <span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">::-webkit-scrollbar-thumb</span> <span class="hljs-rules" style="box-sizing: border-box;">{
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">background-color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">  <span class="hljs-function" style="box-sizing: border-box;">rgba(<span class="hljs-number" style="box-sizing: border-box;">255</span>,<span class="hljs-number" style="box-sizing: border-box;">255</span>,<span class="hljs-number" style="box-sizing: border-box;">255</span>,<span class="hljs-number" style="box-sizing: border-box;">0.5</span>)</span></span></span>;
            <span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
        </span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">style</span>></span>    
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">h1</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">h1</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">br</span>></span>
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--加载核心Js--></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"pano2vr_player.js"</span>></span><span class="javascript" style="box-sizing: border-box;">
        </span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"container"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">style</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"width:640px;height:480px;"</span>></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--这里就是全景图的容器--></span>
        This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span>></span><span class="javascript" style="box-sizing: border-box;">

        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 检查 是否支持CSS33D效果变换 和 WebGL</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (ggHasHtml5Css3D() || ggHasWebGL()) {<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//如果支持，使用H5 展示全景</span>
            pano=<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> pano2vrPlayer(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"container"</span>);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//创建panorama player对象，构造函数中的参数是 全景图的容器</span>
            pano.readConfigUrl(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"test1.xml"</span>);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//加载参数</span>
            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 在iPhone中隐藏地址栏</span>
            setTimeout(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span> hideUrlBar(); }, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>);
        } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (swfobject.hasFlashPlayerVersion(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"10.0.0"</span>)) {<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//不支持，则使用Flash 播放全景（我们不主要分析这里）</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> flashvars = {};
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> params = {};
            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// enable javascript interface</span>
            flashvars.externalinterface=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"1"</span>;
            params.quality = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"high"</span>;
            params.bgcolor = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#ffffff"</span>;
            params.allowscriptaccess = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"sameDomain"</span>;
            params.allowfullscreen = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"true"</span>;
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> attributes = {};
            attributes.id = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"pano"</span>;
            attributes.name = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"pano"</span>;
            attributes.align = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"middle"</span>;
            flashvars.panoxml=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"test1.xml"</span>;
            params.base=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"."</span>;
            swfobject.embedSWF( 
                <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"pano2vr_player.swf"</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//这里是我们前面说的那个flash文件</span>
                <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"container"</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//控件容器</span>
                <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"640"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"480"</span>,<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//控件尺寸</span>
                <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"9.0.0"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>, 
                flashvars, params, attributes);

        }
        </span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">noscript</span>></span>
            <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">b</span>></span>Please enable Javascript!<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">b</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">noscript</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li><li style="box-sizing: border-box; padding: 0px 5px;">93</li><li style="box-sizing: border-box; padding: 0px 5px;">94</li><li style="box-sizing: border-box; padding: 0px 5px;">95</li><li style="box-sizing: border-box; padding: 0px 5px;">96</li><li style="box-sizing: border-box; padding: 0px 5px;">97</li><li style="box-sizing: border-box; padding: 0px 5px;">98</li><li style="box-sizing: border-box; padding: 0px 5px;">99</li><li style="box-sizing: border-box; padding: 0px 5px;">100</li><li style="box-sizing: border-box; padding: 0px 5px;">101</li><li style="box-sizing: border-box; padding: 0px 5px;">102</li><li style="box-sizing: border-box; padding: 0px 5px;">103</li><li style="box-sizing: border-box; padding: 0px 5px;">104</li></ul>

test1.xml

这个xml文件就是我们要用h5显示的时候所需要的 ‘配置文件’，然而官方并没有给出这些表情的介绍，所以只能靠猜了

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-pi" style="color: rgb(0, 102, 102); box-sizing: border-box;"><?xml version="1.0" encoding="UTF-8" ?></span>
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!-- 全景图标签--></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">panorama</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">""</span>></span>
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--控件  fovmode:视场模式;pannorth:显示正北;--></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">view</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">fovmode</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">pannorth</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0"</span>></span>
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--显示参数
        pan:平移;
        fov:视场;
        tilt:俯仰;
        --></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">start</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">pan</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">fov</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"70"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">tilt</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0"</span> /></span>
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--最小视角--></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">min</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">pan</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"-180"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">fov</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"5"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">tilt</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"-48.9271"</span> /></span>
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--最大视角--></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">max</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">pan</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"180"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">fov</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"120"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">tilt</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"48.9271"</span> /></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">view</span>></span>
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--用户数据 在在这里我把翻译写到内容中了--></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">userdata</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">title</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"标题"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">datetime</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"日期"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">description</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"描述"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">copyright</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"版权"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">tags</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"标签"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">author</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"作者"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">source</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"来源"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">comment</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"评论"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">info</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"信息"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">longitude</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"经度"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">latitude</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"维度"</span> /></span>
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--热点--></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">hotspots</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"180"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"20"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">wordwrap</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"1"</span>></span>
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--热点标签 相关参数挺简单的  这里不介绍了，自己翻译吧--></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">label</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"180"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">backgroundalpha</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"1"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">enabled</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"1"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"20"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">backgroundcolor</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0xffffff"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">bordercolor</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0x000000"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">border</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"1"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">textcolor</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0x000000"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">background</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"1"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">borderalpha</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"1"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">borderradius</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"1"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">wordwrap</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"1"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">textalpha</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"1"</span> /></span>
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--柱式--></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">polystyle
</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">mode</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"1"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">backgroundalpha</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0.2509803921568627"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">backgroundcolor</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0x0000ff"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">bordercolor</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0x0000ff"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">borderalpha</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"100"</span> /></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">hotspots</span>></span>
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--多媒体  我们没有添加，所以其内容就是空--></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">media</span>/></span>
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--图片资源
    prev*url:预览图;
    tile*url:真正预览的图片;
    tilesize:图片大小;
    tilescale:图片缩放级别--></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">input
</span>    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">prev5url</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"images/26172418_2981_preview_o_preview_5.jpg"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">prev4url</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"images/26172418_2981_preview_o_preview_4.jpg"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">prev3url</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"images/26172418_2981_preview_o_preview_3.jpg"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">prev2url</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"images/26172418_2981_preview_o_preview_2.jpg"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">prev1url</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"images/26172418_2981_preview_o_preview_1.jpg"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">prev0url</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"images/26172418_2981_preview_o_preview_0.jpg"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">tile5url</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"images/26172418_2981_preview_o_5.jpg"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">tile4url</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"images/26172418_2981_preview_o_4.jpg"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">tile3url</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"images/26172418_2981_preview_o_3.jpg"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">tile2url</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"images/26172418_2981_preview_o_2.jpg"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">tile1url</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"images/26172418_2981_preview_o_1.jpg"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">tile0url</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"images/26172418_2981_preview_o_0.jpg"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">tilesize</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"374"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">tilescale</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"1.026738"</span>></span>
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--预览图背景颜色--></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">preview</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">color</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0x808080"</span> /></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">input</span>></span>

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--控制台
    0是假1是真（1就是开关中的开启,0就是关闭）
    simulatemass:模拟质量(在这里只是指惯性);
    lockedmouse:锁定鼠标;
    lockedkeyboard:锁定键盘;
    dblclickfullscreen:双击全屏;
    invertwheel:翻转鼠标滑轮;
    lockedwheel:锁定鼠标滑轮;
    invertcontrol:;锁定控制台
    speedwheel:鼠标滑轮放大缩小(需要将invertcontrol设置为0);
    sensitivity:敏感度(需要将invertcontrol设置为0)
    --></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">control
</span>    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">simulatemass</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"1"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">lockedmouse</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">lockedkeyboard</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"1"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">dblclickfullscreen</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"1"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">invertwheel</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"1"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">lockedwheel</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">invertcontrol</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">speedwheel</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"10"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">sensitivity</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"8"</span>
    /></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">panorama</span>></span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li><li style="box-sizing: border-box; padding: 0px 5px;">93</li><li style="box-sizing: border-box; padding: 0px 5px;">94</li><li style="box-sizing: border-box; padding: 0px 5px;">95</li><li style="box-sizing: border-box; padding: 0px 5px;">96</li><li style="box-sizing: border-box; padding: 0px 5px;">97</li><li style="box-sizing: border-box; padding: 0px 5px;">98</li><li style="box-sizing: border-box; padding: 0px 5px;">99</li><li style="box-sizing: border-box; padding: 0px 5px;">100</li><li style="box-sizing: border-box; padding: 0px 5px;">101</li><li style="box-sizing: border-box; padding: 0px 5px;">102</li><li style="box-sizing: border-box; padding: 0px 5px;">103</li></ul>

好了，经过测试我们猜的也是八九不离十~ 如果设置一些旋转什么的都会增加相应的标签。
只要记住这个xml文件是记录你配置信息的就好，如果你真的掌握了，就会省下不少麻烦。

比如现在项目要求开启自动旋转！原来没有的功能，按理来说是要重新生成一个,但是如果你掌握了这里的标签，只需要改一个数就可以了~

分析：使用H5模式播放全景图的话，其实就是绘制一个3D的模型（有可能是球，有可能是正方体具体是什么以后有机会的话继续分析Js源码），然后将全景图切分成6份，将起’贴在模型上’ （可以把这个叫做蒙皮）。在模型的内部的正中央有一个相机，根据鼠标或者键盘的事件，进行相应的处理从而达到了我们眼中的3D效果

好了，这篇的源码分析就到这里吧，如果有机会会继续分析Js核心代码到时候我们将不用pano2vr这个工具，可以自己写核心代码撸出来一个全景图（属于题外话了，如果有精力的话会尝试一下）

本片文章全部代表个人观点，如果有错误请谅解欢迎指正

原文地址：
http://blog.csdn.net/qq_24889075/article/details/51974204
http://www.jianshu.com/p/a1b8707e3e08

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/523713