二、H5全景图-朋友圈全景图-720°全景-VR ---- 项目简单分析
来源：互联网 发布：java程序员适合用mac吗 编辑：程序博客网 时间：2024/05/22 00:35
官方网站
这里我们主要看一下生成的项目中都有什么。源码中都有什么，如何去自定义
我们先只导入一张全景图，不做任何设置 然后导出项目。（为了方便，我将其项目地址和 生成的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
0 0
- 二、H5全景图-朋友圈全景图-720°全景-VR ---- 项目简单分析
- 二、H5全景图-朋友圈全景图-720°全景-VR ---- 项目简单分析
- 二、H5全景图-朋友圈全景图-720°全景-VR ---- 项目简单分析
- 二、H5全景图-朋友圈全景图-720°全景-VR ---- 项目简单分析
- 一、H5全景图-朋友圈全景图-720°全景-VR -----工具使用
- 一、H5全景图-朋友圈全景图-720°全景-VR -----工具使用
- H5全景图-朋友圈全景图-720°全景-VR -----工具使用
- VR全景图效果
- VR全景图效果
- VR全景图效果
- Android VR 全景图
- VR 全景图实现
- Vr (全景图实现)
- 通过Android实现简单的VR全景图
- 最全VR产业链全景图
- google vr sdk(全景图的播放)
- VR开发基础—全景图
- VR开发基础—全景图
- BMT硬件之系统（一）:单片机、DSP、嵌入式、微控制器的区分
- HDU 1207
- 神奇的题（存石油的洞穴，uva 1442）
- 数学骗术
- LA4254 Processor (贪心+二分)
- 二、H5全景图-朋友圈全景图-720°全景-VR ---- 项目简单分析
- CodeForces 714D Searching Rectangles
- iOS应用安全读书笔记之联系人地址簿
- 使用Hibernate框架开发步骤
- （九）c52学习之旅-定时器
- Good Bye 2015 D. New Year and Ancient Prophecy（dp+lcp）
- POJ 2478Farey Sequence
- 三、初识GVR ---- Android VR视频/Google VR for Android /VR Pano/VR Video
- Java基础1-基本数据类型与操作
